npm 包 @beisen-platform/radio-list 使用教程

阅读时长 4 分钟读完

介绍

@beisen-platform/radio-list 是一个适用于前端开发的 npm 包,可以帮助开发人员快速实现单选框列表,并支持自定义样式和事件绑定。

安装

可以通过 npm 安装:

或者通过 Yarn 安装:

使用方法

引入

在需要使用的文件中引入 @beisen-platform/radio-list

初始化

在 HTML 中创建一个容器:

使用 new 关键字创建 RadioList 实例:

-- -------------------- ---- -------
----- --------- - --- -----------
  --- --------------
  ------ -
    - ------ ------ ------ --- --
    - ------ ------ ------ --- --
    - ------ ------ ------ --- --
  --
  --------- ----
  --------- ------- -- -------------------- -----------
---

参数说明

  • el:容器的选择器或 DOM
  • items:列表选项的数组,每个元素包含 labelvalue 两个属性
  • selected:默认选中的值
  • onChange:选中值发生变化时的回调函数,参数为当前选中的值

自定义样式

@beisen-platform/radio-list 的样式可以使用 SCSS 变量自定义,同时也提供了一些 CSS 类名方便扩展样式。

-- -------------------- ---- -------
-- -----
----------------------- --------

-- ----
------- --------------------------------------------------

-- ----
-------------- -
  ---------------- --- -
    ------ -----------------------
  -
-

示例代码

以下示例代码演示了如何创建一个带有搜索框的单选框列表。

-- -------------------- ---- -------
------ --------- ---- ------------------------------

----- ----- - -
  - ------ ------ ------ --- --
  - ------ ------ ------ --- --
  - ------ ------ ------ --- --
--

----- --------- - --- -----------
  --- ---------------------
  ------
  --------- ----
  --------- ------- -- -------------------- -----------
---

----- ----------- - ----------------------------------------

------------------------------------- ------- -- -
  ----- ------- - ----------------------------------------

  ----- ------------- - ------------------- --
    ------------------------------------------
  --

  ------------------ ------ ------------- ---
---

结束语

@beisen-platform/radio-list 是一个简单易用的 npm 包,可以帮助前端开发人员快速实现单选框列表,同时也支持自定义样式和事件绑定。希望本文可以帮助大家使用和了解该包,同时也可以为大家在实际项目中的开发工作提供一些启示和指导意义。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/beisen-platform-radio-list