我写的这个标题，大家肯定很疑惑，不知道我说的是什么意思，我在这里简单给大家解介绍一下这里的字典， 在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 组件进行封装的 作为示例
<template>
  <div class="childContent">
    <div style="padding:10px 0;">组件选择框</div>
    <a-select
      @change="handleChange"
      @select="handleSelect"
      v-model="selected"
      :filterOption="filterOption"
      :showArrow="true"
      :placeholder="placeholder"
      style="width:250px"
      <a-select-option v-for="(item,index) in list" :key="index" :value="item.id">{{item.name}}</a-select-option>
    </a-select>
</template>
<script>
export default {
  props: {
    clearable: {
      default: true,
      type: Boolean
    data: Array,
    value: null,
    filterOption: {
      default: false,
      type: Boolean
    placeholder: String
  data() {
    return {
      list: [],
      selected: ""
  mounted () { // clearable 是否需要清除即是否显示不限 option，默认为 true
    this.list = this.clearable ? [{ id: '', name: '不限' }, ...this.data] : [...this.data]
    this.selected = this.value
  methods: {
    handleChange(value) {},
    handleSelect(value) {}
</script>
<style>
.ant-select-selection{
  border:1px solid #fff;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
</style>
<style  scoped>
.childContent {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: 20px;
  background: #ceb8b8;
  width: 350px;
  height: 150px;
</style>
注：vue 怎么引入组件
4，在父组件中调用
<template>
  <div class="content">
    <select-input // 调用
        v-model="searchCondition.auditStatus"
        :data="$dict.auditStatus"
        placeholder="请选择审核状态"
      ></select-input>
      <select-input
        v-model="searchCondition.inboundType"
        :data="$dict.inboundType" //只需要改变绑定字典中命名即可
        placeholder="请选择审核状态"
      ></select-input>
</template>
<script>
import selectInput from "@/component/select-input.vue"; // 引入
export default {
  components: { // 注册
    selectInput
  data() {
    return {
      searchCondition:{},
</script>
图片展示：