Vue3组件(七)封装选择类的组件

687 阅读2分钟

分类

选择类的组件可以细分为:

  • 勾选 (一个CheckBox)
  • 开关 (Switch)
  • 下拉选择 (Select)
  • 单选组 (radio-group)
  • 多选组 (checkbox-group)
  • 可填可选 (autocomplete)

针对每种分类单独封装几个组件

勾选

就是一个单独的CheckBox,这个一般用在用户注册的时候,选择同意条款的地方。 一个方框,打个勾勾就可以用软件,否则不让你用。 特点就是返回true和false。 我们来简单封装一下:

<!--勾选框-->
<template>
  <el-checkbox
    v-model="value"
    @change="mySubmit"
    :id="'c' + meta.controlId"
    :name="'c' + meta.controlId"
    :disabled="meta.disabled"
    :placeholder="meta.placeholder"
  >
    {{meta.title}}
  </el-checkbox>
</template>

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

export default {
  name: 'nf-el-from-checkbox',
  props: {
    modelValue: Boolean,
    meta: metaInput
  },
  emits: ['change', 'blur', 'focus'],
  setup (props, context) {
    const { value, mySubmit } = controlManage(props, context)

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

共用函数都已经分离出去了,所以这里设置一下模板就好。

开关

可能是UI库觉得框框打对号不好看吧,于是做了这种开关的方式,emmm,确实挺好看的。 还是简单的封装一下:

<!--开关,单选-->
<template>
  <el-switch
    v-model="value"
    active-text="on"
    inactive-text=""
    @change="mySubmit"
    :disabled="meta.disabled"
  >
  </el-switch>
</template>

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

export default {
  name: 'nf-el-from-switch',
  props: {
    modelValue: Boolean,
    meta: metaInput
  },
  emits: ['input', 'change', 'blur', 'focus', 'clear'],
  setup (props, context) {
    return {
      ...controlManage(props, context)
    }
  }
}
</script>

同上。

单选组

就是一组圆圈圈。这个只能单选,适合于选项比较少的情况,比如男、女。 有些情况下可以当做tab标签来用,而UI库也很体贴的提供了标签的形式。 继续:

<!--单选组-->
<template>
  <el-radio-group
    v-model="value"
    @change="mySubmit"
    :id="'c' + meta.controlId"
    :name="'c' + meta.controlId"
    :disabled="meta.disabled"
    :placeholder="meta.placeholder"
  >
    <el-radio
      v-for="item in meta.optionList"
      :key="'radio' + meta.controlId + item.value"
      :label="item.value">
        {{item.label}}
    </el-radio>
  </el-radio-group>
</template>

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

export default {
  name: 'nf-el-from-radios',
  props: {
    modelValue: String,
    meta: metaInput
  },
  emits: ['change', 'blur', 'focus'],
  setup (props, context) {
    const { value, mySubmit } = controlManage(props, context)

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

这里要感谢UI库,不仅提供了好看的外观,还提供了取值的功能。所以直接取值就好。

多选组

就是一组方框框,比较传统的多选的方式。

<!--多选组-->
<template>
  <el-checkbox-group
    v-model="value"
    @change="mySubmit"
    :id="'c' + meta.controlId"
    :name="'c' + meta.controlId"
    :disabled="meta.disabled"
    :placeholder="meta.placeholder"
  >
    <el-checkbox
      v-for="item in meta.optionList"
      :key="'check' + meta.controlId + item.value"
      :label="item.value">
        {{item.label}}
    </el-checkbox>
  </el-checkbox-group>
</template>

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

export default {
  name: 'nf-el-from-checkboxs',
  props: {
    modelValue: Object,
    meta: metaInput
  },
  emits: ['change', 'blur', 'focus'],
  setup (props, context) {
    const { value, mySubmit } = controlManage(props, context)

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

同理,不需要我们自己写代码,可以直接得到用户选择的选项值。

下拉列表框 Select

一个很基础很常用的选择组件,可以单选也可以多选,而且UI库还给扩充了查询的功能,在有些条件下还是非常实用的功能。

<!--下拉选择-->
<template>
  <el-select
    v-model="value"
    @change="mySubmit"
    :id="'c' + meta.controlId"
    :name="'c' + meta.controlId"
    :disabled="meta.disabled"
    :placeholder="meta.placeholder"
  >
    <el-option
      v-for="item in meta.optionList"
      :key="'select' + meta.controlId + item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

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

export default {
  name: 'nf-el-from-select',
  props: {
    modelValue: String,
    meta: metaInput
  },
  emits: ['change', 'blur', 'focus'],
  setup (props, context) {
    const { value, mySubmit } = controlManage(props, context)

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

依托强大的UI库,我们就省事了,绑定好属性就好。只是有个奇怪的情况,我加上“multiple”后,整个Select组件居然崩了,还得继续尝试以找到原因。

看看效果

002选择.png

封装之后,使用起来就更简单了,一个组件一行就可以,甚至我们可以使用v-for来循环,这样我们可以方便的做多行多列的表单。 这样表单再大也不怕了,也不用担心客户总是改需求。

源码

github.com/naturefwvue…