举杯邀月

vue中利用过滤器(filter)和 prototype 定义几个实用的方法,方便在模板中使用

摘要:在vue中定义几个常用且实用的方法,利用filter过滤器及moment包定义时间转格式、时间戳转时间格式的方法;状态的统一管理方法等

创建及引入

1、创建状态管理的文件,内容如下:

export default {
    article: {
        1: { label: '发布', color: '#409EFF' },
        2: { label: '回收站', color: '#F56C6C' },
    },
}
1
2
3
4
5
6
1
2
3
4
5
6

2、首先新建 filter 文件,内容如下:

import Vue from 'vue'
import moment from 'moment'
import status from '@/config/status'

/** 时间格式化 */
Vue.filter('time', (dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') => {
    return moment.unix(dataStr).format(pattern)
})

/** 时间更改格式 */
Vue.filter('time', (dataStr, format='YYYY', toFormat='YYYY') => {
    return moment(time, format).format(toFormat);
})

/** 状态格式化 */
Vue.prototype.status_format = function (value, model) {
    let result = status[model][value] || false
    return result ? (result instanceof Object ? `${result.color}">${result.label}` : result) : value
}

/** 获取状态列表 */
Vue.prototype.status_select = function (model, isAll = '全部') {
    let result = isAll ? [{text: isAll, value: ''}] : []
    if (model in status) {
        for (let key in status[model]) {
            if (Object.prototype.hasOwnProperty.call(status[model], key)) {
                let res = (status[model][key] instanceof Object) ? status[model][key].label : status[model][key]
                result.push({text: res, value: Number(key)})
            }
        }
    }
    return result
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

3.在 main.js 中 import './filter' 引入这个文件

使用

时间格式

使用,通过管道符直接使用

{{ 1602947460 | time }}                 // 2020-10-17 23:11:00
{{ 1602947460 | time('YYYY-MM-DD') }}   // 2020-10-17
1
2
1
2

状态的管理

1、将状态转为可读数据:

<span v-html="status_format(1, 'article')">span>
1
1

结果为:

<span><i style="font-style:normal;color: #409EFF">发布i>span>
1
1

2、将状态读取,在下拉框或者单选、复选框中使用

export default {
    data() {
        return {
            status: []
        },
    }
    created() {
        this.status= this.status_select('article', '全部状态')
        console.log(this.status)
        // [
        //    {text: '全部状态', value: ''},
        //    {text: '发布', value: 1},
        //    {text: '回收站', value: 2},
        // ]
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

作者:举杯邀月

出处: http://www.hug-code.cn/archives/5fdb13e967fa4.html

2020-10-17 标签: vue