v-select中的内容封装
场景:当在不同的组件中共同使用一些select的"内容"就可以将这些内容封装在一个文件里
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的内容应用到组件中使用select的地方
引入混入:
(1)import MixSearch from “@/mixins/mix-search.js”;
(2)let mixSearch = MixSearch(); //因为在mix-search.js文件里 export default 是一个function()
(3) 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>