Vue系列一：filter

前言

在开发项目的过程中，Vue filter的使用是必不可少的。

Vue filter在项目中的使用技巧

为了更方便的使用filter，我们在src目录下创建filters文件夹用来存放项目中要使用的filter.
新建index.js 引入所有的filter.

Vue.filter()注册所有filter.

import Vue from 'vue';
import { snakeCase } from 'lodash';

import instanceStatus from './instance-status.filter';
import toUSD from './toUSD.filter';
import upperCase from './upper-case.filter';
import toFix from './to-fix.filter';
import readMore from './read-more.filter';
import dateFormate from './date-formate.filter';
import fourSpace from './four-space.filter';
import noSpace from './no-space.filter';
import moneyFormat from './money-format.filter';
import telFormate from './tel-formate.filter';
import idcardFormate from './idcard-formate.filter';

const filters = {
  instanceStatus,
  toUSD,
  upperCase,
  toFix,
  readMore,
  dateFormate,
  fourSpace,
  noSpace,
  moneyFormat,
  telFormate,
  idcardFormate
};

Object.keys(filters).forEach(key => {
  Vue.filter(snakeCase(key), filters[key]);
});

常用的filter

日期格式化

import moment from 'moment';

export default function dateFormate(date, pattern = 'YYYY-MM-DD HH:mm:ss') {
  return moment(date).format(pattern);
}

金钱格式化

//金钱三位用 ","隔开
export default function moneyFormat(value) {
  value = value.toString().replace(/\$|\,/g, '');
  if (isNaN(value)) {
    value = "0";
  }
  let sign = (value == (value = Math.abs(value)));
  value = Math.floor(value * 100 + 0.50000000001);
  let cents = value % 100;
  value = Math.floor(value / 100).toString();
  if (cents < 10) {
    cents = "0" + cents
  }
  for (var i = 0; i < Math.floor((value.length - (1 + i)) / 3); i++) {
    value = value.substring(0, value.length - (4 * i + 3)) + ',' + value.substring(value.length - (4 * i + 3));
  }

  return (((sign) ? '' : '-') + value + '.' + cents);
}

保留小数后几位

1
2
3

export default function toFix(value, limit) {
  return value.toFixed(limit);
}

转化成美元$符

1
2
3

export default function toUSD(value) {
  return `$${value}`;
}

去除空格

1
2
3

export default function noSpace(str) {
  return str.replace(/\s+/g, "");
}

卡号格式化（每四位空格隔开）

1
2
3

export default function fourSpace(value) {
  return value && value.replace(/\s/g, '').replace(/(.{4})/g, "$1 "); 
}

例如：1234342324322342 => 1234 3423 2432 2342

身份证格式化

//身份证号格式化 前六位 后四位 中间变为星号 ---例如：340888*******5656
export default function idcardFormate(value) {
  return value && value.replace(/^(.{6})(?:\d+)(.{4})$/,"$1*******$2");
}

手机号格式化

//手机号格式化 中间四位变成星号
export default function telFormate(value) {
  return value && value.replace(/^(.{3})(?:\d+)(.{4})$/,"$1****$2");
}

大写格式化

1
2
3

export default function upper(str) {
  return str.toUpperCase();
}

阅读更多

1
2
3

export default function readMore(text, len, suffix) {
  return text.substring(0, len) + suffix;
}

例如：

1 2	<div class="summary">{{ article.summary \| read_more(110, '...') }}</div> <div class="action"><a :href="article.link">阅读更多</a></div>

更多filter