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


Posted in Javascript onMarch 13, 2018

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

效果图

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

遇见的问题

怎么加载自定义的js文件

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

export default{
 install(Vue){
  var tpl;
  // 弹出框
  Vue.prototype.showAlter = (title,msg) =>{
   var alterTpl = Vue.extend({  // 1、创建构造器,定义好提示信息的模板
     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、创建实例,挂载到文档以后的地方
   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('提示','服务器请求失败');

以上这篇vue加载自定义的js文件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
有趣的JavaScript数组长度问题代码说明
Jan 20 Javascript
原生js的弹出层且其内的窗口居中
May 14 Javascript
HTML页面登录时的JS验证方法
May 28 Javascript
深入php面向对象、模式与实践
Feb 16 Javascript
JavaScript程序中的流程控制语句用法总结
May 23 Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 Javascript
浅谈AngularJS中ng-class的使用方法
Nov 11 Javascript
基于vue.js实现图片轮播效果
Dec 01 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
node 标准输入流和输出流代码实例
Sep 19 Javascript
vue轮播图插件vue-concise-slider的使用
Mar 13 #Javascript
vue页面离开后执行函数的实例
Mar 13 #Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
Mar 13 #Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 #Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 #Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 #Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 #Javascript
You might like
php检测useragent版本示例
2014/03/24 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
PHP中实现获取IP和地理位置类分享
2015/02/10 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
几行代码轻松搞定jquery实现flash8类似的连接效果
2007/05/03 Javascript
jquery 日期分离成年月日的代码
2010/05/14 Javascript
jQuery版仿Path菜单效果
2011/12/15 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
浅谈javascript的调试
2015/01/28 Javascript
jquery实现动态操作select选中
2015/02/11 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
js针对图片加载失败的处理方法分析
2019/08/24 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
python tkinter基本属性详解
2019/09/16 Python
Pycharm中安装wordcloud等库失败问题及终端通过pip安装的Python库如何添加到Pycharm解释器中(推荐)
2020/05/10 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
python实现人工蜂群算法
2020/09/18 Python
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
2020/06/04 HTML / CSS
shell的种类有哪些
2015/04/15 面试题
摄影专业毕业生求职信
2014/08/05 职场文书
法人代表证明书
2014/09/18 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书
违纪检讨书范文
2015/01/27 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis