Vue.js的微小可搜索选择组件– ss-select
| 插件名称 | ss-select |
|---|---|
| 发布时间 | 2020年4月17日 |
| 插件作者 | miggiboy |
ss-select是Vue.js组件，用于创建易于样式化的select元素，该元素支持过滤，单/多选择和禁用的选项。
使用：
1.导入并注册组件。
import SsSelect from 'ss-select'
Vue.use(SsSelect)2.在您的应用程序中创建一个基本的ss-select组件。
<!-- ss-select是主要的组成部分. -->
<ss-select :options="songs" track-by="name" search-by="name" class="select">
<!-- 创建一个div来从slot作用域解析所需的数据和方法 -->
<div slot-scope="{ filteredOptions, selectedOption, isOpen, pointerIndex, $selected, $get }">
<!-- 切换组件打开和关闭下拉列表 -->
<ss-select-toggle class="select-toggle">
<div class="select-toggle-placeholder">
{{ $get(selectedOption, 'name') || 'Pick a song' }}
</div>
<svg class="cheveron-svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
</ss-select-toggle>
<!-- 创建div以显示选项 -->
<div v-show="isOpen" class="select-dropdown">
<!-- 搜索输入组件用于筛选选项 -->
<!-- 确保提供按属性搜索，这将是筛选选项的关键 -->
<ss-select-search-input class="select-search-input"></ss-select-search-input>
<!-- 选择 -->
<ss-select-option v-for="(song, index) in filteredOptions"
:value="song"
:index="index"
:key="song.name"
:class="[
pointerIndex == index ? 'pointed-option' : '',
$selected(song) ? 'selected-option' : ''
]"
class="select-option">
{{ song.name }}
</ss-select-option>
</div>
</div>
</ss-select>