spz-dropdown 下拉列表
向下弹出的列表。
布局
跳转到“布局”何时使用
跳转到“何时使用”当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉列表。可在列表中进行选择，并执行相应的命令。
- 用于收罗一组命令操作。
代码演示
跳转到“代码演示”基本用法
跳转到“基本用法”最基本的用法，使用 open 方法来打开下拉列表，点击屏幕上非下拉列表的区域会自动隐藏下拉列表。
- 1st item
- 2nd item
- 3rd item
<button @tap="dropdown.open">Open dropdown</button>
<spz-dropdown id="dropdown" layout="nodisplay" overlay-style="top: 8px;">
<ul>
<li>1st item</li>
<li>2nd item</li>
<li>3rd item</li>
</ul>
</spz-dropdown>属性
跳转到“属性”| 属性名 | 说明 | 类型 | 默认值 | 是否必需 |
|---|---|---|---|---|
| placement | 列表弹出位置，可选：bottom, bottomLeft, bottomRight, top, topLeft, topRight |
string | bottomLeft |
否 |
| overlay-style | 下拉根元素的样式，仅支持 top 和 left |
CSSProperties | - | 否 |
方法
跳转到“方法”open
跳转到“open”打开下拉列表，不需要参数。
close
跳转到“close”隐藏下拉列表，不需要参数。
事件
跳转到“事件”dropdownOpen
跳转到“dropdownOpen”当打开下拉列表时自动触发该事件。
dropdownClose
跳转到“dropdownClose”当隐藏下拉列表时自动触发该事件。