vue字典配置_vue字典
我写的这个标题，⼤家肯定很疑惑，不知道我说的是什么意思，我在这⾥简单给⼤家解介绍⼀下这⾥的字典，在vue⾥⾯，有很多不需要调⽤接⼝的固定下拉菜单内容，会把这个下拉菜单全部封装起来，叫做字典，再把字典放到vue原型上，在页⾯中通过调⽤，直接使⽤，这个也是我在项⽬中，项⽬经理使⽤学到的
下⾯介绍⼀下怎么使⽤操作
1，在config下⾯新建⼀个 dict.js⽂件
export default {
auditStatus: [
{ id: 0, name: '未提交' },
{ id: 1,name: '审核中' },
{ id: 3,name: '已完成' },
{ id: 2,name: '已驳回' }
],
inboundType: [
{ id: 1, name: '采购⼊库' },
{ id: 2, name: '租赁⼊库' },
{ id: 3, name: '原始⼊库' },
秦岭淮河一线是什么的分界线{ id: 4, name: '盘盈⼊库' }
],
restoreType: [
{ id: 1, name: '领⽤归还' },
{ id: 2, name: '借⽤归还' },
{ id: 3, name: '借出归还' }
],
考研英语时间安排}
2，给 vue 原型 prototype 增加字段属性 dict
在mian.js⽂件下，新建⼀个prototype.js⽂件，并且在main.js中引⼊prototype.js
新建prototype.js⽂件
import dict from '@/config/dict' //引⼊dict字典
export default function (Vue) { //把字典放到vue原型上
Vue.prototype.$dict = dict
}
main.js ⽂件
洛丽塔美国版
import bindPrototype from '@/prototype.js'
bindPrototype(Vue)
还有⼀个更简单⽅法，直接在main.js中操作
import dict from '@/config/dict' //引⼊dict字典
Vue.prototype.$dict = dict
3，新建组件
// 这⾥的组件是利⽤ ant-design 组件进⾏封装的 作为⽰例组件选择框
@change="handleChange"
@lect="handleSelect"
v-model="lected"
:filterOption="filterOption"
:
showArrow="true"
:placeholder="placeholder"
>
{{item.name}}
export default {
props: {
clearable: {
nur的音标default: true,
type: Boolean
},
data: Array,
value: null,
filterOption: {
default: fal,
type: Boolean
},
placeholder: String
},
data() {
return {
list: [],
lected: ""
};
},
mounted () { // clearable 是否需要清除即是否显⽰不限 option，默认为 true this.list = this.clearable ? [{ id: '', name: '不限' }, ...this.data] : [...this.data] this.lected = this.value
},
methods: {
handleChange(value) {},
handleSelect(value) {}
},
};
.ant-lect-lection{
border:1px solid #fff;
padding: 0 10px;
display: flex;
justify-content: space-between;
东莞美容
}
.childContent {
display: flex;
谷歌flex-direction: column;
justify-content: flex-start;
align-items: center;
margin-top: 20px;
信息工程就业前景
background: #ceb8b8;
width: 350px;
height: 150px;
}
星海音乐学院附中
compact是什么意思注：vue 怎么引⼊组件
4，在⽗组件中调⽤
v-model="archCondition.auditStatus"
:data="$dict.auditStatus"
placeholder="请选择审核状态"
>
v-model="archCondition.inboundType"
:
data="$dict.inboundType" //只需要改变绑定字典中命名即可placeholder="请选择审核状态"
>
import lectInput from "@/component/lect-input.vue"; // 引⼊export default {
components: { // 注册
lectInput
},
data() {
return {
archCondition:{},
};
},
};
图⽚展⽰：
image.png
image.png
在字典中，⼀些固定的下拉菜单，会展⽰在下拉选项中
yumei
