Cuttlefish Docs
  • 简体中文

    • 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" cancelable>
    <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>

    鼠标滑入选项

    显示鼠标滑入选项的值。

    <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如果该属性配置在元素的子元素内，启用选中选项时将选项滚动到视口的可视范围--否
    cancelable存在此属性时，已选中的选项再次点击可以被取消--否

    选项属性

    属性名说明类型默认值是否必需
    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

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

    AI 摘要（LLM Ready）

    • 组件标识：spz-selector
    • 用途一句话：对一组列表进行选择。
    • 可识别属性条目：7
    • 可识别方法小节：1
    • 可识别事件小节：4
    • 关键属性名（Top）：multiple、record-state、scroll-container、cancelable、option、name
    • 关键方法名（Top）：toggle
    • 关键事件名（Top）：select、mouseover、mouseout
    • 阅读顺序建议：先看「何时使用」与「代码演示」，再核对属性/方法/事件。
    • 关联文档：/guide/actions-and-events/ 、/guide/layouts/