概述
在做项目中需要自定义弹出框。就自己写了一个。
效果图
遇见的问题
怎么加载自定义的js文件
vue-插件这必须要看。然后就是自己写了。
export default{ install(Vue){ var tpl; // 弹出框 Vue.prototype.showAlter = (title,msg) =>{ var alterTpl = Vue.extend({ // 1、创建构造器,定义好提示信息的模板 template: '<div id="bg">' + '<div class="jfalter">' + '<div class="jfalter-title" id="title">'+ title +'</div>' + '<div class="jfalter-msg" id="message">'+ msg +'</div>' + '<div class="jfalter-btn" id="sureBtn" v-on:click="hideAlter">确定</div>' + '</div></div>' }); 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('提示','服务器请求失败');
以上这篇vue加载自定义的js文件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
最后
以上就是大方苗条为你收集整理的vue加载自定义的js文件方法的全部内容,希望文章能够帮你解决vue加载自定义的js文件方法所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复