注册多个过滤器的简易方法

最新推荐文章于 2024-07-26 11:27:38 发布

柴九哥-

最新推荐文章于 2024-07-26 11:27:38 发布

阅读量318

点赞数

分类专栏： vue基础知识文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_66333916/article/details/125125562

版权

vue基础知识专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何通过在JavaScript中使用for...in循环批量注册Vue过滤器，从而避免了单独引入每个过滤器的繁琐过程。首先，引入包含所有过滤器的JS文件，然后遍历该对象并将每个过滤器注册到Vue实例中。这种方法适用于拥有多个过滤器的项目，简化了代码管理和维护。示例中展示了过滤器如timeAgo、numberFormatter等的注册方式。

摘要由CSDN通过智能技术生成

前言：
当我们需要用到很多过滤器，并且把过滤器都封装在一个js文件中，如果按照平时的单独引入的方法引入会很麻烦，我们不妨试试利用 for… in循环的方法，把js文件中所有的过滤器都遍历出来注册，这样就解决了这个烦恼。

步骤：

1.引入封装好过滤器的js文件，注意这里的引入方法需要用 * as

import * as Myfilters from '@/filters'

2.利用for…in方法把遍历出来的过滤器名字，用vue.filter注册

for (const key in Myfilters) {
  Vue.filter(key, Myfilters[key])
}

附带部分js封装的过滤器格式，js文件中暴露出来的都可以用可以表示出来，所以在循环中用key来注册即可，此方法适用于多过滤器的场景

export function timeAgo(time) {
  const between = Date.now() / 1000 - Number(time)
  if (between < 3600) {
    return pluralize(~~(between / 60), ' minute')
  } else if (between < 86400) {
    return pluralize(~~(between / 3600), ' hour')
  } else {
    return pluralize(~~(between / 86400), ' day')
  }
}.....
过滤器 timeAgo
过滤器 numberFormatter
过滤器 toThousandFilter
过滤器 uppercaseFirst
过滤器 parseTime
过滤器 formatTime
过滤器 getNowFormatDate
过滤器 nFormatter
过滤器 html2Text
过滤器 toThousandslsFilter
过滤器 checkPhone
过滤器 checkPassword
过滤器 checkTel
过滤器 checkiDNumber
过滤器 checkEmails
过滤器 checkEmail
过滤器 checkCode
过滤器 checkQq
过滤器 formatBankNo
过滤器 getStrleng
过滤器 updatedImg
过滤器 updatedFile
过滤器 importFile
过滤器 minHeight
过滤器 formatDate
过滤器 getBlob
过滤器 imgHandle