介绍
@shortcm/radio 是一个简单易用的前端组件库，提供了单选框（Radio）和单选框组（RadioGroup）两个组件，可以方便地实现单选功能。
安装
在项目目录下使用 npm 进行安装：
npm install @shortcm/radio --save
快速上手
在项目中引入 @shortcm/radio：
import {RadioGroup, Radio} from '@shortcm/radio';在模板中使用：
-- -------------------- ---- -------
----------
----------- ----------------
------ ------------ ---------
------ ------------ ---------
------ ------------ ---------
-------------
-----------
--------
------ ------------ ------ ---- -----------------
------ ------- -
----- --------------
----------- -
-----------
-----
--
------ -
------ -
------ --
--
-
--
---------这里使用了 v-model 实现数据双向绑定，value 存储了当前选中的单选框的值。
API
RadioGroup Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value/v-model | 绑定值 | string/number/boolean | |
| disabled | 是否禁用 | boolean | false |
| size | 单选框组尺寸，可选值：small、middle、large |
string | middle |
Radio Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| label | 单选框的值 | string/number/boolean | |
| disabled | 是否禁用 | boolean | false |
| size | 单选框尺寸，可选值：small、middle、large |
string | middle |
RadioGroup Events
| 事件名称 | 说明 | 回调函数 |
|---|---|---|
| change | 在选项状态发生改变时触发 | Function(value) |
Radio Methods
| 方法名称 | 说明 |
|---|---|
| blur() | 使单选框失去焦点 |
| focus() | 使单选框获取焦点 |
示例
-- -------------------- ---- -------
----------
----------- --------------- ------------ -----------------------
------ --------- ----------------------- ---------
------ --------- ----------------------- ---------
------ --------- ----------------------- ---------
-------------
-----------
--------
------ ------------ ------ ---- -----------------
------ ------- -
----- --------------
----------- -
-----------
-----
--
------ -
------ -
------ ----
--------- ------
----- --------
--
--
-------- -
------------------- -
---------------- -----------
-
-
--
---------总结
@shortcm/radio 是一个简单易用的前端组件库，使用它可以快速地实现单选功能。通过本文的介绍，我们可以清晰地了解 @shortcm/radio 的基本用法和 API，希望本文能对大家学习和使用 @shortcm/radio 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a130d09270238223a6