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

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

下面小編就為大家分享一篇vue加載自定義的js文件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

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

效果圖

遇見(jiàn)的問(wèn)題

怎么加載自定義的js文件

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

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ù)器請(qǐng)求失敗');

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

您可能感興趣的文章:

相關(guān)文章

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