V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Kamato
V2EX  ›  前端开发

[简化 Vue.js 应用开发] 分享一个常用 Vue.js 自定义过滤器合集,适合开发 Dashboard 后台管理类应用

  •  
  •   Kamato ·
    panteng · 2016-04-19 12:57:04 +08:00 · 8018 次点击
    这是一个创建于 3131 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Vue-Filters-Kit

    整合常用的 Vue.js custom filters ,帮助你快速格式化时间、小数等数据,适合开发 Dashboard 后台管理类应用。

    screenshot.jpg

    GitHub: https://github.com/panteng/vue-filters-kit

    示例: http://panteng.me/demos/vue-filters-kit

    写在后面

    这个项目的诞生的原因是,最近这一年我用 Vue.js 写了很多后台管理类的网站,这种网站会涉及很多数据格式化相关的工作。通常我会使用 Vue 过滤器实现数据格式化。因此我打算将一些常用的自定义过滤器整合起来,做成一个库,以后在写新项目时直接拿来用就好,不需要再从头编写。

    目前整合了我自己在 Vue.js 应用中常用的过滤器,包括 booleanFormatter (格式化布尔值), byteFormatter (将 Byte 值转换为 kb 、 mb 、 gb 或 tb ), percentageFormatter (将小数转化为百分数)和 timestampFormatter (将时间戳转换为时间)。我将陆续增加更多的自定义过滤器。

    欢迎提 bug 和建议。如果你有其他常用的过滤器想补充,也欢迎 pull request 。总之是希望把一些常用的过滤器整合在一起,随取随用,以减少 Vue.js 应用的开发成本。

    8 条回复    2016-04-21 11:56:17 +08:00
    loading
        1
    loading  
       2016-04-19 13:08:19 +08:00
    正在上手 vue.js ,十分感谢。
    Kamato
        2
    Kamato  
    OP
       2016-04-19 13:16:11 +08:00
    @loading 感谢支持~
    shellcodecow
        3
    shellcodecow  
       2016-04-19 13:42:13 +08:00
    github 上面看到的,已 star
    Kamato
        4
    Kamato  
    OP
       2016-04-19 13:47:44 +08:00
    @shellcodecow 谢谢~
    airyland
        5
    airyland  
       2016-04-19 13:54:33 +08:00
    时间戳转换直接依赖了 moment ,这个依赖有点大。
    看 LZ 骨骼精奇,看有没有兴趣来帮忙完善一个 vue UI 的项目: https://github.com/airyland/vux
    Kamato
        6
    Kamato  
    OP
       2016-04-19 14:03:10 +08:00
    @airyland 哈,这些 filters 主要是用来开发 Dashboard 类应用的。对于这种应用来说,引用个 moment.js 不算过分,而且很多其他地方都会用到 moment.js ,比如 echarts 图表的时间格式化,所以可以接受。你的项目看起来很赞,容我了解一下,时间充足的话我会尽我所能帮忙的~
    NemoAlex
        7
    NemoAlex  
       2016-04-21 10:59:29 +08:00
    感觉
    {{ isActive | booleanFormatter 'Yes' 'No' }}
    这样的写法,并没有比
    {{ isActive ? 'Yes' : 'No' }}
    更简练啊,不明白有什么意义
    Kamato
        8
    Kamato  
    OP
       2016-04-21 11:56:17 +08:00
    @NemoAlex 恩~ 确实更简练。但是我更倾向于把数据格式化的操作用 filter 的形式封装起来,出于 2 点考虑:

    1. 保持代码风格一致。凡是涉及数据格式化的操作,都用 filters 来完成。就像 percentageFormatter 也可以用{{ (decimal*100).toFixed(2) }} 代替一样。但我个人不喜欢。

    2. 便于统一维护和增加自定义操作。{{ isActive | booleanFormatter 'Yes' 'No' }} 和 {{ isActive ? 'Yes' : 'No' }} 其实并不完全相同。 booleanFormatter 要求 isActive 必须是一个显式的 true 或 false 值,如果 isActive 的值是 null 或 underfined 或空字符串,则返回的结果不是'No',而是一个横线'-'。其他三个过滤器我也做了类似的操作。因为我不想把空值或未定义的值当作 false 和 0 来处理,在很多情况下这代表后台传过来的数据有问题。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1067 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 22:39 · PVG 06:39 · LAX 14:39 · JFK 17:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.