Dropdown 下拉框
将数据放入到下拉框。
基础用法
Dropdown组件中可以放入DropdownItem组件
DropdownItem通过tag设置类型, 设置为s-link时,具有和Link 链接类似的API
item居中
通过 center可以设置DropdownItem文字居中
可滚动
Dropdown内置Scrollbar 滚动框组件, 当DropdownItems超过Dropdoown大小时, 会出现滚动条
设置其他子元素
在Dropdown内部不仅仅可以放DropdownItem元素, 合理设置子元素可以让下拉框更加漂亮
Dropdown API
Dropdown Props
| 属性名 | 说明 | 可选值 | 默认值 |
|---|---|---|---|
| trigger | 触发浮动元素显示的类型 | 'hover' | 'click' | 'foucs' | 'clickToOpen' | 'unset' | click |
| placement | 浮动元素的定位 | 'top' | 'left' | 'bottom' | 'right' | 'top-start' | 'left-start' | 'bottom-start' | 'right-start' | 'top-end' | 'left-end' | 'bottom-end' | 'right-end' | bottom |
| transition | 浮动元素出现/消失过渡 | String | vertical-scroll |
| openDelay | 浮动元素打开延时 | Number | 0 |
| closeDelay | 浮动元素关闭延时 | Number | 0 |
| disabled | 是否禁用浮动元素 | Boolean | false |
| offset | 浮动元素的偏移量 | Number | 5 |
| theme | 浮动元素的颜色主题 | String | light |
| closeOnClickBody | 是否在点击其他元素时关闭 | Boolean | false |
| openOnMounted | 是否在挂载时立即显示 | Boolean | false |
| teleported | 是否瞬移到body元素下 | Boolean | true |
| showArrow | 是否展示箭头 | Boolean | true |
| floatingClass | floating元素默认会嵌套一层div，设置这层div的类名 | String | --- |
| reference | 解耦模式下的引用元素 | Ref<MaybeElement> | --- |
| quickTrack | 是否开启快速跟踪，在解耦模式下若浮动元素跟不上引用元素的改变开启此项 | Boolean | false |
| scrollbarNoResize | 出现滚动条时，可滚动视口大小是否不再改变 | Boolean | false |
| scrollbarIsOutside | 出现滚动条时，滚动条是否显示在视口外面，一般在视口没有内边距时设置 | Boolean | false |
| center | DropdownItem是否居中 | Boolean | false |
| activeColor | DropdownItem活跃时的颜色 | String | --- |
| closeOnClickItem | 是否在点击DropdownItem时关闭下拉框 | Boolean | true |
| prefix | 暂时保留 | String[] | --- |
Dropdown Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| open | 浮动元素打开时的回调 | () => void |
| opened | 浮动元素打开后的回调 | () => void |
| close | 浮动元素关闭时的回调 | () => void |
| closed | 浮动元素关闭后的回调 | () => void |
| select | DropdownItem被选中时的回调 | (val:string, prefix?:string[]) => void |
Dropdown Slots
| 名称 | 说明 |
|---|---|
| reference | 下拉框引用元素 |
| default | 下拉框浮动元素 |
Dropdown Exposes
| 属性名 | 说明 | 类型 |
|---|---|---|
| close | 用于关闭浮动元素 | () => void |
| open | 用于打开浮动元素 | () => void |
| toggle | 前两者自动选择其一 | () => void |
DropdownItem API
DropdownItem Props
| 属性名 | 说明 | 可选值 | 默认值 |
|---|---|---|---|
| suffixIcon | 后缀图标 | String | --- |
| prefixIcon | 前缀图标 | String | --- |
| label | 文本 | String | --- |
| value | DropdownItem的select回调的参数， Dropdown的select回调的第一参数 | String | --- |
| closeOnClick | 是否点击此DropdownItem时关闭下拉框， 优先级比下拉框的同名选项高 | Boolean | true |
| isActive | 是否是活跃状态 | Boolean | false |
| disabled | 是否是禁用状态 | Boolean | false |
| tag | 组件的呈现类型 | div s-link | div |
| href | 当tag为s-link时，需要跳转到的目标url | String | --- |
| jumpMethod | 当tag为s-link时，跳转方式 | 'push' | 'replace' | 'newView' | push |
DropdownItem Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| select | 被选中时触发 | (value:string) => void |
| click | 被选中时触发 | () => void |
DropdownItem Slots
| 名称 | 说明 |
|---|---|
| default | 默认槽 |
