vue加載自定義的js文件方法

發(fā)布時(shí)間：2020-09-07 07:18:08 來源：腳本之家閱讀：203 作者：湖工電氣欄目：web開發(fā)

在做項(xiàng)目中需要自定義彈出框。就自己寫了一個(gè)。

效果圖

vue加載自定義的js文件方法

遇見的問題

怎么加載自定義的js文件

vue-插件這必須要看。然后就是自己寫了。

export default{
 install(Vue){
  var tpl;
  // 彈出框
  Vue.prototype.showAlter = (title,msg) =>{
   var alterTpl = Vue.extend({  // 1、創(chuàng)建構(gòu)造器，定義好提示信息的模板
     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、創(chuàng)建實(shí)例，掛載到文檔以后的地方
   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('提示','服務(wù)器請求失敗');

以上這篇vue加載自定義的js文件方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

vue加載自定義的js文件方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