總結(jié)vue映射的方法與混入的使用過程
vue映射方法與混入使用
v-select中的內(nèi)容封裝
場景:當在不同的組件中共同使用一些select的"內(nèi)容"就可以將這些內(nèi)容封裝在一個文件里
1.cig2.0/src/contants.js
export const data = { whether: [ //是/否 { value: 1, label: "是" }, { value: 0, label: "否" } ], hour: [ { value: "0", label: "0" }, { value: "1", label: "1" }, { value: "2", label: "2" }, { value: "3", label: "3" }, { value: "4", label: "4" }, { value: "5", label: "5" }, { value: "6", label: "6" }, { value: "7", label: "7" }, { value: "8", label: "8" }, { value: "9", label: "9" }, { value: "10", label: "10" }, { value: "11", label: "11" }, { value: "12", label: "12" }, { value: "13", label: "13" }, { value: "14", label: "14" }, { value: "15", label: "15" }, { value: "16", label: "16" }, { value: "17", label: "17" }, { value: "18", label: "18" }, { value: "19", label: "19" }, { value: "20", label: "20" }, { value: "21", label: "21" }, { value: "22", label: "22" }, { value: "23", label: "23" } ], //分鐘 minute: [ { value: "0", label: "0" }, { value: "30", label: "30" } ], }; export function getValues(key) { //debugger return JSON.parse(JSON.stringify(data[key] || [])); }
2.在需要使用select的組件里引入【混入】
在混入文件里返回封裝的select的內(nèi)容應用到組件中使用select的地方
引入混入:
import MixSearch from “@/mixins/mix-search.js”; let mixSearch = MixSearch(); //因為在mix-search.js文件里 export default 是一個function() mixins: [mixSearch]
import {getValues} from "@/contants.js" let cache = {} function saveCache(key, value) { if (!key) return; if (value) { cache[key] = JSON.stringify(value) } else { if (!cache[key]) return return JSON.parse(cache[key]) } } export default function (ext) { ext = ext || {} let mixin = { data() { return { fullscreenLoading: false, pageBean: { pageSize: 10, page: 1, showTotal: true }, searchModel: JSON.parse(JSON.stringify(ext)) } }, methods: { async payload(fn, fail) { try { this.fullscreenLoading = true; await fn() } catch (e) { console.error(e) } this.fullscreenLoading = false; }, getKeyValues(key, opt) { return getValues(key, opt) }, // 映射字段 getSelectLabel(type, id) { for (let i = 0; i < type.length; i++) { if (type[i].value == id) { return type[i].label } } } }, created() { let {pageBean, searchModel} = saveCache(this.$options.name) || {} if (pageBean) { this.pageBean = pageBean; this.searchModel = searchModel; } }, beforeDestroy() { saveCache(this.$options.name, {pageBean: this.pageBean, searchModel: this.searchModel}) } } return mixin }
<div style="display: flex;justify-content: left"> <el-form-item label="更新時間期限:" class="dataTimeBox"> <el-select placeholder="請選擇" v-model="day.hour" > <el-option v-for="(item,index) in getKeyValues('hour')" :key="index" :label="item.label" :value="item.value" ></el-option> </el-select> <span> 時 </span> <el-select placeholder="請選擇" v-model="day.minute" > <el-option v-for="(item,index) in getKeyValues('minute')" :key="index" :label="item.label" :value="item.value" ></el-option> </el-select> <span> 分</span> </el-form-item> </div>
vue混入的簡單用法
vue的官方文檔:混入 (mixin) 提供了一種非常靈活的方式,來分發(fā) Vue 組件中的可復用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時,所有混入對象的選項將被“混合”進入該組件本身的選項。
簡單的理解就是它可以制作一個可以復用的功能,可以復用到各個組件中,同時這個mixin功能可以使用vue組件里任意組件選項,比如data,method,watch,和各個生命周期函數(shù)。當需要運用的組件,引用它時,相當于把mixin的各個組件選項合并到引用的組件中。
自定義混入
1.定義一個mixin文件,寫入需要被復用的功能;
2.在需要使用混入功能的文件中引入;
注:混入中可以放一個類或多個類,也可以只放方法和功能,根據(jù)面向?qū)ο髥我宦氊熢瓌t和開閉原則,排除掉放多個類,若是只放方法和功能,混入就失去類意義。
最后的總結(jié)是:混入里最好放一個類或者是多個類組合或聚合成的一個類。
3. 組件內(nèi)可以修改混入中的數(shù)據(jù),混入文件中也可以直接修改對應組件中的數(shù)據(jù);
全局混入
定義一個全局的mixin文件
在項目main.js文件中引入定義的mixins文件
然后在項目中所有文件都可以直接使用混入中定義的方法
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue?element實現(xiàn)權(quán)限管理業(yè)務流程詳解
目前本人再使用vue-element-admin項目時都是通過直接刪除一些用不上的路由來進行側(cè)邊欄的清除,但是其實有一個更加好的辦法來對項目的側(cè)邊欄顯示的內(nèi)用進行管理,就是權(quán)限管理,其實也不知道這個方法好不好,原理上來說時跟直接刪除該路由的方式時一樣的2022-08-08Vue使用distpicker插件實現(xiàn)省市級下拉框三級聯(lián)動
這篇文章主要介紹了Vue使用distpicker插件實現(xiàn)省市級下拉框三級聯(lián)動,比如通過JSON文件生成對應的區(qū)域下拉框,element-china-are插件,包括distpicker插件,通過代碼講解如何使用distpicker插件實現(xiàn)省市級三聯(lián)跳動,需要的朋友可以參考下2023-02-02element-plus一個vue3.xUI框架(element-ui的3.x 版初體驗)
這篇文章主要介紹了element-plus一個vue3.xUI框架(element-ui的3.x 版初體驗),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-12-12vscode 配置vue+vetur+eslint+prettier自動格式化功能
這篇文章主要介紹了vscode 配置vue+vetur+eslint+prettier自動格式化功能,本文通過實例代碼圖文的形式給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03vue.js實現(xiàn)的經(jīng)典計算器/科學計算器功能示例
這篇文章主要介紹了vue.js實現(xiàn)的經(jīng)典計算器/科學計算器功能,具有基本四則運算計算器以及科學計算器的功能,可實現(xiàn)開方、乘方、三角函數(shù)以及公式運算等功能,需要的朋友可以參考下2018-07-07Vue表單綁定的實例代碼(單選按鈕,選擇框(單選時,多選時,用 v-for 渲染的動態(tài)選項)
本文通過實例代碼給大家介紹了Vue表單綁定(單選按鈕,選擇框(單選時,多選時,用 v-for 渲染的動態(tài)選項)的相關(guān)知識,非常不錯,具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05vuedraggable拖拽到目標區(qū)域?qū)崿F(xiàn)過程解析
這篇文章主要為大家介紹了vuedraggable拖拽到目標區(qū)域?qū)崿F(xiàn)過程解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-06-06Vue處理循環(huán)數(shù)據(jù)流程示例精講
這篇文章主要介紹了Vue處理循環(huán)數(shù)據(jù)流程,這個又是一個編程語言,?模版語法里面必不可少的一個,?也是使用業(yè)務場景使用最多的一個環(huán)節(jié)。所以學會使用循環(huán)也是重中之重了2023-04-04