时间:2021-07-01 10:21:17 帮助过:63人阅读
在做项目中需要自定义弹出框。就自己写了一个。
效果图
遇见的问题
怎么加载自定义的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()函数的问题及区别介绍
以上就是vue加载自定义的js文件方法的详细内容,更多请关注Gxl网其它相关文章!