項(xiàng)目中我們總有不少公共方法要提取窗看,在Vue中具體大致可采用三種形式來(lái)實(shí)現(xiàn)。
一绿聘、過(guò)濾器
通常直接在實(shí)例模版中使用爬凑,用于處理數(shù)據(jù)格式。
注??:我在webpack中配置過(guò)路徑別名冒黑,以下代碼中的 @ 都是src文件夾的別名
- 把處理格式的函數(shù)都寫(xiě)在src/filters/index.js里田绑,每個(gè)方法都單獨(dú)export。過(guò)濾器函數(shù)都必須有返回值
// src/filters/index.js
/**
* 把時(shí)間處理成所需格式的字符串
* @param {(Object|string|number)} time
* @param {string} cFormat
* @returns {string | null}
*/
export function parseTime(time, cFormat) {
if(!time) {
return ''
}
if (arguments.length === 0) {
return null
}
const format = cFormat || '{y}-{m}-rcuqyxs {h}:{i}:{s}'
let date
if (typeof time === 'object') {
date = time
} else {
if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
time = parseInt(time)
}
if (typeof time === 'number' && time.toString().length === 10) {
time = time * 1000
}
date = new Date(time)
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
}
const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
const value = formatObj[key]
// Note: getDay() returns 0 on Sunday
if (key === 'a') {
return ['日', '一', '二', '三', '四', '五', '六'][value]
}
return value.toString().padStart(2, '0')
})
return time_str
}
/** 截取字?jǐn)?shù)長(zhǎng)度, 常用
* @param {string} text
* @param {number} length
*/
export function textFilter(text, length){
let shortText = text
const len = length ? length : 20
if (text && text.length > len) {
shortText = text.substring(0, len) + '...'
}
return shortText
}
- 在 src/main.js 注冊(cè)過(guò)濾器
import * as filters from './filters'
// 注冊(cè)全局公共過(guò)濾器
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
- 在實(shí)例模版中使用
<template>
<div class="app-container">
<el-table-column label="發(fā)布日期" align="center" sortable="custom" prop="created_time">
<template slot-scope="scope">
{{ scope.row.created_time | parseTime('{y}-{m}-ghw4xn5') }}
</template>
</el-table-column>
<el-table-column label="詳情" align="center">
<template slot-scope="scope">
{{ scope.row.detail | textFilter(10) }}
</template>
</el-table-column>
</div>
</template>
二抡爹、在實(shí)例 import 公共方法
- 在 src/utils/index.js 單獨(dú)導(dǎo)出這些具名函數(shù)
/**
* 把標(biāo)準(zhǔn)時(shí)間轉(zhuǎn)換成時(shí)間戳
* 傳入標(biāo)準(zhǔn)時(shí)間
*/
export function timestamp(date) {
let myDate = date ? new Date(date) : new Date()
return Date.parse(myDate) / 1000
}
/**
* 時(shí)間戳轉(zhuǎn)換成把標(biāo)準(zhǔn)時(shí)間
* 傳入時(shí)間戳
*/
export function standardTime(timestamp) {
let time = timestamp.toString() + '000'
return new Date(parseInt(time))
}
- 在實(shí)例中導(dǎo)入需要的方法并使用
import { timestamp, standardTime } from '@/utils'
export default {
filters: {
statusFilter(time) { // 在局部過(guò)濾器中使用
let status = time > timestamp() ? 'success' : 'info'
return status
}
},
computed: {
nowTime() { // 在計(jì)算屬性中使用
return timestamp()
}
},
methods: {
handleEdit(id) { // 在實(shí)例方法中使用
...
this.newTrade.validTime = standardTime(this.newTrade.validTime)
},
}
}
三掩驱、全局方法
像二那樣每次要使用都要在實(shí)例里面import
一遍,如果是使用率比較高的方法冬竟,我們還是掛載到全局比較方便欧穴。比如經(jīng)常要用到的刪除和批量刪除數(shù)據(jù)。
在src/utils/common.js里導(dǎo)出這些公共方法
// src/utils/common.js
import {
Message,
MessageBox,
} from 'element-ui'
/**
* 刪除數(shù)據(jù)
* @id {(string)} 多個(gè)id用 , 分隔
* @deleteFun {Function} 刪除數(shù)據(jù)調(diào)用的Api方法
* @callback {Function} 刪除成功的回調(diào)
* @returns {null}
*/
export const deleteById = (id, deleteFun, callback) => {
MessageBox.confirm('是否要永久刪除該信息', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warn'
})
.then(() => {
deleteFun(id).then(res => {
Message({ type: 'success', message: res.message })
callback()
})
})
.catch(() => {
Message({ type: 'info', message: '已取消刪除' })
})
}
/**
* 批量刪除數(shù)據(jù)
* ...
*/
export const multipleDelete = (multiData, deleteFun, callback) => {
...
}
/**
* el-table列數(shù)據(jù)篩選
* 可直接在組件模版調(diào)用
*/
export const filterChange = (filters, target) => {
Object.assign(target.queryInfo, filters)
target.fetchData('new')
}
/**
* el-table列數(shù)據(jù)排序
* 可直接在組件模版調(diào)用
*/
export const sortChange = (sortInfo, target) => {
let order = sortInfo.order
order === 'ascending' ? (order = 1) : (order = -1)
target.queryInfo.sortJson = {}
target.queryInfo.sortJson[sortInfo.prop] = order
target.queryInfo.sort = JSON.stringify(target.queryInfo.sortJson)
target.fetchData('new')
}
在 main.js 整體導(dǎo)入包含所有方法(變量)的模塊(這里我們給它定義了 commonApi 的別名)泵殴,然后掛載在 Vue.prototype上
// src/main.js
import * as commonApi from '@/utils/common'
Vue.prototype.commonApi = commonApi
在實(shí)例里方法里調(diào)用
import { deleteFossil } from '@/api/fossil'
methods: {
fetchData(param) { ... },
handleDelete(id) {
this.commonApi.deleteById(id, deleteFossil, this.fetchData)
},
}
如果該全局方法涮帘,沒(méi)有像上述deleteById
一樣有引用非實(shí)例方法的參數(shù)(deleteFossil
是外部導(dǎo)入的請(qǐng)求方法),也可以直接在template里調(diào)用笑诅,如下:
因?yàn)槟0嬷兄苯诱{(diào)用的方法调缨,vue會(huì)自動(dòng)給我們加上this
<template>
<div class="app-container">
<el-table
v-loading="listLoading"
:data="list"
element-loading-text="Loading"
border
fit
highlight-current-row
:empty-text="emptyText"
@selection-change="handleSelectionChange"
@filter-change="filters => commonApi.filterChange(filters, this)"
@sort-change="sortInfo => commonApi.sortChange(sortInfo, this)"
>
...
</el-table>
</div>
</template>