hjm-vue-filters v1.0.1

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中引入查看效果

方法总结

时间过滤

单位添加

字符格式化