简介
在前端开发中，我们经常需要使用表单元素。其中较为常见的一类是单选框（radio）。但是，使用原生的单选框控件时，会遇到诸如样式不符合设计稿、无法支持联动等问题。因此，在实际开发中，我们往往需要借助一些第三方库来实现更加灵活、易用的单选框控件。
本文将介绍一个基于 Vue.js 和 Element UI 的单选框组件：@beisen-phoenix/field-radio。本组件具有易用、美观、支持自定义模板等优点，在实际项目中非常实用。
安装
你可以通过以下命令来安装 @beisen-phoenix/field-radio：
npm install @beisen-phoenix/field-radio
使用
组件的使用非常简单。你只需要在你的 Vue 组件中引入其注册即可：
import FieldRadio from '@beisen-phoenix/field-radio'
export default {
components: {
FieldRadio,
},
}在 HTML 模板中即可使用组件了：
<field-radio v-model="radioValue" :options="options" />
其中，v-model 是双向绑定的语法糖，表示当前选中的选项。options 是单选项的列表，形式如下：
[
{ label: '选项1', value: '1' },
{ label: '选项2', value: '2' },
{ label: '选项3', value: '3' },
]自定义模板
如果你需要在单选框前/后添加一些文字或图标，或者需要对单选框的样式进行自定义，那么你可以通过 slot 来实现。FieldRadio 组件提供了以下几个 slot：
option-before：单选框前的内容option-after：单选框后的内容option：单个选项的外层 DOM 结构option-label：单选框 label 的内容option-radio：单选框 input 元素
例如，在单选框前添加一个 icon，可以这样写：
<field-radio v-model="radioValue" :options="options">
<template #option-before="{ option }">
<i class="iconfont icon-{{option.value}}"></i>
</template>
</field-radio>这样，每一项单选框前都会添加一个相应的 icon。
高级用法
动态更新 options
有时候，我们需要动态更新单选框的选项列表。FieldRadio 组件提供了一个 setOptions 函数，可以用来更新选项：
this.$refs.radio.setOptions([ /* 新的选项列表 */ ])
数组值
如果你需要使用一个数组来表示当前选中的选项，而不是一个字符串类型的值，那么你可以通过 val-transform prop 来实现。例如，你的选项列表如下：
[
{ label: '选项1', value: '1' },
{ label: '选项2', value: '2' },
{ label: '选项3', value: '3' },
]其中，你希望得到的值为选中选项 value 的数组：['1', '3']。那么你可以这样写：
<field-radio v-model="radioArray" :options="options" val-transform="item => item.value" />
这里，我们传入了一个箭头函数，将每个选项转换成其 value 值。
示例代码
-- -------------------- ---- -------
----------
-----
---- ---- ---
------------ -------------------- ------------------ --
---- -- ---- ----- ---
------------ -------------------- -------------------
--------- ----------------- ------ ---
-- --------------- ---------------------------
-----------
--------------
---- ---- ------- ---
------------ ----------- -------------------- ------------------ --
------- ------------------------------------
---- ----- ---
------------ -------------------- ------------------ ------------------- -- ----------- --
------
-----------
--------
------ ---------- ---- -----------------------------
------ ------- -
----------- -
-----------
--
------ -
------ -
-------- -
- ------ ------ ------ --- --
- ------ ------ ------ --- --
- ------ ------ ------ --- --
--
----------- ----
----------- ----- -----
-
--
-------- -
--------------- -
-----------------------------
- ------ ------ ------ --- --
- ------ ------ ------ --- --
- ------ ------ ------ --- --
--
--
--
-
---------总结
@beisen-phoenix/field-radio 是一个易用、美观、自定义能力强的单选框组件。本文介绍了其基本用法、自定义模板、动态更新选项、使用数组值等高级用法，并提供了示例代码供读者参考。希望本文能够对你在日常开发中使用单选框控件有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/beisen-phoenix-field-radio