
在做项目中需要自定义弹出框。就自己写了一个。
效果图

遇见的问题
怎么加载自定义的js文件
vue-插件这必须要看。然后就是自己写了。
export default{
 install(Vue){
 var tpl;
 // 弹出框
 Vue.prototype.showAlter = (title,msg) =>{
 var alterTpl = Vue.extend({ // 1、创建构造器,定义好提示信息的模板
 template: '<p id="bg">'
 + '<p class="jfalter">'
 + '<p class="jfalter-title" id="title">'+ title +'</p>'
 + '<p class="jfalter-msg" id="message">'+ msg +'</p>'
 + '<p class="jfalter-btn" id="sureBtn" v-on:click="hideAlter">确定</p>'
 + '</p></p>'
 });
 tpl = new alterTpl().$mount().$el; // 2、创建实例,挂载到文档以后的地方
 document.body.appendChild(tpl); 
 }
 Vue.mixin({
 methods: {
 hideAlter: function () {
 document.body.removeChild(tpl);
 }
 }
 })
 }
}使用
import jFAltre from '../../assets/jfAletr.js'; import Vue from 'vue'; Vue.use(jFAltre);
this.showAlter('提示','服务器请求失败');上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
Angular使用操作事件指令ng-click传多个参数示例
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
js中apply和Math.max()函数的问题及区别介绍
