欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

vue加载自定义的js文件方法

程序员文章站 2022-03-30 13:35:24
...
下面小编就为大家分享一篇vue加载自定义的js文件方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

在做项目中需要自定义弹出框。就自己写了一个。

效果图

vue加载自定义的js文件方法

遇见的问题

怎么加载自定义的js文件

vue-插件这必须要看。然后就是自己写了。

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);
   }
   }
  })
 }
}

使用

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

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

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

Angular使用操作事件指令ng-click传多个参数示例

Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例

js中apply和Math.max()函数的问题及区别介绍

以上就是vue加载自定义的js文件方法的详细内容,更多请关注其它相关文章!