当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue加载自定义的js文件方法

vue加载自定义的js文件方法

2019年06月06日  | 移动技术网IT编程  | 我要评论

黑龙江省生殖保健中心,坏坏总裁娃娃妻,高密市天气预报

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

效果图

遇见的问题

怎么加载自定义的js文件

这必须要看。然后就是自己写了。

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文件方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网