vue loads custom js file method

The editor below will share with you a method of loading custom js files in vue. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor and take a look.

When working on a project, you need to customize the pop-up box. I just wrote one myself.

Rendering

Problems encountered

How to load custom js File

vue-pluginThis must be seen. Then I just wrote it myself.

export default{
 install(Vue){
  var tpl;
  // 弹出框
  Vue.prototype.showAlter = (title,msg) =>{
   var alterTpl = Vue.extend({  // 1、创建构造器，定义好提示信息的模板
     template: &#39;<p id="bg">&#39;
       + &#39;<p class="jfalter">&#39;
       + &#39;<p class="jfalter-title" id="title">&#39;+ title +&#39;</p>&#39;
       + &#39;<p class="jfalter-msg" id="message">&#39;+ msg +&#39;</p>&#39;
       + &#39;<p class="jfalter-btn" id="sureBtn" v-on:click="hideAlter">确定</p>&#39;
       + &#39;</p></p>&#39;
   });
   tpl = new alterTpl().$mount().$el; // 2、创建实例，挂载到文档以后的地方
   document.body.appendChild(tpl); 
  }
  Vue.mixin({
   methods: {
   hideAlter: function () {
    document.body.removeChild(tpl);
   }
   }
  })
 }
}

Use

import jFAltre from '../../assets/jfAletr.js';
import Vue from 'vue';
Vue.use(jFAltre);

this.showAlter('提示','服务器请求失败');

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Angular uses the operation event instruction ng-click to pass multiple parameters Example

Angular uses filters Uppercase/lowercase implements letter case conversion function example

Introduction to the problems and differences between apply and Math.max() functions in js

The above is the detailed content of vue loads custom js file method. For more information, please follow other related articles on the PHP Chinese website!