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 相关文章推荐
IE与firefox下Dhtml的一些区别小结
Dec 02 Javascript
jQuery Validate表单验证入门学习
Dec 18 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 Javascript
JS表格组件神器bootstrap table使用指南详解
Apr 12 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
详解tween.js的使用教程
Sep 14 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
Nov 11 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
使用JavaScript破解web
Sep 28 Javascript
详解关于Vue单元测试的几个坑
Apr 26 Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
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支持断点续传、分块下载的类
2016/05/02 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
ExtJS下grid的一些属性说明
2009/12/13 Javascript
原创javascript小游戏实现代码
2010/08/19 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
Bootstrap每天必学之折叠
2016/04/12 Javascript
微信小程序 animation API详解及实例代码
2016/10/08 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
PHP7新特性简述
2017/06/11 Javascript
深入理解Node.js中通用基础设计模式
2017/09/19 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
JavaScript实现左侧菜单效果
2017/12/14 Javascript
JS中判断字符串存在和非空的方法
2018/09/12 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
[01:09:40]Newbee vs Pain 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
在Django中使用Sitemap的方法讲解
2015/07/22 Python
Flask框架学习笔记之表单基础介绍与表单提交方式
2019/08/12 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
Web页面中八种创建多列等高(等高列布局)的实现技术
2012/12/24 HTML / CSS
德国团购网站:Groupon德国
2018/03/13 全球购物
Nike加拿大官网:Nike.com (CA)
2019/04/09 全球购物
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
服务质量承诺书
2014/03/27 职场文书
社区工作者演讲稿
2014/05/23 职场文书
个性与发展自我评价
2015/03/06 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技