Vue3组件（14）控件属性的设置方式-阿里云开发者社区

一番整理之后，属性方面更简洁了一些，而且也方便了一些，另外也不是太乱了。

集中定义属性

每个控件都需要设置一些属性，那么还是统一管理一下的好，于是设置了一个js文件来统一管理。

/**
 * 表单子控件需要的属性。
 * * 共用属性部分，基本上每个控件都需要。
 */
export const baseFormProps = {
  controlId: { // 101 控件ID，必填
    type: Number,
    required: true
  },
  colName: String, // 102 字段名称，必填，避免自动绑定
  isClear: Boolean, // 103 连续添加是否清空，必填，避免自动绑定
  controlType: Number, // 104 控件类型编号，必填，识别表单子控件的类型
  size: { // 109 medium / small / mini 三选一，不必填
    type: String,
    default: 'mini',
    validator: (value) => {
      // 这个值必须匹配下列字符串中的一个
      return ['medium', 'small', 'mini'].indexOf(value) !== -1
    }
  },
  optionList: { // 备用选项
    type: Array,
    default: []
  },
  validate_event: { // 统一设置，不必填，输入时是否触发表单的校验
    type: Boolean,
    default: true
  }
}
/**
 * 多行文本的属性
 */
export const areaProps = {
  show_word_limit: { // 统一设置，不必填，是否显示输入字数统计 text和area有效
    type: Boolean,
    default: true
  },
  rows: { //
    type: Number,
    default: 3
  }
}
/**
 * el-text 单行文本用的属性
 */
export const textProps = {
  show_word_limit: { // 统一设置，不必填，是否显示输入字数统计 text和area有效
    type: Boolean,
    default: true
  },
  clearable: { // 统一设置，不必填，是否显示清空标记
    type: Boolean,
    default: true
  },
  resize: String // 统一设置，不必填， none, both, horizontal, vertical
}
/**
 * 密码的属性
 */
export const passwordProps = {
  show_password: { // 统一设置，不必填，是否显示切换密码图标
    type: Boolean,
    default: true
  }
}
/**
 * 数字的属性
 */
export const numberProps = {
  controls_position: { // 统一设置，不必填，+-号的位置
    type: String,
    default: 'right'
  }
}
/**
 * 滑块的属性
 */
export const sliderProps = {
  input_size: { // 统一设置，不必填，是否显示切换密码图标
    type: String,
    default: 'mini',
    validator: (value) => {
      // 这个值必须匹配下列字符串中的一个
      return ['large', 'medium', 'small', 'mini'].indexOf(value) !== -1
    }
  }
}
复制代码

分为两个部分：基础属性和扩展属性。

基础属性

这个是每个控件都需要的属性。

扩展属性

这个是针对各类控件设计的，比如多行文本框需要设置 rows 属性。

这样的话，方便管理也方便扩展。

UI库的控件需要的其他的属性，可以通过继承的方式来赋值，因为要是一一都设置为props的话，那实在是太麻烦了，想想都头痛。

控件代码更简洁

因为不用一个个属性的绑定，代码要简单不少。

比如文本框的代码

<!--单行文本-->
<template>
  <el-input
    v-model="value"
    @input="mySubmit"
    @blur="myBlur"
    :id="'c' + controlId"
    :name="'c' + controlId"
    :size="size"
    :validate-event="validate_event"
    :show-word-limit="show_word_limit"
    :clearable="clearable"
    :resize="resize"
  >
  </el-input>
</template>
复制代码

import { defineComponent } from 'vue'
// 引入表单子控件的管理类
import formItemManage from '../controlManage/formItemManage.js'
// 引入组件需要的属性
import { baseFormProps, textProps } from '../controlConfig/formItemMeta.js'
export default defineComponent({
  name: 'el-form-text',
  props: {
    modelValue: String,
    ...baseFormProps, // 基础属性
    ...textProps // 单行文本的属性
  },
  // emits: ['myChange', 'update:modelValue', 'input', 'change', 'blur', 'focus', 'clear'],
  setup (props, context) {
    console.log('props-text', props)
    return {
      ...formItemManage(props, context)
    }
  }
})
复制代码

简单了不少吧。

props

不用写具体的属性设置了，而是加载js文件，获得基础属性和扩展属性，然后用扩展的方式设置。

这样增加属性也不用改组件的js的代码了。当然模板还要改一下。

template

模板部分，props的属性还是需要手写绑定一下，这个主意是想通过props的默认值的方式来做统一风格的设置。这样既可以保持统一，又可以实现个性设置，增加灵活性。

然后要研究一下验证的问题，不知道差点什么，没有触发el-form的验证功能。

异步的方式注册组件

一般我们都是引入.vue文件，然后注册组件，这样的话组件少还好办，但是组件多了就麻烦了。

怎么办呢？我们可以用vue提供的异步组件的方式来实现批量注册。

