likes
comments
collection
share

封装自定义Vue3 el-radio组件：深入解析与实战指南

作者站长头像
站长
· 阅读数 61

在现代前端开发中，组件化已成为提升代码质量和开发效率的关键策略。特别是在大型项目中，高度可定制且功能丰富的UI组件对于构建一致且高效的用户界面至关重要。本文将详细探讨如何封装一个基于Element UI的el-radio组件，不仅涵盖基本的封装流程，还将深入讨论如何增加组件的灵活性、可维护性和性能优化策略。

1. 引言：为什么封装组件？

封装组件的主要优势在于：

  • 重用性：封装的组件可以在多个项目中重复使用，减少重复编码，加快开发速度。
  • 可维护性：组件化的代码结构更清晰，易于理解和维护。
  • 定制性：通过参数化设计，组件可以适应不同的应用场景，满足多样化的业务需求。
  • 性能优化：合理的设计可以显著提升组件的加载速度和运行效率。

2. 设计理念与目标

在封装el-radio组件时，我们的核心设计理念围绕着以下几点：

  • 灵活性：组件应支持多种布局和样式，如行内、按钮组等。
  • 可配置性：提供丰富的API，允许用户自定义选项的值、标签、禁用状态等。
  • 响应式设计：组件需适应不同屏幕尺寸，确保在桌面和移动设备上均能提供良好的用户体验。
  • 性能考量：优化组件性能，尤其是在处理大量选项时，保证流畅的用户体验。

3. 技术栈与工具

  • Vue.js：作为主要的前端框架，利用其强大的组件系统和响应式机制。
  • Element UI：基于Vue.js的UI组件库，提供了一套成熟且美观的组件集合。
  • TypeScript：用于编写类型安全的组件代码，提升代码质量和可维护性。
  • SCSS/CSS-in-JS：用于组件样式的编写，提供更强大的样式定制能力。

4. 组件封装流程

步骤一：定义组件属性

import { defineProps, computed, ref } from 'vue';

const radioProps = defineProps({
  type: {
    type: String,
    default: 'radio',
    validator: (value: string) => ['radio', 'button'].includes(value)
  },
  options: {
    type: Array,
    default: () => []
  },
  size: {
    type: String,
    default: 'default',
    validator: (value: string) => ['large', 'default', 'small'].includes(value)
  },
  border: {
    type: Boolean,
    default: false
  },
  props: {
    type: Object,
    default: () => ({})
  }
});

步骤二：计算组件类型与属性

允许用户自定义选项的值、标签、禁用状态等。

const radioType = computed(() => {
  return radioProps.type === 'button' ? 'el-radio-button' : 'el-radio';
});

const optionsProps = ref({
  value: 'value',
  label: 'label',
  disabled: 'disabled',
  ...radioProps.props
});

步骤三：模板渲染与优化

<template>
  <el-radio-group v-bind="$attrs" :size="size">
    <slot>
      <component
        v-for="(item, index) in options"
        v-bind="item"
        :is="radioType"
        :key="index"
        :value="item[optionsProps.value]"
        :border="border"
        :disabled="item[optionsProps.disabled]"
      >
        <slot :name="item.slot" v-bind="item">
          {{ item[optionsProps.label] }}
        </slot>
      </component>
    </slot>
  </el-radio-group>
</template>

完整代码

<template>
  <el-radio-group v-bind="$attrs" :size="size">
    <slot>
      <component
        v-for="(item, index) in options"
        v-bind="item"
        :is="radioType"
        :key="index"
        :value="item[optionsProps.value]"
        :border="border"
        :disabled="item[optionsProps.disabled]"
      >
        <slot :name="item.slot" v-bind="item">
          {{ item[optionsProps.label] }}
        </slot>
      </component>
    </slot>
  </el-radio-group>
</template>

<script setup lang="ts" name="TRadio">
import { computed, ref } from "vue"
import type { PropType } from "vue"
import type { OptionsProps } from "./radio"

// 定义组件属性，包括类型、默认值和校验规则
const radioProps = defineProps({
  type: {
    type: String as PropType<"radio" | "button">,
    validator: (value: string) => ["radio", "button"].includes(value),
    default: "radio"
  },
  options: {
    type: Array as unknown as any[],
    default: () => []
  },
  size: {
    type: String as PropType<"large" | "default" | "small">,
    validator: (value: string) => ["large", "default", "small"].includes(value),
    default: "default"
  },
  border: {
    type: Boolean,
    default: false
  },
  props: {
    type: Object,
    default: () => ({})
  }
})

// 根据type属性计算出应使用的radio组件类型
const radioType = computed(() => {
  const obj = {
    radio: "el-radio",
    button: "el-radio-button"
  }
  return obj[radioProps.type] ?? "el-radio"
})

// 合并默认的选项属性和用户自定义的属性
const optionsProps = ref<OptionsProps>({
  ...{
    value: "value",
    label: "label",
    disabled: "disabled"
  },
  ...radioProps.props
})
</script>

5. 组件使用

基础用法

封装自定义Vue3 el-radio组件：深入解析与实战指南

<template>
  <t-radio v-model="value" :options="options" />
</template>
<script setup lang="ts">
import { ref } from "vue"
const value = ref("1")
const options = ref([
  { label: "Option 1", value: 1 },
  { label: "Option 2", value: 2 }
])
</script>

尺寸大小

通过 size 属性用来控制单选框的大小

封装自定义Vue3 el-radio组件：深入解析与实战指南

