hjm-vue-filters

介绍

1. vue过滤器封装实现，总结日常项目常用过滤器，能够支持单个过滤器引入使用

项目架构

.
|—— dist                      // 打包生成文件
|—— filters                   // 过滤器源码
|   |—— unit.js               // 单位转化
|   |—— times.js              // 时间过滤
|   └── index.js              // 入口文件
|—— main.js                   // 开发demo入口
|—— index.js                  // 开发demo文件    
|—— .babelrc
|—— .eslintrc.js
|—— .gitignore                // 限制git上传文件
|—— .babelrc
|—— package.json              // 本地npm管理文件  
|—— JEST.md                   // 单元测试说明(暂时没有集成)
|—— CHANGELOG.md              // 更新日志
|—— README.md                 // 项目说明
|—— webpack.config.js         // 打包脚本
.

使用教程

1. 安装npm包： npm i hjm-vue-filters

2. 在项目中使用

 
//在main.js注入
 
// 1. 引入全部方法
import * as filters from 'hjm-vue-filters'
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})
 
// 2. 单个方法引入
import { timeFormate, getWeek } from 'hjm-vue-filters'
Vue.filter('timeFormate', timeFormate)
Vue.filter('getWeek', getWeek)
 
// 在项目中使用过滤器
 
<p>{{ timestamp|timeFormate('YYYY-MM-DD HH:mm:ss') }}</p>
 

开发说明

1. filters目录里新建index.js文件为过滤器汇总文件
2. 编写开发日常过滤器，必须按照规范
3. 单个过滤器，单个方法导出，分类别区分过滤器文件

exports.formatMoney = (value) => {
  if (value) {
    value = Number(value);
    return '￥ ' + value.toFixed(2);
  }
};
 
exports.statusName = (val) => {
  let statusName = ['已取消','未付款','已付款']
  return statusName[val];
};
 

1. 效果测试与查看
2. main.js里注册filter

import * as filters from './filters/index.js'
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})
 

1. index.html中测试

 
<p>{{ timestamp|timeFormate('YYYY-MM-DD HH:mm:ss') }}</p>
 

运行项目

1. npm run dev 运行项目demo查看测试效果
2. npm run build 打包过滤器文件，可以在main.js中引入查看效果

方法总结

时间过滤

方法	参数	备注
timeFormate	(timestamp:时间戳,style:格式：'YYYY-MM-DD HH:mm:ss')	时间戳格式化工具
getWeek	timestamp:时间戳	时间戳转化星期

单位添加

方法	参数	备注
setMoney	(value:货币数值, unit:单位)	货币单位转换
addWan	(value:数字, order:量级, unit:单位)	根据数量级补充万

字符格式化

方法	参数	备注
formatPhone	(phone:手机号)	手机号格式化（中间四位用星号显示）
formatBank	(bank:银行卡号)	格式化银行卡（4位一空格）
toThousands	(number:数字)	千分位格式化
omitString	(str:操作字符, n:目标位数, text:拼接的字符串)	超出长度用自定义文本显示(默认4位省略号显示)
add0	(num:数字)	数字补零（小于十的数字前面补零）