Vue3组件(三)把别人的组件拿过来再封装一下

胡一菲说过,做巧克力很简单嘛,把商场里卖的巧克力买回来,融化后加点葡萄干、干果,然后再造型、凝固——巧克力就做好了。

是不是超简单?
是的,在开源世界里面就是这么简单,我们完全可以在开源的UI库的基础上实现自己的想法。

那么为啥要进行二次封装呢?

  • 便于切换UI库。
  • 可以应对版本升级。
  • 可以循环绑定控件。
  • 折腾后自己用着舒服。

定义“接口”

一般UI库都会提供一些列的控件,比如form分类下面的控件,就可以有十多个,那么要封装的话,首先就要确定接口,否则只能封装个寂寞。

简洁期间,定义两个属性,一个事件。

  • modelValue
    绑定控件值的,类型可以是string、number、数组等。

  • meta
    统一存放控件需要的各种属性,也可以包括回调函数。

  • input
    大多数情况都可以用input事件,各个的需要change等事件,不过事件比较宽松,可以灵活设定。

这里的接口并不是面向对象的接口,也没有用TypeScript那样的接口,而是一种约定和协议。原则上做限定,但是实际上还是可以放飞自我。

定义共用方法

vue2.x的时候需要使用mixin的方式,到了vue3.x 可以使用更灵活的方式来实现共用函数的目的。

inputManage

import { ref, watch } from 'vue'

const inputManage = (props, context) => {
 // 绑定控件的值
 const value = ref('')

 // 监听属性,给 value 赋值
 watch(() => props.modelValue, (v1, v2) => {
   value.value = v1
 })

 // 向父组件提交事件
 const myInput = (e) => {
   context.emit('update:modelValue', e)
   context.emit('input', e)
 }

 return {
   value,
   myInput
 }
}

export default inputManage
  • 管理类的参数
    因为要用到组件的属性和emit,所以需要设置两个参数来接收组件传递过来的属性和emit。

首先用 import 导入需要的方法,然后定义一个用于绑定控件的值 value——ref类型的——用着方便。
然后设置一个 watch 监控属性变化,然后给value赋值。
最后设计一个提交的函数。

基本设定就是这样,以后可以根据需求在完善,比如增加 blur 事件的提交,表单验证的时候可能会用到。

为啥不把组件的属性直接绑定到控件的value?一开始我就是直接绑定的,结果出错了。研究之后发现,element-plus把原生的value给覆盖了,变成了和 v-model 一样的属性了,这样就不能直接绑定组件的属性了。所以很无奈的做了一个内部的转换。

config

const metaInput = {
  type: Object,
  default: () => {
    return {
      // 通用
      controlId: Number, // 编号,区别同一个表单里的其他控件
      colName: String, // 字段名称
      controlType: Number, // 用类型编号表示type
      isClear: {
        // isClear  连续添加时是否恢复默认值
        type: Boolean,
        default: false
      },
      defaultValue: String, // 默认值
      autofocus: { // 是否自动获得焦点
        type: Boolean,
        default: false
      },
      disabled: {
        // 是否禁用
        type: Boolean,
        default: false
      },
      required: { // 必填
        type: Boolean,
        default: true
      },
      readonly: { // 只读
        type: Boolean,
        default: false
      },
      pattern: String, // 用正则做验证。
      class: {
        type: String,
        default: 'ant-input ant-input-sm'
      },
      placeholder: String,
      title: String, // 提示信息
      size: Number, // 字符宽度
      maxlength: Number, // 最大字符数
      autocomplete: { // off
        type: String,
        default: 'on'
      },
      optionKey: String, // 备选文字标识
      optionItem: Object // 备选的选项
    }
  }
}

export default {
  metaInput
}

这个是控件需要的属性的说明和验证。这么长的代码,当然要放在独立的地方了。

逐一封装控件

然后就是辛苦活了,一个一个封装呗,这里举一个例子就好,不一一贴代码了。

text 单行文本

<!--单行文本-->
<template>
  <el-input
    v-model="value"
    @input="myInput"
    :rows="12"
    :autosize="{ minRows: 3, maxRows: 6 }"
    :show-word-limit="true"
    :maxlength="meta.maxlength"
    :placeholder="meta.placeholder"
  >
  </el-input>
</template>

<script>
import inputManage from '../manage/inputManage.js'
import { metaInput } from '../manage/config.js'

export default {
  name: 'nf-textarea',
  props: {
    modelValue: String,
    meta: metaInput
  },
  emits: ['input', 'change', 'blur', 'focus', 'clear'],
  setup (props, context) {
    const { value, myInput } = inputManage(props, context)

    return {
      value,
      myInput
    }
  }
}
</script>

  • template
    按照控件需要的属性,一个一个绑好。

  • js代码
    因为把共用的部分都提取出去了,所以需要写的代码就非常少了。
    定义两个属性,属性的具体定义放在共用函数里面,这里就很简洁了。

setup里面就是获取变量和方法,然后return就可以了。

其难点就是如何处理控件需要的各种属性,需要一个一个绑定好,这是一个辛苦活,需要一个一个对照。

有些属性还需要做一些转换。不过都搞定后,以后用着就非常方便了。

