基于vue3+ts实现二次封装element-ui的el-select下拉选项框和el-radio-group单选框

1. 项目安装element3版本组件库和lodash-es工具库

# NPM
$ npm install element-plus --save
 
# Yarn
$ yarn add element-plus
 
# pnpm
$ pnpm install element-plus

#安装lodash-es工具库
$ npm install lodash-es --save

2.根据文档中的方法引入main.ts

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
 
const app = createApp(App)
 
app.use(ElementPlus)
app.mount('#app')

3. 在公共工具包中创建dict.ts文件来定义可使用的工具对象库

dict.ts内容举例：

export const delState = { 1: '正常', 0: '异常' }

export const state = { 1: '是', 0: '否' }

export const gender = { 1: '男', 2: '女' }

export const stateunit = { 0: '冻结', 1: '正常', 2: '到期' }

export const fundDirect = { 1: '收入', 2: '支出',}

4. 在公共组件中创建SelectDict文件中创建index.vue 进行封装下拉框组件完整代码

<script setup lang="ts">
import { merge } from 'lodash-es'
import { useDisabled } from 'element-plus'
import * as _DICT from '@/utils/dict'

const props = withDefaults(
  defineProps<{
    type?: 'select' | 'radio'
    name: string
    all?: boolean
    border?: boolean
    dict?: any
    disabled?: boolean
    button?: boolean
  }>(),
  {
    all: false,
    type: 'select',
    border: true,
    button: false,
    dict: {},
  },
)

const dict = computed(() => {
  const DICT: Record<string, any> = _DICT
  if (DICT[props.name]) return merge(DICT[props.name], props.dict)

  console.warn(`找不到字典 ${props.name}`)
})

const disabled = useDisabled(props.disabled)
</script>

<template>
  <!-- select -->
  <el-select v-if="props.type === 'select'" :disabled="disabled" class="w-full" v-bind="$attrs" placeholder="请选择">
    <el-option v-if="props.all" label="全部" :value="-1" />
    <el-option v-for="(label, value) in dict" :key="value" :label="label" :value="+value" />
  </el-select>
</template>

5.进一步封装el-radio-group单选框完整代码是将组件变的公用更加灵活，同时兼容下拉框和单选框

<script setup lang="ts">
import { merge } from 'lodash-es'
import { useDisabled } from 'element-plus'
import * as _DICT from '@/utils/dict'

const props = withDefaults(
  defineProps<{
    type?: 'select' | 'radio'
    name: string
    all?: boolean
    border?: boolean
    dict?: any
    disabled?: boolean
    button?: boolean
  }>(),
  {
    all: false,
    type: 'select',
    border: true,
    button: false,
    dict: {},
  },
)

const dict = computed(() => {
  const DICT: Record<string, any> = _DICT
  if (DICT[props.name]) return merge(DICT[props.name], props.dict)

  console.warn(`找不到字典 ${props.name}`)
})

const disabled = useDisabled(props.disabled)
</script>

<template>
  <!-- select -->
  <el-select v-if="props.type === 'select'" :disabled="disabled" class="w-full" v-bind="$attrs" placeholder="请选择">
    <el-option v-if="props.all" label="全部" :value="-1" />
    <el-option v-for="(label, value) in dict" :key="value" :label="label" :value="+value" />
  </el-select>

  <!-- radio -->
  <el-radio-group v-if="props.type === 'radio'" :disabled="disabled" v-bind="$attrs">
    <template v-if="props.button">
      <el-radio-button v-for="(text, label) in dict" :key="label">
        {{ text }}
      </el-radio-button>
    </template>

    <div v-else class="space-x-3 flex">
      <div v-for="(text, label) in dict" :key="label" class="flex">
        <el-radio :label="+label" :border="props.border">
          {{ text }}
        </el-radio>
      </div>
    </div>
  </el-radio-group>
</template>

使用步骤

<script setup>

import SelectDict from '@/components/SelectDict/index.vue'

const ordState = ref(-1)
const state = ref(1)


</script>

<template>
  <SelectDict v-model="ordState" name="ordState" all />

  <SelectDict v-model="state" name="stateunit" type="radio" :border="false" />

</template>

效果：