发布时间:2023-10-16 13:00
最近在学习若依系统的框架,其中发现一个很奇怪的事情,网上查询很多地方,也是一知半解。
网上搜索的结果如下,大家可以先看看:
简单的说就是:
将字典做成了插件,添加到了Vue全局中,然后使用混入技术mixin,将dict的内容混入其中,然后每一个组件就都可以使用,但是我们发现并没有定义dict,很多人会觉得很奇怪。
<el-select v-model="form.sex" placeholder="请选择性别"> <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select>
这里就是,使用的dict好像没有定义啊???
但是我们发现,有这样的东西。
export default { name: "User", // 使用字典属性 dicts: ['sys_normal_disable', 'sys_user_sex'], components: { Treeselect }, }
是不是很迷糊?下面我们取dict的源码中去找找看?
-------------------------------以下是源码,已经有注释了,大家可以自己看-----------------
将dict相关的属性封装成组件,然后使用插件的形式放入Vue,通过Vue实现全局混入,这样在任何地方就可以使用dict属性使用字典
第一步:字典插件初始化
// 字典数据组件----------->main.js import DictData from '@/components/DictData' // 字典组件挂载到Vue上当做插件使用 DictData.install()
第二步:字典组件定义
注意,这里vue.use方法的第二个参数是option参数表,这个值是可选项,使用use函数的时候,将会作为参数传递进来,可以搜索use源码:const args = toArray(arguments, 1),这里将参数在赋给字典插件
import Vue from 'vue' import DataDict from '@/utils/dict' import {getDicts as getDicts} from '@/api/system/dict/data' // 这是查询字典的方法 function install() { // 使用vue挂载DataDict插件,这里插件做成了函数形式,不需要install方法,直接use即可 Vue.use(DataDict, { metas: { '*': { labelField: 'dictLabel', valueField: 'dictValue', request(dictMeta) { return getDicts(dictMeta.type).then(res => res.data) }, }, }, }) } export default { install, }
第三步:自定义字典函数
这里主要是将自定义内容挂载到vue实例当中去,充分使用mixin技术实现
export default function(Vue, options) { // 1. 用插件参数替换默认配置参数 mergeOptions(options) // Vue全局混入dict属性 Vue.mixin({ data() { // 注意这里this.$options表示vue实例中data以外定义的属性,所以用户需要使用的时候,只需要在实例中加dicts属性列表即可 if (this.$options === undefined || this.$options.dicts === undefined || this.$options.dicts === null) { return {} } // 这里将结果返回给了dict对象,所以使用dict对象可以实现数据使用 const dict = new Dict() dict.owner = this return { dict } }, created() {
// 如果当前组件没有定义属性列表dicts,那么就没有混入dict属性,this.dict就不存在,直接返回,不调用dict.init() if (!(this.dict instanceof Dict)) { return } options.onCreated && options.onCreated(this.dict) // dict的初始化,这里的$options.dicts是当前组件的dicts属性,包含用户自定义属性值列表type // init函数执行完毕,那么所欲的dict数据均加载完毕 this.dict.init(this.$options.dicts).then(() => { // 如果初始化组件的时候,参数中定义onReady函数,那么此时就会调用 options.onReady && options.onReady(this.dict) this.$nextTick(() => { // 触发dictReady事件 this.$emit('dictReady', this.dict) // 调用组件实例中的methods属性,如果其中的onDictReady存在,那么就执行他,并把dict作为参数传递进去,并执行 if (this.$options.methods && this.$options.methods.onDictReady instanceof Function) { this.$options.methods.onDictReady.call(this, this.dict) } }) }) }, })}
首先,看看mergeOptions(options)函数干了什么
export const options = { metas: { '*': { /** * 字典请求,方法签名为function(dictMeta: DictMeta): Promise */ request: (dictMeta) => { console.log(`load dict ${dictMeta.type}`) return Promise.resolve([]) }, /** * 字典响应数据转换器,方法签名为function(response: Object, dictMeta: DictMeta): DictData */ responseConverter, labelField: 'label', valueField: 'value', }, }, /** * 默认标签字段 */ DEFAULT_LABEL_FIELDS: ['label', 'name', 'title'], /** * 默认值字段 */ DEFAULT_VALUE_FIELDS: ['value', 'id', 'uid', 'key'], } export function mergeOptions(src) { // 以递归的形式用src中属性值去替换options中同位置的值,没有的话就使用默认options mergeRecursive(options, src) } // 数据合并 export function mergeRecursive(source, target) { for (var p in target) { try { if (target[p].constructor == Object) { source[p] = mergeRecursive(source[p], target[p]); } else { source[p] = target[p]; } } catch (e) { source[p] = target[p]; } } return source; }
以上我们可以得出结论,mergeOptions就是将src和options合并,然后返回,其中src有得都会对应给options,src中没有的则默认使用options中的属性,结果如下:
// 1.内置的options参数 export const options = { metas: { '*': { request: (dictMeta) => { console.log(`load dict ${dictMeta.type}`) return Promise.resolve([]) }, responseConverter, labelField: 'label', valueField: 'value', }, }, DEFAULT_LABEL_FIELDS: ['label', 'name', 'title'], DEFAULT_VALUE_FIELDS: ['value', 'id', 'uid', 'key'], } // 2. 用户自定义插件时传入的参数 src = { metas: { '*': { labelField: 'dictLabel', valueField: 'dictValue', request(dictMeta) { return getDicts(dictMeta.type).then(res => res.data) }, }, }, } // 3.合并之后的结果 { metas: { '*': { request(dictMeta) { return getDicts(dictMeta.type).then(res => res.data) }, responseConverter, labelField: 'dictLabel', valueField: 'dictValue', }, }, DEFAULT_LABEL_FIELDS: ['label', 'name', 'title'], DEFAULT_VALUE_FIELDS: ['value', 'id', 'uid', 'key'], }
其中responseConverter是自定义转换函数,如下:
function responseConverter(response, dictMeta) { const dicts = response.content instanceof Array ? response.content : response if (dicts === undefined) { console.warn(`no dict data of "${dictMeta.type}" found in the response`) return [] } return dicts.map(d => dictConverter(d, dictMeta)) } export default function(dict, dictMeta) { const label = determineDictField(dict, dictMeta.labelField, ...DictOptions.DEFAULT_LABEL_FIELDS) const value = determineDictField(dict, dictMeta.valueField, ...DictOptions.DEFAULT_VALUE_FIELDS) return new DictData(dict[label], dict[value], dict) } /** * 确定字典字段 * @param {DictData} dict * @param {...String} fields */ function determineDictField(dict, ...fields) { return fields.find(f => Object.prototype.hasOwnProperty.call(dict, f)) }
//=============第一次学着写博文,希望大家多鼓励=====================//