复选组

<!--多选组-->
<template>
  <el-checkbox-group v-model="checks" @change="myInput">
    <el-checkbox :label="3">备选项</el-checkbox>
    <el-checkbox :label="6">备选项</el-checkbox>
    <el-checkbox :label="9">备选项</el-checkbox>
  </el-checkbox-group>
</template>
import inputManage from '../manage/inputManage.js'
import { metaInput } from '../manage/config.js'
import { ref } from 'vue'

export default {
  name: 'nf-el-from-checkbox',
  props: {
    modelValue: String,
    meta: metaInput
  },
  emits: ['input', 'change', 'blur', 'focus', 'clear'],
  setup (props, context) {
    const { value, myInput } = inputManage(props, context)

    const checks = ref([])

    return {
      value,
      myInput,
      checks
    }
  }
}

这个稍微有点不同,因为控件的值不是string,而是一个数组,所以需要单独设置一个数组来中转一下。

如果组件有不同的需求,稍微做点修改就好。实在不行重做一个也行。js就是比较随意。。。

其他的就不一一贴了,大同小异。

表单页面里使用控件

都封装好了,那么如何使用呢?

首先要引用进来,然后设置属性就可以了,比如这样。

    <el-form ref="form" :model="model" label-width="80px">
      <el-form-item label="活动名称">
        <eltext v-model="model.name" :meta="metaText"/>
      </el-form-item>
      <el-form-item label="活动网址">
        <elurl v-model="model.url" :meta="metaText" @input="myChange"/>
      </el-form-item>
      <el-form-item label="年龄要求">
        <elnumber v-model="model.age" :meta="metaText" @input="myChange"/>
      </el-form-item>
      <el-form-item label="年龄要求">
        <elrange v-model="model.age" :meta="metaText" @input="myChange"/>
      </el-form-item>
      <el-form-item label="活动区域">
        <elselect v-model="model.select" :meta="metaText" @input="myChange"/>
      </el-form-item>
      <el-form-item label="活动日期">
        <eldate v-model="model.date" :meta="metaText" @input="myChange"/> -
        <eltime v-model="model.time" :meta="metaText" @input="myChange"/>
      </el-form-item>
      <el-form-item label="即时配送">
        <elradios v-model="model.radio" :meta="metaText" @input="myChange"/>
      </el-form-item>
      <el-form-item label="活动性质">
        <elcheckbox v-model="model.checks" :meta="metaText" @input="myChange"/>
      </el-form-item>
      <el-form-item label="特殊资源">
        <elswitch v-model="model.switch" :meta="metaText" @input="myChange"/>
      </el-form-item>
      <el-form-item label="活动形式">
        <elarea v-model="model.contact" :meta="metaText" @input="myChange"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

本来写了一个el-row版本的,但是代码太长,直接写el-form版的吧。

import { reactive } from 'vue'
import eltext from '@/components/nf-el-form/input-text.vue'
import elarea from '@/components/nf-el-form/textarea.vue'
import elurl from '@/components/nf-el-form/url.vue'
import elnumber from '@/components/nf-el-form/input-number.vue'
import elrange from '@/components/nf-el-form/input-range.vue'
import eldate from '@/components/nf-el-form/input-date.vue'
import eltime from '@/components/nf-el-form/input-time.vue'
import elradios from '@/components/nf-el-form/radios.vue'
import elcheckbox from '@/components/nf-el-form/checkbox.vue'
import elselect from '@/components/nf-el-form/select.vue'
import elswitch from '@/components/nf-el-form/switch.vue'

export default {
  name: 'eleBase',
  components: {
    eltext,
    elarea,
    elurl,
    elnumber,
    elrange,
    eldate,
    eltime,
    elradios,
    elcheckbox,
    elselect,
    elswitch

  },
  setup () {
    // 定义表单实体类
    const model = reactive({
      age: 1,
      url: '',
      name: '',
      contact: '',
      date: null,
      time: null,
      radio: 1,
      checks: [],
      select: 1,
      switch: true

    })

    // 定义样式
    const formTitleStyle = {
      'text-align': 'right',
      'padding-right': '10px'
    }

    // 控件类型的属性
    const metaText = reactive({
      controlId: 103,
      colName: 'controlType',
      controlType: 190,
      optionList: [],
      isClear: false,
      disabled: false,
      required: true,
      pattern: '',
      title: '组件类型',
      placeholder: '请输入组件类型',
      maxlength: 100,
      readonly: false
    })

    const myChange = (e) => {
      // alert(e)
      console.log('changele')
    }

    return {
      model,
      formTitleStyle,
      metaText,
      myChange
    }
  }
}

首先是注册组件,然后定义组件需要的属性,然后return就可以了。

能不能简化?

当然可以了,这样的代码对于我这么懒的人,还是太麻烦了。
那么如何简化呢?这个有很多种方法,比如v-for,比如做一个单独的表单组件。

总之方法有很多,具体方法,下次再说。

先看看效果图:


004表单效果.png

看图是不是感觉没啥特别的,这个嘛看效果当然没啥特别的了,关键是代码如何实现的,你说对不。

推荐阅读更多精彩内容