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

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

效果图

遇见的问题

怎么加载自定义的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文件方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。