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

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

混入 (mixin) 提供了一種非常靈活的方式，來分發(fā) Vue 組件中的可復用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項

前言

那就是說，你可以單獨寫個邏輯文件，默認導出一個對象，對象里面可以包含data、created、mounted、methods 等vue模板文件中的邏輯對象。接著可以將這個對象引入到多個vue模板中進行功能復用，從而達到功能模塊的邏輯封裝，便于使用及后期維護。

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

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

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

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

dataTrans.js

傳入一個字典列表，傳入一個數(shù)字狀態(tài)。在字典數(shù)組中進行查找對應的文字說明。

export default {
    methods: {
        transDict(list, status) {
        // 這里使用 try--catch 是防止有的時候后端返回的數(shù)據(jù)中式null或空的情況，也就是說此條數(shù)據(jù)無狀態(tài)，我們只需要在catch中返回 --- 或者 無狀態(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>

二、文件下載的混入

當我們遇到文件下載的需求時，請求接口后端返回的數(shù)據(jù)流，前端需要再寫邏輯進行下載。這個時候當然也是可以通過寫一個混入方法來做通用方法。

tools.js 混入

export default {
    methods: {
    // 可傳入字節(jié)流及想要的文件名。甚至可以傳入文件后綴，進行多種文件類型下載，這里默認的是下載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 調(diào)用 混入中的方法，傳入 字節(jié)流 及標題
                this.filesExport(res, title)
            }).catch(() => {
                this.$commonJS.hideLoading()
            });
		}
	}
}
</script>

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

是的，這個合計當然也可以用混入，因為自定義的合計方法邏輯也是比較多的。

getSummaries.js 混入

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

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

好多種用法在混入中可以靈活使用，需要學會變通。

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

您可能感興趣的文章: