Vue混入mixins分發(fā)組件可復(fù)用功能

更新時(shí)間：2022年09月26日 08:58:09 作者：聶大哥

混入 (mixin) 提供了一種非常靈活的方式，來(lái)分發(fā) Vue 組件中的可復(fù)用功能。一個(gè)混入對(duì)象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對(duì)象時(shí)，所有混入對(duì)象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)

前言

那就是說(shuō)，你可以單獨(dú)寫個(gè)邏輯文件，默認(rèn)導(dǎo)出一個(gè)對(duì)象，對(duì)象里面可以包含data、created、mounted、methods 等vue模板文件中的邏輯對(duì)象。接著可以將這個(gè)對(duì)象引入到多個(gè)vue模板中進(jìn)行功能復(fù)用，從而達(dá)到功能模塊的邏輯封裝，便于使用及后期維護(hù)。

這里我舉一些日常開(kāi)發(fā)中最常用的示例來(lái)說(shuō)，更多的是 methods 的混入。

一、后端返回?cái)?shù)據(jù)與字典數(shù)據(jù)之前的轉(zhuǎn)換

通常情況下，像狀態(tài)、類型、性質(zhì)等屬性，后端存儲(chǔ)數(shù)據(jù)通過(guò)數(shù)字來(lái)進(jìn)行存儲(chǔ)，這些數(shù)字會(huì)有數(shù)據(jù)字典與之對(duì)應(yīng)。那么在獲取后端數(shù)據(jù)時(shí)，我們前端人員拿到的數(shù)據(jù)正是這些數(shù)字以及字典數(shù)據(jù)。在多個(gè)頁(yè)面進(jìn)行展示時(shí)，難道要在每個(gè)頁(yè)面中寫一個(gè)轉(zhuǎn)換的方法嗎？當(dāng)然不是，這時(shí)候我們就可以使用混入來(lái)輕松解決這一問(wèn)題。

數(shù)據(jù)轉(zhuǎn)換的混入：

dataTrans.js

傳入一個(gè)字典列表，傳入一個(gè)數(shù)字狀態(tài)。在字典數(shù)組中進(jìn)行查找對(duì)應(yīng)的文字說(shuō)明。

export default {
    methods: {
        transDict(list, status) {
        // 這里使用 try--catch 是防止有的時(shí)候后端返回的數(shù)據(jù)中式null或空的情況，也就是說(shuō)此條數(shù)據(jù)無(wú)狀態(tài)，我們只需要在catch中返回 --- 或者 無(wú)狀態(tài) 等字眼即可
            try {
                return list.find(item => item.dictValue == status).dictLabel
            } catch (error) {
                return '---'
            }
        }
    }
}

使用：

<template>
	<div>
		<el-table>
			<!-- 方式一 -->
			<el-table-column label="狀態(tài)" prop="status" align="center" width="60" :formatter="e => transDict(status_list, e.status)" show-overflow-tooltip />
			<!-- 方式二 -->
			<el-table-column label="性質(zhì)" 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>

二、文件下載的混入

當(dāng)我們遇到文件下載的需求時(shí)，請(qǐng)求接口后端返回的數(shù)據(jù)流，前端需要再寫邏輯進(jìn)行下載。這個(gè)時(shí)候當(dāng)然也是可以通過(guò)寫一個(gè)混入方法來(lái)做通用方法。

tools.js 混入

export default {
    methods: {
    // 可傳入字節(jié)流及想要的文件名。甚至可以傳入文件后綴，進(jìn)行多種文件類型下載，這里默認(rèn)的是下載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('導(dǎo)出失敗', 'error')
            }
        }
    },
}

使用：

<script>
import tools from '@/mixins/tools';
export default {
	name: 'Index',
	mixins: [tools],
	methods: {
		exportSheet() {
			let title = ''
			this.$commonJS.showLoading('正在導(dǎo)出')
			exportInvoiceApply(id).then((res) => {
                this.$commonJS.hideLoading()
                // 直接通過(guò) this 調(diào)用 混入中的方法，傳入 字節(jié)流 及標(biāo)題
                this.filesExport(res, title)
            }).catch(() => {
                this.$commonJS.hideLoading()
            });
		}
	}
}
</script>

三、Element表格最后一行合計(jì)數(shù)據(jù)的混入

是的，這個(gè)合計(jì)當(dāng)然也可以用混入，因?yàn)樽远x的合計(jì)方法邏輯也是比較多的。

getSummaries.js 混入

export default {
    methods: {
    // params是el-table表格合計(jì)事件的默認(rèn)參數(shù)，里面包含表格中每一列的屬性和數(shù)據(jù) 
    // prop 是自定義的傳入的一個(gè)數(shù)組，意思是需要計(jì)算哪個(gè)屬性的合計(jì)
    // title 是合計(jì)列 第一格的文字描述
        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="型號(hào)" 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="數(shù)量" 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="單價(jià)（含稅）" 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 屬性，需要對(duì)哪個(gè)屬性進(jìn)行合計(jì) 就寫進(jìn)數(shù)組里即可。
            return this.getSummariesMixins(params, ['number', 'amount'], '合計(jì)')
        }
	}
}
</script>

除以上三種用法之外，還有很多其它用法，例如審批功能的實(shí)現(xiàn)，還需要在混入中寫入 data 函數(shù)，來(lái)保存需要審批項(xiàng)的id和類型等字段。

好多種用法在混入中可以靈活使用，需要學(xué)會(huì)變通。

到此這篇關(guān)于Vue混入mixins分發(fā)組件可復(fù)用功能的文章就介紹到這了,更多相關(guān)Vue混入mixins內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: