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
<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 -
参数名 说明 类型 是否必须
option 选项值 string
value 是否选中指定的选项 boolean
isScrollIntoView 是否要将当前选项滚动到可视范围内,仅仅启用了滚动到可视范围内的功能才生效 boolean
属性 说明 类型
eventName 当前触发的事件名称 string
targetOption 当前操作的选项的值 string
targetOptionAsJson 当前操作的选项的值(JSON 解析后) null | Object
selectedOptions 当前选择的选项值 Array
  • 在单选情况下,当选项从未选中状态变为选中状态时该事件自动触发。
  • 在多选情况下,当选项的选中状态变更时该事件自动触发。

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

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

本页目录