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

更新時間：2018年03月13日 09:46:51 作者：湖工電氣

下面小編就為大家分享一篇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)建實例，掛載到文檔以后的地方
   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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue引用vee-validate插件表單驗證問題(cdn方式引用)
這篇文章主要介紹了Vue引用vee-validate插件表單驗證問題(cdn方式引用)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
Nuxt.js踩坑總結(jié)分享
本篇文章主要介紹了Nuxt.js踩坑總結(jié)分享，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-01-01
Vue.js展示AJAX數(shù)據(jù)簡單示例講解
當(dāng)通過AJAX方式取回數(shù)據(jù)后，使用vue.js可以完美地按一定邏輯在頁面上的展示數(shù)據(jù)，代碼簡單、優(yōu)美、自然，而且便于與在用的頁面框架集成，本文給大家介紹Vue.js展示AJAX數(shù)據(jù)簡單示例
2017-03-03
10個Vue3中常用的組合式?API用法詳解
通過Vue?3,組合式API增強(qiáng)了我們利用Vue的能力,使我們的代碼更具模塊性和可讀性,本文主要來和大家分享10個常用的Vue3組合式API,希望對大家有所幫助
2024-01-01
詳解本地Vue項目請求本地Node.js服務(wù)器的配置方法
本文只針對自己需要本地模擬接口于是搭建一個本地node服務(wù)器供自己測試使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-03-03
vue實現(xiàn)微信分享朋友圈,發(fā)送朋友的示例講解
下面小編就為大家分享一篇vue實現(xiàn)微信分享朋友圈,發(fā)送朋友的示例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
Vue中從template到j(luò)sx語法教程示例
這篇文章主要為大家介紹了Vue中從template到j(luò)sx語法教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-10-10
如何解決前端上傳Formdata中的file為[object?Object]的問題
文件上傳是Web開發(fā)中常見的功能之一,下面這篇文章主要給大家介紹了關(guān)于如何解決前端上傳Formdata中的file為[object?Object]問題的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-07-07
vue3 :deep()的使用教程
對應(yīng)前端小白來說,一看到:deep()這些模式的用法就不理解是啥意思,下面簡單介紹一下:deep()是什么以及如何使用,感興趣的朋友跟隨小編一起看看吧
2023-10-10
Vue使用Proxy代理后仍無法生效的解決
這篇文章主要介紹了Vue使用Proxy代理后仍無法生效的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11