spz-selector 选择器
对一组列表进行选择。
布局
跳转到“布局”何时使用
跳转到“何时使用”- 需要在选择以后,将当前选中的内容滚动到可视区域。
- 需要将选择的记录保存,刷新页面后也不会回到初始值。
代码演示
跳转到“代码演示”基本用法
跳转到“基本用法”最基础的用法,默认选择第一个选项。
A
B
C
<spz-selector layout="container">
<div option="A" selected>A</div>
<div option="B">B</div>
<div option="C">C</div>
</spz-selector>
保持选中状态
跳转到“保持选中状态”刷新页面后还保持上一次选中的状态。
A
B
C
<spz-selector layout="container" record-state>
<div option="A" name="A">A</div>
<div option="B" name="B" selected>B</div>
<div option="C" name="C">C</div>
</spz-selector>
鼠标滑入选项
跳转到“鼠标滑入选项”显示鼠标滑入选项的值。
A
B
C
D
E
- Selected Option: ["A"]
- Mouseover Option: A
- Selected Option: ${JSON.stringify(selectedOptions)}
- Mouseover Option: ${targetOption}
<spz-selector layout="container" multiple @mouseover="mouseover-render.rerender(data=event);">
<div option="A" name="A" selected>A</div>
<div option="B" name="B">B</div>
<div option="C" name="C">C</div>
<div option="D" name="D">D</div>
<div option="E" name="E">E</div>
</spz-selector>
<spz-render layout="container" manual id="mouseover-render">
<ul>
<li>Selected Option: <span>["A"]</span></li>
<li>Mouseover Option: <span>A</span></li>
</ul>
<template>
<ul>
<li>Selected Option: <span>${JSON.stringify(selectedOptions)}</span></li>
<li>Mouseover Option: <span>${targetOption}</span></li>
</ul>
</template>
</spz-render>
滚动到视口可见范围
跳转到“滚动到视口可见范围”选择按钮,切换选择中的选项,当当前选项不在视口时,滚到到视口可视范围。
A
B
C
D
E
<spz-selector layout="container" id="scroll-view">
<div scroll-container>
<div option="A" name="A" selected>A</div>
<div option="B" name="B">B</div>
<div option="C" name="C">C</div>
<div option="D" name="D">D</div>
<div option="E" name="E">E</div>
</div>
</spz-selector>
<div class="buttons">
<button @tap="scroll-view.toggle(option='A', value=true, isScrollIntoView=true)">A</button>
<button @tap="scroll-view.toggle(option='C', value=true, isScrollIntoView=true)">C</button>
<button @tap="scroll-view.toggle(option='D', value=true, isScrollIntoView=true)">D</button>
</div>
属性
跳转到“属性”属性名 | 说明 | 类型 | 默认值 | 是否必需 |
---|---|---|---|---|
multiple | 如果该属性存在,支持多选 | - | - | 否 |
record-state | 如果该属性存在,支持保存当前已选中的选项的记录,刷新当前页面后,选中的内容不变 | - | - | 否 |
scroll-container | 如果该属性配置在元素的子元素内,启用选中选项时将选项滚动到视口的可视范围 | - | - | 否 |
选项属性
跳转到“选项属性”属性名 | 说明 | 类型 | 默认值 | 是否必需 |
---|---|---|---|---|
option | 值 | string | Object | - | 是 |
name | 保存记录使用的值 | string | - | 否,除非配置了 record-state |
selected | 如果该属性存在,表示默认选中当前选项 | string | - | 否 |
方法
跳转到“方法”toggle
跳转到“toggle”参数名 | 说明 | 类型 | 是否必须 |
---|---|---|---|
option | 选项值 | string | 是 |
value | 是否选中指定的选项 | boolean | 是 |
isScrollIntoView | 是否要将当前选项滚动到可视范围内,仅仅启用了滚动到可视范围内的功能才生效 | boolean | 否 |
事件
跳转到“事件”event 对象数据
跳转到“event 对象数据”属性 | 说明 | 类型 |
---|---|---|
eventName | 当前触发的事件名称 | string |
targetOption | 当前操作的选项的值 | string |
targetOptionAsJson | 当前操作的选项的值(JSON 解析后) | null | Object |
selectedOptions | 当前选择的选项值 | Array |
select
跳转到“select”- 在单选情况下,当选项从未选中状态变为选中状态时该事件自动触发。
- 在多选情况下,当选项的选中状态变更时该事件自动触发。
mouseover
跳转到“mouseover”当鼠标滑进选项时该事件自动触发。
mouseout
跳转到“mouseout”当鼠标滑出选项时该事件自动触发。