import { defineAsyncComponent } from 'vue'
/**
 * 组件里面注册控件用
 * * 文本
 * ** eltext 单行文本、电话、邮件、搜索
 * ** elarea 多行文本
 * ** elurl
 * * 数字
 * ** elnumber 数字
 * ** elrange 滑块
 * * 日期
 * ** eldate 日期、年月、年周、年
 * ** eltime 时间
 * * 选择
 * ** elcheckbox 勾选
 * ** elswitch 开关
 * ** elcheckboxs 多选组
 * ** elradios 单选组
 * ** elselect 下拉选择
 */
const formItemList = {
  // 文本类 defineComponent
  'el-form-text': defineAsyncComponent(() => import('./t-text.vue')),
  'el-form-area': defineAsyncComponent(() => import('./t-area.vue')),
  'el-form-url': defineAsyncComponent(() => import('./t-url.vue')),
  'el-form-password': defineAsyncComponent(() => import('./t-password.vue')),
  // 数字
  'el-form-number': defineAsyncComponent(() => import('./n-number.vue')),
  'el-form-range': defineAsyncComponent(() => import('./n-range.vue')),
  // 日期、时间
  'el-form-date': defineAsyncComponent(() => import('./d-date.vue')),
  'el-form-time': defineAsyncComponent(() => import('./d-time.vue')),
  // 选择、开关
  'el-form-checkbox': defineAsyncComponent(() => import('./s-checkbox.vue')),
  'el-form-switch': defineAsyncComponent(() => import('./s-switch.vue')),
  'el-form-checkboxs': defineAsyncComponent(() => import('./s-checkboxs.vue')),
  'el-form-radios': defineAsyncComponent(() => import('./s-radios.vue')),
  'el-form-select': defineAsyncComponent(() => import('./s-select.vue')),
  'el-form-selwrite': defineAsyncComponent(() => import('./s-selwrite.vue'))
}
/**
 * 动态组件的字典，便于v-for循环里面设置控件
 */
const formItemListKey = {
  // 文本类
  100: formItemList['el-form-area'], // 多行文本
  101: formItemList['el-form-text'], // 单行文本
  102: formItemList['el-form-password'], // 密码
  103: formItemList['el-form-text'], // 电话
  104: formItemList['el-form-text'], // 邮件
  105: formItemList['el-form-url'], // url
  106: formItemList['el-form-text'], // 搜索
  // 数字
  120: formItemList['el-form-number'], // 数组
  121: formItemList['el-form-range'], // 滑块
  // 日期、时间
  110: formItemList['el-form-date'], // 日期
  111: formItemList['el-form-date'], // 日期 + 时间
  112: formItemList['el-form-date'], // 年月
  113: formItemList['el-form-date'], // 年周
  114: formItemList['el-form-date'], // 年
  115: formItemList['el-form-time'], // 任意时间
  116: formItemList['el-form-time'], // 选择固定时间
  // 选择、开关
  150: formItemList['el-form-checkbox'], // 勾选
  151: formItemList['el-form-switch'], // 开关
  152: formItemList['el-form-checkboxs'], // 多选组
  153: formItemList['el-form-radios'], // 单选组
  160: formItemList['el-form-select'], // 下拉
  161: formItemList['el-form-selwrite'], // 下拉多选
  162: formItemList['el-form-select'] // 下拉联动
}
export default {
  formItemList,
  formItemListKey
}
复制代码

还是统一管理的套路，这样路径有变化，也是只需要改这一个地方就好。

使用方法

components: {
    ...elFormConfig.formItemList
  },
复制代码

这样只需要一行就可以实现批量注册了。

模板里还是一样的使用方式

<el-form-text v-model="model.text" v-bind="metaText"/>
复制代码

meta的最简单设置

由于采用了默认值和继承的方式，所以需要设置的属性大大降低，如果只是单独使用的话，那么可以不设置meta，当然这样的话，直接用element的框架就好。

然后就是需要哪些属性就设置哪些属性就好。和直接使用element的区别在于，select这类的组件要简化一些。

比如 select的使用

<el-form-select
 v-model="model.selectId"
 v-bind="metaSelect"
 @change="myChange"/>
复制代码

不管需要设置多少属性，选项有多少，模板部分只需要这一行就可以搞定，整个表单的代码就可以简洁很多。

// 单选组、多选组、下拉的属性
  metaSelect: reactive({
    // controlId: 1160,
    // colName: 'personType',
    // controlType: 160,
    // defaultValue: 1,
    optionList: [
      { value: 1, label: '选项一' },
      { value: 2, label: '选项二' },
      { value: 3, label: '选项三' },
      { value: 4, label: '选项四' },
      { value: 5, label: '选项五' },
      { value: 6, label: '选项六' },
      { value: 7, label: '选项七' }
    ]
  }),
复制代码

需要的属性可以在这里统一设置，如果是单独使用的话，只需要设置 optionList 即可。如果是在封装的表单控件里面使用的话，还需要设置注释掉的那几个属性。因为要告诉表单控件，需要加载的控件类型。

话说，好像不需要响应式。

Vue3组件（14）控件属性的设置方式

集中定义属性

控件代码更简洁

异步的方式注册组件

使用方法

meta的最简单设置

热门文章

最新文章

相关课程

相关电子书

相关实验场景