<template>
  <t-layout-page>
    <t-layout-page-item>
      <div>
        <t-radio v-model="value" :options="options" size="large" />
      </div>
      <div style="margin-top: 20px">
        <t-radio v-model="value" :options="options" size="default" />
      </div>
      <div style="margin-top: 20px">
        <t-radio v-model="value" :options="options" size="small" />
      </div>
      <div style="margin-top: 20px">
        <t-radio v-model="value" :options="options" size="small" disabled />
      </div>
    </t-layout-page-item>
  </t-layout-page>
</template>
<script setup lang="ts">
import { ref } from "vue"
const value = ref("1")
const options = ref([
  { label: "Option 1", value: 1 },
  { label: "Option 2", value: 2 }
])
</script>

按钮样式

你可以让单选框看起来像一个按钮一样, 只需要将type属性设置为 button

封装自定义Vue3 el-radio组件：深入解析与实战指南

<template>
  <t-layout-page>
    <t-layout-page-item>
      <div>
        <t-radio v-model="value" :options="options" size="large" type="button" />
      </div>
      <div style="margin-top: 20px">
        <t-radio v-model="value" :options="options" size="default" type="button" />
      </div>
      <div style="margin-top: 20px">
        <t-radio v-model="value" :options="options" size="small" type="button" />
      </div>
      <div style="margin-top: 20px">
        <t-radio v-model="value" :options="options" size="small" type="button" disabled />
      </div>
    </t-layout-page-item>
  </t-layout-page>
</template>
<script setup lang="ts">
import { ref } from "vue"
const value = ref("1")
const options = ref([
  { label: "Option 1", value: 1 },
  { label: "Option 2", value: 2 }
])
</script>

带有边框

设置 border 属性为 true 可以渲染为带有边框的单选框。

<template>
  <t-layout-page>
    <t-layout-page-item>
      <div>
        <t-radio v-model="value" :options="options" size="large" border />
      </div>
      <div style="margin-top: 20px">
        <t-radio v-model="value" :options="options" size="default" border />
      </div>
      <div style="margin-top: 20px">
        <t-radio v-model="value" :options="options" size="small" border />
      </div>
      <div style="margin-top: 20px">
        <t-radio v-model="value" :options="options" size="small" disabled border />
      </div>
    </t-layout-page-item>
  </t-layout-page>
</template>
<script setup lang="ts">
import { ref } from "vue"
const value = ref("1")
const options = ref([
  { label: "Option 1", value: 1 },
  { label: "Option 2", value: 2 },
  { label: "Option 3", value: 3 }
])
</script>

插槽使用及自定义

给选项添加 slot 属性，可以自定义单个插槽。也可以通过默认插槽，实现自定义 radio

封装自定义Vue3 el-radio组件：深入解析与实战指南

<template>
  <t-layout-page>
    <t-layout-page-item>
      <div>
        <h4>自定义单个选项插槽</h4>
        <t-radio v-model="value" :options="options" size="large">
          <template #mySlot="scope">
            <div>自定义单个选项插槽---{{ scope.label }}---{{ scope.value }}</div>
          </template>
        </t-radio>
      </div>
      <div>
        <h4>默认插槽</h4>
        <t-radio v-model="value2" :options="options2" size="large">
          <el-radio value="上海" />
          <el-radio value="北京" />
          <el-radio value="广州" />
          <el-radio value="深圳" />
        </t-radio>
        <br />
        <t-radio v-model="value2" :options="options2" size="large">
          <el-radio-button value="上海" />
          <el-radio-button value="北京" />
          <el-radio-button value="广州" />
          <el-radio-button value="深圳" />
        </t-radio>
      </div>
    </t-layout-page-item>
  </t-layout-page>
</template>
<script setup lang="ts">
import { ref } from "vue"
const value = ref("1")
const options = ref([
  { label: "Option 1", value: 1 },
  { label: "Option 2", value: 2 },
  { label: "Option 3", value: 3, slot: "mySlot" }
])

const value2 = ref("1")
const options2 = ref([
  { label: "Option 1", value: 1 },
  { label: "Option 2", value: 2 },
  { label: "Option 3", value: 3, slot: "mySlot" }
])
</script>

可选项

设置 props 属性，可设置 value, label, disabled 取值

封装自定义Vue3 el-radio组件：深入解析与实战指南

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-radio
        v-model="value"
        :options="options"
        :props="{ label: 'name', value: 'id', disabled: 'isSelected' }"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>
<script setup lang="ts">
import { ref } from "vue"
const value = ref("1")
const options = ref([
  { id: "2016-05-02", name: "上海市普陀区金沙江路 1518 弄", isSelected: false },
  { id: "2016-05-04", name: "上海市普陀区金沙江路 1517 弄", isSelected: false },
  { id: "2016-05-01", name: "上海市普陀区金沙江路 1519 弄", isSelected: false },
  { id: "2016-05-03", name: "上海市普陀区金沙江路 1516 弄", isSelected: true }
])
</script>

更多使用示例，可以看看文档 TRadio 单选组件

结论

封装自定义el-radio组件不仅提升了项目的代码质量和开发效率，还为团队提供了更加灵活和强大的UI构建工具。通过遵循上述设计原则和开发流程，你可以轻松创建出既美观又实用的组件，为你的前端项目增添更多价值。希望本文能激发你对组件化开发的兴趣，推动你在前端领域的不断探索与创新。

往期组件封装文章

转载自:https://juejin.cn/post/7394835461040324627
评论
请登录