ue-element-admin封装字典

在使用 `vue-element-admin` 框架时，可以通过 `vue-i18n` 插件来实现国际化，同时也可以将字典数据封装成组件，方便在不同页面和组件中复用。

以下是实现字典数据封装的一般步骤：

1. 在 `src/lang` 目录下创建字典文件，例如 `zh.js` 和 `en.js`，并在文件中定义字典数据：

   // zh.js
   export default {
     dict: {
       yes: '是',
       no: '否'
     }
   }
   
   // en.js
   export default {
     dict: {
       yes: 'Yes',
       no: 'No'
     }
   }

2. 在 `src/lang/index.js` 文件中引入字典文件，并将字典数据注入到 `vue-i18n` 插件中：

   import Vue from 'vue'
   import VueI18n from 'vue-i18n'
   import zh from './zh'
   import en from './en'
   
   Vue.use(VueI18n)
   
   const messages = {
     zh: {
       ...zh
     },
     en: {
       ...en
     }
   }
   
   const i18n = new VueI18n({
     locale: 'zh',
     messages
   })
   
   export default i18n

3. 创建字典组件 `Dict`，并在组件中使用 `vue-i18n` 插件来获取字典数据：

   <template>
     <span>{{ dict[label] }}</span>
   </template>
   
   <script>
   export default {
     name: 'Dict',
     props: {
       label: {
         type: String,
         required: true
       }
     },
     computed: {
       dict() {
         return this.$i18n.messages[this.$i18n.locale].dict
       }
     }
   }
   </script>

4. 在需要使用字典的页面或组件中，使用 `Dict` 组件并传入需要翻译的标签：

   <template>
     <div>
       <p>{{ $t('dict.yes') }}</p>
       <p>{{ $t('dict.no') }}</p>
       <Dict label="yes" />
       <Dict label="no" />
     </div>
   </template>
   
   <script>
   import Dict from '@/components/Dict'
   
   export default {
     name: 'Example',
     components: {
       Dict
     }
   }
   </script>

这样，就可以在页面或组件中通过 `Dict` 组件来获取字典数据，实现字典数据的封装和复用。