Vue混入mixins分发组件可复用功能
目录
前言
那就是说，你可以单独写个逻辑文件，默认导出一个对象，对象里面可以包含data、created、mounted、methods 等vue模板文件中的逻辑对象。接着可以将这个对象引入到多个vue模板中进行功能复用，从而达到功能模块的逻辑封装，便于使用及后期维护。
这里我举一些日常开发中最常用的示例来说，更多的是 methods 的混入。
一、后端返回数据与字典数据之前的转换
通常情况下，像状态、类型、性质等属性，后端存储数据通过数字来进行存储，这些数字会有数据字典与之对应。那么在获取后端数据时，我们前端人员拿到的数据正是这些数字以及字典数据。在多个页面进行展示时，难道要在每个页面中写一个转换的方法吗？当然不是，这时候我们就可以使用混入来轻松解决这一问题。
数据转换的混入：
dataTrans.js
传入一个字典列表，传入一个数字状态。在字典数组中进行查找对应的文字说明。
export default {
methods: {
transDict(list, status) {
// 这里使用 try--catch 是防止有的时候后端返回的数据中式null或空的情况，也就是说此条数据无状态，我们只需要在catch中返回 --- 或者 无状态 等字眼即可
try {
return list.find(item => item.dictValue == status).dictLabel
} catch (error) {
return '---'
}
}
}
}
使用：
<template>
<div>
<el-table>
<!-- 方式一 -->
<el-table-column label="状态" prop="status" align="center" width="60" :formatter="e => transDict(status_list, e.status)" show-overflow-tooltip />
<!-- 方式二 -->
<el-table-column label="性质" prop="customerType">
<template slot-scope="{ row }">{{ transDict(nature, row.customerType) }}</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import dataTrans from '@/mixins/dataTrans';
export default {
name: 'Index',
mixins: [dataTrans],
computed: {
...mapGetters(['status_list', 'nature'])
}
}
</script>二、文件下载的混入
当我们遇到文件下载的需求时，请求接口后端返回的数据流，前端需要再写逻辑进行下载。这个时候当然也是可以通过写一个混入方法来做通用方法。
tools.js 混入
export default {
methods: {
// 可传入字节流及想要的文件名。甚至可以传入文件后缀，进行多种文件类型下载，这里默认的是下载Excel表格
filesExport(res, title) {
if(res != null) {
res.download = `${title}.xlsx`
let url = window.URL.createObjectURL(new Blob([res]))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.download = `${title}.xlsx`
link.type = 'xls'
document.body.appendChild(link)
link.click()
}else {
// 自定义的弹窗提示
this.$commonJS.openNotify('导出失败', 'error')
}
}
},
}
使用：
<script>
import tools from '@/mixins/tools';
export default {
name: 'Index',
mixins: [tools],
methods: {
exportSheet() {
let title = ''
this.$commonJS.showLoading('正在导出')
exportInvoiceApply(id).then((res) => {
this.$commonJS.hideLoading()
// 直接通过 this 调用 混入中的方法，传入 字节流 及标题
this.filesExport(res, title)
}).catch(() => {
this.$commonJS.hideLoading()
});
}
}
}
</script>
三、Element表格最后一行合计数据的混入
是的，这个合计当然也可以用混入，因为自定义的合计方法逻辑也是比较多的。
getSummaries.js 混入
export default {
methods: {
// params是el-table表格合计事件的默认参数，里面包含表格中每一列的属性和数据
// prop 是自定义的传入的一个数组，意思是需要计算哪个属性的合计
// title 是合计列 第一格的文字描述
getSummariesMixins(params,prop,title) {
const { columns, data } = params
const sums = []
columns.forEach((column, index) => {
if(index === 0) {
sums[index] = title
return;
}
if(prop.includes(column.property)) {
const values = data.map(item => Number(item[column.property]));
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] += '';
} else {
sums[index] = 'N/A';
}
}
})
return sums;
}
}
}
使用：
<template>
<div>
<el-table
:data="dataList"
border
show-summary
:summary-method="getSummaries"
>
<el-table-column type="index" width="55"/>
<el-table-column label="名称" prop="goodsName" show-overflow-tooltip/>
<el-table-column label="型号" prop="goodsModel" show-overflow-tooltip/>
<el-table-column label="单位" prop="unit" show-overflow-tooltip>
<template slot-scope="{row}">{{ row.unit || row.goodsUnit }}</template>
</el-table-column>
<el-table-column label="数量" prop="number" show-overflow-tooltip>
<template slot-scope="{row, $index}">
<el-input v-model="row.number" @input="changeNumber($event, $index)" size="mini" type="number"/>
</template>
</el-table-column>
<el-table-column label="单价（含税）" prop="unitPrice" show-overflow-tooltip/>
<el-table-column label="金额（含税）" prop="amount" show-overflow-tooltip />
<el-table-column label="操作" align="center" fixed="right" width="100">
<template slot-scope="scope">
<el-button @click="deleteItems(scope)" type="text" >删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import getSummaries from '@/mixins/getSummaries';
export default {
name: 'Index',
mixins: [getSummaries],
methods: {
getSummaries(params) {
// ['number', 'amount'] 是表格中的 prop 属性，需要对哪个属性进行合计 就写进数组里即可。
return this.getSummariesMixins(params, ['number', 'amount'], '合计')
}
}
}
</script>除以上三种用法之外，还有很多其它用法，例如 审批功能 的实现，还需要在混入中写入 data 函数，来保存需要审批项的id和类型等字段。
好多种用法在混入中可以灵活使用，需要学会变通。
原文地址：https://blog.csdn.net/weixin_43729943/article/details/127023823
