Vue混入mixins分发组件可复用功能
作者：聂大哥
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项
前言
那就是说，你可以单独写个逻辑文件，默认导出一个对象，对象里面可以包含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"
style="margin-top: 20px"
>
<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" style="color: #F56C6C;">删除</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和类型等字段。
好多种用法在混入中可以灵活使用，需要学会变通。
到此这篇关于Vue混入mixins分发组件可复用功能的文章就介绍到这了,更多相关Vue混入mixins内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！