• vue项目中如何将工具函数模块化导出


    如下所示,utils文件夹下的js里都是封装好的工具函数,

    如formatDate.js内容如下:

    1 export default (day)=>{
    2   var tmpDate = day ? new Date(day) : new Date();
    3   return tmpDate.getFullYear() + '-' + ('0' + (tmpDate.getMonth() + 1)).slice(-2) + '-' + ('0' + tmpDate.getDate()).slice(-2);
    4 }

    getRandom.js内容如下:

    1 export default (num = 1000)=>{
    2   var t = Math.random();
    3   return Math.ceil(t * num % num);
    4 }

    那么如何将这些js中封装好的工具函数模块化导出呢,重点来啦。。。我们靠一个中间js即index.js(中间桥梁)将这些js联系起来,其中index.js中代码如下:

     1 function plugin(Vue){
     2   if (plugin.installed) {
     3     return;
     4   }
     5   let utils = require.context(".", false, /.js$/)
     6   let $util = new Object();
     7   utils.keys().forEach(key=>{
     8     if (key === './index.js') return;
     9     let utilName = key.replace(/^.//, "").replace(/.js/, ""); //key = './abcd.js'   utilName = 'abcd'
    10     $util[utilName] = utils(key).default;        //$util['abcd'] = utils('./abcd.js')
    11   });
    12   Vue.prototype.$util = $util;
    13 
    14 }
    15 
    16 export default plugin

    到这里,准备工作都做好了,那么我们如何在.vue文件中调用这些工具函数呢?示例如下:

  • 相关阅读:
    $$Ctrl+shift+M分数罗马字母小写
    设置字体大小加粗斜体下划线
    无序列表有序列表
    数学公式插入
    文本居中、代码插入、图片插入
    VM 使用问题 | 安装失败->>注册表
    VM小技巧——虚拟机解决vm窗口太小的办法
    OneNet平台实践
    linux 打包 | autoconf 使用方法
    C 总结 | 复习注意点
  • 原文地址:https://www.cnblogs.com/yuwenjing0727/p/9230381.html
Copyright © 2020-2023  润新知