vue2.0 解决抽取公用js的问题


Posted in Javascript onJuly 31, 2020

首先创建公用js

在static中创建js—>utils.js

vue2.0 解决抽取公用js的问题

utils.js内容如下:

export default {
 install(Vue, options) {
  Vue.prototype.formatDuring = function (mss) {
   var days = parseInt(mss / (1000 * 60 * 60 * 24));
   var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
   var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
   var seconds = (mss % (1000 * 60)) / 1000;
   return days + " 天 " + hours + " 小时 " + minutes + " 分 " + Math.round(seconds) + " 秒 ";
  }
 }

}

在main.js中引入,以便全局使用

// 引入公用js
import utils from '../static/js/utils.js' 
Vue.use(utils);

在需要的地方使用

endline = this.formatDuring(currentTime);

ok!

补充知识:VUE 创建共通js 以及引用该js的共通方法

一个方法被多个js函数多次调用,为了减少代码量以及方便后期维护,创建一个公用的js类。

commonUtil 共通类

// 共通类
let commonUtil = {
};
 
commonUtil.openLogin = function (terminal) {
  console.log("i am is js mathod;" + terminal);
};
 
export default commonUtil;

其他js调用

首先引入该类

import commonUtil from "../../../src/utils/commonUtil";

其次调用共通类里面的openLogin方法

commonUtil.openLogin("Hello VUE");

运行结果:

vue2.0 解决抽取公用js的问题

以上这篇vue2.0 解决抽取公用js的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Extjs TimeField 显示正常时间格式的代码
Jun 28 Javascript
浏览器解析js生成的html出现样式问题的解决方法
Apr 16 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 Javascript
ES6的新特性概览
Mar 10 Javascript
js拼接html字符串的注意事项
Oct 13 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
Oct 19 Javascript
详解微信小程序回到顶部的两种方式
May 09 Javascript
React优化子组件render的使用
May 12 Javascript
react 组件传值的三种方法
Jun 03 Javascript
vue prop属性传值与传引用示例
Nov 13 Javascript
vue实现公共方法抽离
Jul 31 #Javascript
js实现无缝轮播图插件封装
Jul 31 #Javascript
原生js滑动轮播封装
Jul 31 #Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
Jul 31 #Javascript
jquery轮播图插件使用方法详解
Jul 31 #jQuery
在Uni中使用Vue的EventBus总线机制操作
Jul 31 #Javascript
jQuery带控制按钮轮播图插件
Jul 31 #jQuery
You might like
在Zeus Web Server中安装PHP语言支持
2006/10/09 PHP
php获取远程文件的内容和大小
2015/11/03 PHP
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
纯JS实现的批量图片预览加载功能
2011/08/14 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
jQuery自定义多选下拉框效果
2017/06/19 jQuery
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
AngularJS 教程及实例代码
2017/10/23 Javascript
React中的render何时执行过程
2018/04/13 Javascript
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
python计算auc指标实例
2017/07/13 Python
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
Python实现的rsa加密算法详解
2018/01/24 Python
好的Python培训机构应该具备哪些条件
2018/05/23 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
记一次pyinstaller打包pygame项目为exe的过程(带图片)
2020/03/02 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
浅析python 字典嵌套
2020/09/29 Python
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
工地安全质量标语
2014/06/07 职场文书
教师考核表个人总结
2015/02/12 职场文书