介绍
@beisen-platform/selected-list 是一个适用于前端开发的 npm 包，它提供了一组交互式的 UI 组件，用于实现列表多选和单选功能。该包是基于 Vue.js 框架编写的，可用于各种前端项目。
安装
你可以通过 npm 包管理器进行安装：
npm install @beisen-platform/selected-list --save
基本使用
-- -------------------- ---- -------
----------
-----
-------------- ---------------------- -----------------------------
------
-----------
--------
------ ------------ ---- ---------------------------------
------ ------- -
----- -------------------
----------- -
-------------
--
------ -
------ -
----- -
- ------ -------- ------ ----- --
- ------ -------- ------ ----- --
- ------ -------- ------ ----- --
--
------------- ----------
--
--
--
---------上述示例代码展示了如何在 Vue.js 项目中使用 @beisen-platform/selected-list 组件实现一个简单的多选列表。在数据中指定要显示的选项，绑定 selectedList 变量可追踪用户选择的项。
API
Props
| 名称 | 类型 | 说明 |
|---|---|---|
| list | Array | 选项列表，数组内元素格式为 {value, label} |
| v-model | Array（单选）/String（多选） | 选中项的 value |
| multiple | Boolean | 是否支持多选（默认 false） |
| disabled | Boolean | 是否禁用选择功能（默认 false） |
| item-class | String | 选项的样式类 |
Events
| 名称 | 说明 |
|---|---|
| change | 当选中值发生变化时触发，回调参数为当前选中项 |
高级使用
自定义选项
可以通过在 list 中指定 slot 属性来为每个选项自定义展示样式和内容：
<selected-list v-model="selectedList" :list="list">
<template slot-scope="{item}">
<div :class="['my-item', {'is-selected': isSelected(item.value)}]">
<span>{{ item.label }}</span>
<button @click="remove(item.value)">删除</button>
</div>
</template>
</selected-list>上述示例代码中，我们使用 slot-scope 来获取当前选项的 item 对象。然后使用传统的 Vue 模板语法来定义我们的选项模板。
自定义样式
在组件上添加类名来覆盖原始样式：
<selected-list v-model="selectedList" :list="list" class="my-selected-list">
<template slot-scope="{item}">
<div class="my-item">{{ item.label }}</div>
</template>
</selected-list>在 selecting-class 或 selected-class 中指定样式可以自定义当前选择或已选中的选项的样式：
<selected-list v-model="selectedList" :list="list" selecting-class="my-selecting" selected-class="my-selected">
<template slot-scope="{item}">
<div class="my-item">{{ item.label }}</div>
</template>
</selected-list>总结
@beisen-platform/selected-list 是一个非常实用的 npm 包，它提供了一组易于使用和定制化的 UI 组件，可以用于实现前端项目中的多选和单选功能。在 Vue.js 项目中，通过选项的绑定和事件的监听，开发者可以轻松实现一个具有良好交互体验的选项列表组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/beisen-platform-selected-list