Fighting DesignTrigger 触发器
需要触发才能实现的下拉菜单
基本使用
trigger 属性可配置不同的触发方式，默认插槽展示触发器，content 插槽插入弹出内容
开启
多层嵌套
也可以多层嵌套实现
click 触发
开启
自定义动画时长
enter-duration 和 leave-duration 属性可自定义动画时长
click 触发
开启
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
spacing | 触发器和内容之间的间距 | string / number | —— | —— |
disabled | 是否禁用 | boolean | —— | false |
trigger | 触发方式 | TriggerTrigger | hover click | hover |
width | 自定义宽度 | string / number | —— | —— |
arrow | 是否带有箭头 | boolean | —— | false |
enter-duration | 弹出动画持续时间 | number | —— | —— |
leave-duration | 关闭动画持续时间 | number | —— | —— |
on-change | 弹窗状态改变时触发的回调 | HandleChange | —— | —— |
on-open | 弹窗状态打开时触发的回调 | HandleChange | —— | —— |
on-close | 弹窗状态关闭时触发的回调 | HandleChange | —— | —— |
Slots
| 名称 | 说明 |
|---|---|
default | 触发器内容 |
content | 弹出内容 |
Methods
| 参数 | 说明 |
|---|---|
close | 关闭触发器 |
Interface
组件导出以下类型定义：
ts
import type { TriggerInstance, TriggerProps, TriggerTrigger } from 'fighting-design'TriggerTrigger
ts
type TriggerTrigger = 'hover' | 'click'