The simple implementation of some angularjs built-in filters in vue.
This package is very small and it only contains eight functions.
Support the typescript.
To check out live examples and docs, visit easy-filter.
# install plugin
npm install easy-filter --save
import {
currency,
date,
filter,
limitTo,
lowercase,
number,
uppercase,
orderBy
} from "easy-filter";
const currencyString = currency(100);
// currencyString => $100.00
Import this plugin.
import EasyFilter from "easy-filter";
import Vue from "vue";
Vue.use(EasyFilter);
// or use only what you need
import {
number,
orderBy,
//...
} from "easy-filter";
Vue.filter('number', number);
Vue.filter('orderBy', orderBy);
const easyFilter = {
number,
orderBy,
};
Vue.prototype.$easyFilter = Vue.easyFilter = easyFilter;
Direct <script>
Include.
<script src="./path/to/easy-filter.min.js"></script>
Use it in a component:
Default:
<div>{{ 'Hello' | lowercase }}</div>
<!-- hello -->
Specified range:
<div>{{ 'HELLO' | lowercase(3,4) }}</div>
<!-- HEllO -->
Specify starting position:
<div>{{ 'HELLO' | lowercase(3) }}</div>
<!-- HEllo -->
<div>{{ 'Hello' | uppercase }}</div>
<!-- HELLO -->
<div>{{ 1000 | currency }}</div>
<!-- 1000 => $1,000.00 -->
Use a different symbol:
<div>{{ 1000 | currency('¥') }}</div>
<!-- 1000 => ¥1,000.00 -->
Use a different number decimal places:
<div>{{ 1000 | currency('¥', 0) }}</div>
<!-- 1000 => ¥1,000 -->
Use a different separator:
<div>{{ 1000 | currency('¥', 0, {separator: '.'}) }}</div>
<!-- 1000 => ¥1.000 -->
Hide separator
<div>{{ 1000 | currency('¥', 0, {separator: ''}) }}</div>
<!-- 1000 => ¥1000 -->
Use symbol on right:
<div>{{ 1000 | currency('¥', 0, {symbolOnLeft: false}) }}</div>
<!-- 1000 => 1,000¥ -->
Add space between amound and symbol:
<div>{{ 10.012 | currency('BTC', 8, {addSpace: true}) }}</div>
<!-- 10.012 => BTC 10.01200000 -->
Open round
<div>{{ 1000.999 | currency('¥', 2, {round: true}) }}</div>
<!-- 1000.999 => ¥1,001.00 -->
Close padding
<div>{{ 1000.5 | currency('¥', 2) }}</div>
<!-- 1000.5 => ¥1,000.50 -->
<div>{{ 1000.123 | currency('¥', 2, {pad: false}) }}</div>
<!-- 1000.123 => ¥1,000.12 -->
<div>{{ 1000.5 | currency('¥', 2, {pad: false}) }}</div>
<!-- 1000.5 => ¥1,000.5 -->
Use multiple options:
<div>{{ 1000 | currency('¥', 0, {symbolOnLeft: false, addSpace: true}) }}</div>
<!-- 1000 => 1,000 ¥ -->
<div>{{ 1523169365575 | date('yyyy-MM-dd HH:mm:ss EEE', 'cn') }}</div>
<!-- 2018-04-08 14:36:05 星期日 -->
<div>{{ 1523169365575 | date('yyyy-MM-dd HH:mm:ss EE', 'cn') }}</div>
<!-- 2018-04-08 14:36:05 周日 -->
<div>{{ 1523169365575 | date('yyyy') }}</div>
<!-- 2018 -->
<div>{{ 1523169365575 | date('yy') }}</div>
<!-- 18 -->
<div>{{ 1523169365575 | date('HH:mm:ss') }}</div>
<!-- 14:36:05 -->
<div>{{ 1523169365575 | date('hh:mm:ss') }}</div>
<!-- 02:36:05 -->
<div>{{ 1523169365575 | date('EEE','en') }}</div>
<!-- Sunday -->
<div>{{ 1523169365575 | date('EE','en') }}</div>
<!-- Sun -->
<!-- yyyy、MM、dd、HH、hh、mm、ss、EEE, can be used alone or in combination. -->
Cooperate with i18n
<div>{{ 1523169365575 | date('EEE', $t('localWeek')}</div>
zh.json
{
"localWeek":{
"week": [
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
],
"shortWeek": [
"周日",
"周一",
"周二",
"周三",
"周四",
"周五",
"周六",
]
}
}
en.json
{
"localWeek":{
"week": [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
],
"shortWeek": ["Sun", "Mon", "Tue", "Wed", "Thur", "Fri", "Sat"]
}
}
ja.json
{
"localWeek":{
"week": [
"にちようび",
"げつようび",
"かようび",
"すいようび",
"もくようび",
"きんようび",
"どようび",
],
"shortWeek": [
"にちようび",
"げつようび",
"かようび",
"すいようび",
"もくようび",
"きんようび",
"どようび",
]
}
}
<template>
<div>
<input type="text" v-model="match" />
<table>
<tr>
<th>name</th>
<th>age</th>
<th>sex</th>
</tr>
<tr
v-for="value in filter(personArray, new RegExp(match,'i') )"
:key="value.id"
>
<td v-text="value.name"></td>
<td v-text="value.age"></td>
<td v-text="value.sex"></td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: "$easyFilter.filter",
data() {
return {
match: "",
personArray: [
{ name: "Kimi", sex: "male", age: 8, id: 1 },
{ name: "Cindy", sex: "female", age: 4, id: 2 },
{ name: "Angela", sex: "female", age: 6, id: 3 },
{ name: "Shitou", sex: "male", age: 7, id: 4 },
{ name: "Tiantian", sex: "male", age: 5, id: 5 }
]
};
},
methods: {
filter(input, match) {
// You can do this if you don't want some property to participate in filtering
// const options = {
// match,
// ignore: ['id'], // ignore property id
// }
// match = options
// Used in js
return this.$easyFilter.filter(input, match);
// Use of other filters.
// this.$easyFilter.lowercase('WORLD')
// this.$easyFilter.currency(1000,'¥')
// this.$easyFilter.date(1523169365575,'yy-MM-dd')
// ...
}
},
// How do you want to improve performance? You can do this.
computed: {
usefulData() {
return this.$easyFilter.filter(this.personArray, new RegExp(this.match));
}
}
};
</script>
<!--
When you enter 'an' in the input box will show:
name age sex
Angela 6 female
Tiantian 5 male
-->
The filter can also filter the range conditions.
// <div v-for="item in filter(personArray, matchFn)" :key="item.id">{{item}}</div>
data () {
return {
personArray: [
{name: 'Kimi', sex: 'male', age: 8, id: 1},
{name: 'Cindy', sex: 'female', age: 4, id: 2},
{name: 'Angela', sex: 'female', age: 6, id: 3},
{name: 'Shitou', sex: 'male', age: 7, id: 4},
{name: 'Tiantian', sex: 'male', age: 5, id: 5}
]
}
},
methods: {
matchFn (value) {
// Select children greater than or equal to 6 years old.
return value.age >= 6;
},
filter (input, matchFn) {
return this.$easyFilter.filter(input, matchFn);
}
<template>
<div>
<table>
<tr>
<th><button @click="click('name')">name</button></th>
<th><button @click="click('age')">age</button></th>
<th><button @click="click('sex')">sex</button></th>
</tr>
<tr v-for="value in orderBy(personArray, rule)" :key="value.id">
<td v-text="value.name"></td>
<td v-text="value.age"></td>
<td v-text="value.sex"></td>
</tr>
</table>
</div>
</template>
<script>s
export default {
name: "$easyFilter.orderBy",
data() {
return {
personArray: [
{ name: "Kimi", sex: "male", age: 8, id: 1 },
{ name: "Cindy", sex: "female", age: 4, id: 2 },
{ name: "Angela", sex: "female", age: 6, id: 3 },
{ name: "Shitou", sex: "male", age: 7, id: 4 },
{ name: "Tiantian", sex: "male", age: 5, id: 5 }
],
rule: null
};
},
methods: {
click(rule) {
this.rule = rule;
},
orderBy(input, rule, reverse) {
return this.$easyFilter.orderBy(input, rule, reverse);
}
// or use custom sort functions
// orderBy(input, callBack = (v1,v2)=> v1.att > v2.att ? 1 : -1) {
// return this.$easyFilter.orderBy(input, callBack)
// }
}
};
</script>
<!--
When you click on the name.
name age sex
Angela 6 female
Cindy 4 female
Kimi 8 male
Shitou 7 male
Tiantian 5 male
When you click age.
name age sex
Cindy 4 female
Tiantian 5 male
Angela 6 female
Shitou 7 male
Kimi 8 male
When you click sex.
Cindy 4 female
Angela 6 female
Kimi 8 male
Shitou 7 male
Tiantian 5 male
The above result reverse is undefined.
If reverse is true then the result will be reversed.
You can also add '-' to reverse the results in front of the click parameter.
For example, <th @click="click('-name')">name</th>.
-->
Creates a new array or string containing only a specified number of elements. The elements are taken from either the beginning of the source array, string or number.
export default {
methods: {
limitTo(input, limit, options) {
return this.$easyFilter.limitTo(input, limit, options);
}
}
};
The first parameter input
is the data to be filtered, which can be an array, a number, or a string.
The second parameter is the length you want to limit.
Second Parameter | Description | Type | Default |
---|---|---|---|
Limit | limit length | number | Number.POSITIVE_INFINITY |
The third parameter is the configuration item, which tells the filter how to filter the data.
The fields of the configuration item are:
Attribute | Description | Type | Default |
---|---|---|---|
startWithIndex | Calculates the number of elements to limit based on the index | number | 0 |
startWith | Calculate the number of elements to limit based on the element | not number | undefined |
ignore | Ignore matched elements when counting | RegExp , object | undefined |
cut | Whether to intercept | boolean | false |
- Limit the length of a string to no more than 3
<div>{{ 'hello' | limitTo(3) }}</div>
<!-- hel -->
- Limit the length of a string to no more than 3 characters starting with the second letter
<div>{{ 'hello' | limitTo(3, {startWithIndex:1}) }}</div>
<!-- hell -->
- If you want to cut the front part you can add cut
<div>{{ 'hello' | limitTo(3, {startWithIndex:1, cut: true}) }}</div>
<!-- ell -->
- You can also specify the starting position based on the element
<div>{{ 3.1415 | limitTo(2, {startWith:'.'}) }}</div>
<!-- 3.1 -->
- You can ignore it if you don't want irrelevant elements to affect the count
<div>{{ 3.1415 | limitTo(2, {startWith:'.', ignore: /\./}) }}</div>
<!-- 3.14 -->
- Displays a number of eight bits of data
<div>{{ 123456789 | limitTo(8, {ignore: /\./}) }}</div>
<!-- 12345678 -->
<div>{{ 3.141592653 | limitTo(8, {ignore: /\./}) }}</div>
<!-- 3.1415926 -->
- Limit Array
limitTo([1, 2, 3, 4, 5], 2);
// [1,2]
limitTo([1, 2, 3, 4, 5], 2, { startWith: 3, cut: true });
// [3,4]
Formats a number as a string or a string as a number. When you pass in an integer, you will default to one decimal places, and when you enter a decimal, you will get its string. You can also change the exact number of digits by passing in parameters, and set options parameters to determine whether you want to round, and fill in zeros.
@param1 input
@param2 digits
@param3 options {round:false, pad:false}
No parameter
<div>{{ 3.14 | number }}</div>
<!-- 3.14 -->
Displays a maximum of 8 decimal places by default and does not round
<div>{{ 0.123456789 | number }}</div>
<!-- 0.12345678 -->
Limit digits
<div>{{ 3.1415926 | number(4) }}</div>
<!-- 3.1415 -->
Conversion scientific counting
<div>{{ 5.2e-7 | number(8) }}</div>
<!-- 0.00000052 -->
Limit digits & Fill zero
<div>{{ 1 | number(2, {pad:true}) }}</div>
<!-- 1.00 -->
Limit digits & Rounding
<div>{{ 3.1415 | number(3, {round: true}) }}</div>
<!-- 3.142 -->
Display separator
<div>{{ 10000 | number(1, {separator:','}) }}</div>
<!-- 10,000 -->
Display positive sign
<div>{ { 100.123456 | number(5, {round: true, sign: true}) } }</div>
<!-- +100.12346 -->
Limit digits & Fill zero & Rounding
var arr = [
1,
2.2,
3.33,
4.444,
5.5555
]
<div v-for="num in arr">{{ num | number(3, {pad: true, round: true} )}}</div>
// 1.000
// 2.200
// 3.330
// 4.444
// 5.556
More than 8 decimal places need to pass in the number of parameters
<div>{{ 3.14e-20 | number(21) }}</div>
<!-- 0.000000000000000000031 -->
Change return type
import { number } from 'easy-filter';
const res = number('123.456',2,{round:true,type:'number'});
// The result is equal to the 123.46
res === 123.46
// true