spz-selector 选择器

对一组列表进行选择。

布局

何时使用

需要在选择以后，将当前选中的内容滚动到可视区域。
需要将选择的记录保存，刷新页面后也不会回到初始值。

代码演示

基本用法

最基础的用法，默认选择第一个选项。

<spz-selector layout="container">
  <div option="A" selected>A</div>
  <div option="B">B</div>
  <div option="C">C</div>
</spz-selector>

保持选中状态

刷新页面后还保持上一次选中的状态。

<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>

鼠标滑入选项

显示鼠标滑入选项的值。

Selected Option: ["A"]
Mouseover Option: A

<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>

滚动到视口可见范围

选择按钮，切换选择中的选项，当当前选项不在视口时，滚到到视口可视范围。

<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

参数名	说明	类型	是否必须
option	选项值	string	是
value	是否选中指定的选项	boolean	是
isScrollIntoView	是否要将当前选项滚动到可视范围内，仅仅启用了滚动到可视范围内的功能才生效	boolean	否

事件

event 对象数据

属性	说明	类型
eventName	当前触发的事件名称	string
targetOption	当前操作的选项的值	string
targetOptionAsJson	当前操作的选项的值（JSON 解析后）	null \| Object
selectedOptions	当前选择的选项值	Array

select

在单选情况下，当选项从未选中状态变为选中状态时该事件自动触发。
在多选情况下，当选项的选中状态变更时该事件自动触发。

mouseover

当鼠标滑进选项时该事件自动触发。

mouseout

当鼠标滑出选项时该事件自动触发。