vue加載自定義的js文件方法
更新時(shí)間：2018年03月13日 09:46:51 作者：湖工電氣
下面小編就為大家分享一篇vue加載自定義的js文件方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
在做項(xiàng)目中需要自定義彈出框。就自己寫了一個(gè)。
效果圖
遇見的問題
怎么加載自定義的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è)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3實(shí)現(xiàn)粒子動(dòng)態(tài)背景的示例詳解
這篇文章主要為大家詳細(xì)介紹了如何利用Vue3實(shí)現(xiàn)粒子動(dòng)態(tài)背景,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以跟隨小編一起了解一下2023-11-11
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表格過濾功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了Vue中qs插件的使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
詳解vuelidate 對于vueJs2.0的驗(yàn)證解決方案
本篇文章主要介紹了vuelidate 對于vueJs2.0的驗(yàn)證解決方案，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
vue綁定數(shù)字類型 value為數(shù)字的實(shí)例
這篇文章主要介紹了vue綁定數(shù)字類型 value為數(shù)字的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue入門實(shí)戰(zhàn)之天氣預(yù)報(bào)
這篇文章主要為大家詳細(xì)介紹了Vue入門實(shí)戰(zhàn)之天氣預(yù)報(bào)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
vue項(xiàng)目中vue-i18n和element-ui國際化開發(fā)實(shí)現(xiàn)過程
這篇文章主要介紹了vue項(xiàng)目中vue-i18n和element-ui國際化開發(fā)實(shí)現(xiàn)過程，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了VUE : vue-cli中去掉路由中的井號#操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了Vue中的Tree-Shaking是什么,通過Tree-shaking，將沒有使用的模塊代碼移除掉，這樣來達(dá)到刪除無用代碼的目，本文結(jié)合實(shí)例代碼詳解詳解，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了VUE 全局變量的幾種實(shí)現(xiàn)方式,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08