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: '<p id="bg">'
+ '<p class="jfalter">'
+ '<p class="jfalter-title" id="title">'+ title +'</p>'
+ '<p class="jfalter-msg" id="message">'+ msg +'</p>'
+ '<p class="jfalter-btn" id="sureBtn" v-on:click="hideAlter">确定</p>'
+ '</p></p>'
});
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
