filters過濾器封裝

2021-10-01 20:14:07 字數 2832 閱讀 6295

// filters.js

import vue from

'vue'

//秒轉時分

vue.

filter

('timestamp '

,function

(second_time)}}

return time;})

// 時間戳轉日期(1569736900 => 2019-09-29)

vue.

filter

('timefilter'

,function

(str, type)

str =

string

(str)

.length <=

10? str *

1000

: str;

letformattime

=(a)

=>

parseint

(a)<10?

'0'+

parseint

(a):

parseint

(a);

let t =

newdate

(str)

;let year = t.

getfullyear()

;let month =

formattime

(t.getmonth()

+1);

let day =

formattime

(t.getdate()

);let hours =

formattime

(t.gethours()

);let minutes =

formattime

(t.getminutes()

);let seconds =

formattime

(t.getseconds()

);if(type ==

"ymd")-

$-$`

;}else

if(type ==

'hms'):

$:$`

;}else

if(type ==

'ms'):

$`;}

else

if(type ==

'ymdhm')-

$-$$

:$`;

}else

if(type ==

"article")月

$號 $:$`}

else

if(type ==

"order")年

$月$號`

}else-$

-$$:

$:$`

;}})

// 擷取字串,部分顯示 預設擷取前100個字元;

vue.

filter

('substr'

,function

(str, num =

100)

)/*日期轉換*/

vue.

filter

('datefilter'

,function

(str));

// 手機號隱藏('13912345678' => '139****5678'),此處str必須為字串

vue.

filter

('telhide'

,function

(str)

)\d(\d*)/

,'$1****$2')}

);// 隱藏姓名(小明=>*明 李小明=>李*明)

vue.

filter

('namehide'

,function

(name)

else})

;// 身份證號隱藏('331082199708094687' => '33108219********87')

vue.

filter

('idcardhide'

,function

(name)

)\d(\d*)/

,'$1********$2')}

);// 人氣數字轉換

vue.

filter

('digitalconversion'

,function

(str)

else})

// timeago

vue.

filter

('timeago'

,function

(time)

//30天以內,返回「多久前」

if(stamp >=

1000*60

*60*24

)else

if(stamp >=

1000*60

*60)else

if(stamp >=

1000*60

*2)else})

//數字前置補零

function

digit

(num, length)

return num < math.

pow(

10, length)

? str +

(num |0)

: num;

}// main.js引入過濾器

import

'@/common/js/filters'

;//過濾器配置

//頁面中使用:時間格式化,呼叫過濾器timefilter方法

="time"

>

} 至

}<

/div>

VUE構建全域性過濾器filters

身份證正則 6位及14位處空格 const sfzhregfilter value else else else 身份證正則 6到14位星號 const sfzhasterregfilter data else module.exports 入口檔案中匯入 且全域性註冊 例項建立前 import f...

Vue過濾器filters使用詳解

這次給大家帶來vue過濾器filters使用詳解,vue過濾器filters使用的注意事項有哪些,下面就是實戰案例,一起來看一下。示例 採用vue單檔案元件,使用moment外掛程式格式化日期 說明 過濾器內是沒有this引用的,過濾器內的this是undefined,所以不要在過濾器內嘗試使用th...

VUE中的過濾器filters用法

如果自己定義了乙個全域性的過濾器,想要在某個元件內的methods中使用這個過濾器,那麼就只能用 this options.filters your filter name 此行 執行後返回的是你的自定義過濾器函式,可以使用乙個變數接收它,然後再傳參。options 用法解釋 vue例項提供的乙個方...