整合常用的 Vue.js custom filters ,帮助你快速格式化时间、小数等数据,适合开发 Dashboard 后台管理类应用。
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 应用的开发成本。
1
loading 2016-04-19 13:08:19 +08:00
正在上手 vue.js ,十分感谢。
|
3
shellcodecow 2016-04-19 13:42:13 +08:00
github 上面看到的,已 star
|
4
Kamato OP @shellcodecow 谢谢~
|
5
airyland 2016-04-19 13:54:33 +08:00
时间戳转换直接依赖了 moment ,这个依赖有点大。
看 LZ 骨骼精奇,看有没有兴趣来帮忙完善一个 vue UI 的项目: https://github.com/airyland/vux |
6
Kamato OP @airyland 哈,这些 filters 主要是用来开发 Dashboard 类应用的。对于这种应用来说,引用个 moment.js 不算过分,而且很多其他地方都会用到 moment.js ,比如 echarts 图表的时间格式化,所以可以接受。你的项目看起来很赞,容我了解一下,时间充足的话我会尽我所能帮忙的~
|
7
NemoAlex 2016-04-21 10:59:29 +08:00
感觉
{{ isActive | booleanFormatter 'Yes' 'No' }} 这样的写法,并没有比 {{ isActive ? 'Yes' : 'No' }} 更简练啊,不明白有什么意义 |
8
Kamato OP @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 来处理,在很多情况下这代表后台传过来的数据有问题。 |