filters
一個過濾器集
一、包含的過濾器
| 過濾器 | 作用 |
|---|---|
| filterToDateAndTime | 將時間轉換成規定格式 |
| filterToDecimal | 最多保留幾位小數 |
| filterToSystem | 簡單的進制轉換 |
| filterToSeparation | 規定固定位置用自定義分隔號隔開，用於分隔電話號碼以及銀行卡號等 |
| filterToHide | 轉換自定義位置字符 |
| filterToTextTransform | 轉換大小寫，包括全部大小寫，首字母大小寫等，可兼容多句子 |
二、各自的用法
1.filterToDateAndTime
| 參數 | 默認值 | 可取值 | 含義 |
|---|---|---|---|
| data | / | 時間 | 接收的數據 |
| type | DateAndTime | DateAndTime、Date、Time | 轉換的類型 |
| separator | - | 自定義的分隔字符或者字符串 | 用於分隔日期的分隔符 |
2.filterToDecimal
| 參數 | 默認值 | 可取值 | 含義 |
|---|---|---|---|
| data | / | 數字，浮點數 | 接收的數據 |
| count | 1 | 正整數 | 最多保留幾位小數 |
3.filterToSystem
| 參數 | 默認值 | 可取值 | 含義 |
|---|---|---|---|
| data | / | 數字 | 接收的數據 |
| originUnit | g | 有效單位 | 小於進制時顯示的原始單位 |
| transitionUnit | kg | 有效單位 | 大於等於進制時顯示的轉換單位 |
| SystemNum | 1000 | 正整數 | originUnit到transitionUnit的轉換進制 |
| count | 1 | 正整數 | 轉換之後最多保留幾位小數 |
4.filterToSeparation
| 參數 | 默認值 | 可取值 | 含義 |
|---|---|---|---|
| data | / | 字符串 | 接收的數據 |
| interval | 3 | 正整數 | 隔幾位插入symbol |
| symbol | , | 自定義分隔符 | 分隔符 |
5.filterToHide
| 參數 | 默認值 | 可取值 | 含義 |
|---|---|---|---|
| data | / | 數字、字符串 | 接收的數據 |
| start | / | 大於等於0的正整數 | 起始位置，包含 |
| end | / | 大於start且小於等於data長度的正整數 | 終止位置，不包含 |
| symbol | * | 自定義的替換字符 | 替換的字符 |
6.filterToTextTransform
| 參數 | 默認值 | 可取值 | 含義 |
|---|---|---|---|
| data | / | 中英文字符串 | 接收的數據 |
| type | AllInitialUpper | AllInitialUpper[全部首字母大寫]、AllInitialLower[全部首字母小寫]、InitialUpper[所有句子首字母大寫]、InitialLower[所有句子首字母小寫]、Upper[全部大寫]、Lower[全部小寫] | 通知過濾器轉換方式 |
三、導入及初始化
1.可以在vue中作爲過濾器使用
//安裝
npm i @nangxif/filters
//按需註冊
import Filters from "@nangxif/filters";
Vue.filter("filterToDateAndTime", Filters.filterToDateAndTime);
//一鍵註冊
import Filters from "@nangxif/filters";
Object.keys(Filters).forEach(key => {
Vue.filter(key, Filters[key]);
});
//eg:
{{ new Date() | filterToDateAndTime }}
2.在js中使用
<script src="filters.min.js"></script>
<script>
Filters.filterToSystem(99,"cm","m",100);
</script>