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 相关文章推荐
JavaScript For Beginners(转载)
Jan 05 Javascript
JavaScript 在线压缩和格式化收藏
Jan 16 Javascript
JS中令人发指的valueOf方法介绍
Feb 22 Javascript
javascript中普通函数的使用介绍
Dec 19 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
jQuery常用的一些技巧汇总
Mar 26 Javascript
js仿小米官网图片轮播特效
Sep 29 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 Javascript
微信小程序canvas实现刮刮乐效果
Jul 09 Javascript
Node.js JSON模块用法实例分析
Jan 04 Javascript
修改vue源码实现动态路由缓存的方法
Jan 21 Javascript
vue实现列表滚动的过渡动画
Jun 29 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 ci框架验证码实例分析
2013/06/26 PHP
PHP魔术引号所带来的安全问题分析
2014/07/15 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
php过滤htmlspecialchars() 函数实现把预定义的字符转换为 HTML 实体用法分析
2019/06/25 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
javascript替换已有元素replaceChild()使用介绍
2014/04/03 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
加载列表时jquery获取ul中第一个li的属性
2014/11/02 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
JS模拟的Map类实现方法
2016/06/17 Javascript
JSON 数据格式详解
2017/09/13 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
vue模式history下在iis中配置流程
2019/04/17 Javascript
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
python实现海螺图片的方法示例
2019/05/12 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
django 解决扩展自带User表遇到的问题
2020/05/14 Python
python中adb有什么功能
2020/06/07 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
浅析HTML5 Landmark
2020/09/11 HTML / CSS
大学毕业的自我鉴定
2013/10/08 职场文书
食堂员工工作职责
2013/12/18 职场文书
怀念母亲教学反思
2014/04/28 职场文书
教育见习报告范文
2014/11/03 职场文书
信用卡工作证明范本
2015/06/19 职场文书
2016幼儿园毕业感言
2015/12/08 职场文书
导游词之峨眉乐山/兵马俑/北京故宫御花园
2019/09/03 职场文书
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
2022/04/30 Vue.js