187 lines
3.5 KiB
Markdown
187 lines
3.5 KiB
Markdown
::: anchor
|
|
:::
|
|
|
|
::: title 基本介绍
|
|
:::
|
|
|
|
::: describe 当页面上的操作命令过多时，用此组件可以收纳操作元素。
|
|
:::
|
|
|
|
::: title 基础使用
|
|
:::
|
|
|
|
::: demo
|
|
|
|
<template>
|
|
<lay-dropdown>
|
|
<lay-button type="primary">下拉菜单</lay-button>
|
|
<template #content>
|
|
<lay-dropdown-menu>
|
|
<lay-dropdown-menu-item>选项一</lay-dropdown-menu-item>
|
|
<lay-dropdown-menu-item>选项二</lay-dropdown-menu-item>
|
|
<lay-dropdown-menu-item>选项三</lay-dropdown-menu-item>
|
|
</lay-dropdown-menu>
|
|
</template>
|
|
</lay-dropdown>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref } from 'vue'
|
|
|
|
export default {
|
|
setup() {
|
|
|
|
return {
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
:::
|
|
|
|
::: title 触发方式
|
|
:::
|
|
|
|
::: demo
|
|
|
|
<template>
|
|
<lay-dropdown trigger="hover">
|
|
<lay-button>Hover 触发</lay-button>
|
|
<template #content>
|
|
<lay-dropdown-menu>
|
|
<lay-dropdown-menu-item>选项一</lay-dropdown-menu-item>
|
|
<lay-dropdown-menu-item>选项二</lay-dropdown-menu-item>
|
|
<lay-dropdown-menu-item>选项三</lay-dropdown-menu-item>
|
|
</lay-dropdown-menu>
|
|
</template>
|
|
</lay-dropdown>
|
|
|
|
<lay-dropdown>
|
|
<lay-button>Click 触发</lay-button>
|
|
<template #content>
|
|
<lay-dropdown-menu>
|
|
<lay-dropdown-menu-item>选项一</lay-dropdown-menu-item>
|
|
<lay-dropdown-menu-item>选项二</lay-dropdown-menu-item>
|
|
<lay-dropdown-menu-item>选项三</lay-dropdown-menu-item>
|
|
</lay-dropdown-menu>
|
|
</template>
|
|
</lay-dropdown>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref } from 'vue'
|
|
|
|
export default {
|
|
setup() {
|
|
|
|
return {
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
:::
|
|
::: title 禁用弹出
|
|
:::
|
|
|
|
::: demo
|
|
|
|
<template>
|
|
<lay-dropdown disabled>
|
|
<lay-button type="primary" >禁用弹出</lay-button>
|
|
<template #content>
|
|
<lay-dropdown-menu>
|
|
<lay-dropdown-menu-item>选项一</lay-dropdown-menu-item>
|
|
<lay-dropdown-menu-item>选项二</lay-dropdown-menu-item>
|
|
<lay-dropdown-menu-item>选项三</lay-dropdown-menu-item>
|
|
</lay-dropdown-menu>
|
|
</template>
|
|
</lay-dropdown>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref } from 'vue'
|
|
|
|
export default {
|
|
setup() {
|
|
|
|
return {
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
:::
|
|
::: title 事件处理
|
|
:::
|
|
|
|
::: demo
|
|
|
|
<template>
|
|
<lay-dropdown @open="stat='开启'" @hide="stat='关闭'">
|
|
<lay-button type="primary" >当前状态:{{stat}}</lay-button>
|
|
<template #content>
|
|
<lay-dropdown-menu>
|
|
<lay-dropdown-menu-item>选项一</lay-dropdown-menu-item>
|
|
<lay-dropdown-menu-item>选项二</lay-dropdown-menu-item>
|
|
<lay-dropdown-menu-item>选项三</lay-dropdown-menu-item>
|
|
</lay-dropdown-menu>
|
|
</template>
|
|
</lay-dropdown>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref } from 'vue'
|
|
|
|
export default {
|
|
setup() {
|
|
const stat=ref("关闭")
|
|
return {
|
|
stat
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
:::
|
|
|
|
::: title Dropdown 属性
|
|
:::
|
|
|
|
::: table
|
|
|
|
| 属性 | 描述 | 可选值 |
|
|
| ------- | -------- | --------------- |
|
|
| trigger | 触发方式 | `click` `hover` |
|
|
| disabled | 是否禁用触发 | `true` `false` |
|
|
|
|
:::
|
|
|
|
::: title Dropdown 插槽
|
|
:::
|
|
|
|
::: table
|
|
|
|
| 插槽 | 描述 | 可选值 |
|
|
| ------- | -------- | ------ |
|
|
| content | 下拉内容 | -- |
|
|
|
|
:::
|
|
|
|
|
|
::: title Dropdown 事件
|
|
:::
|
|
|
|
::: table
|
|
|
|
| 插槽 | 描述 | 参数 |
|
|
| ------- | -------- | ------ |
|
|
| hide | 隐藏下拉内容后触发 | -- |
|
|
| open | 显示下拉内容后触发 | -- |
|
|
|
|
:::
|
|
|
|
::: previousNext dropdown
|
|
::: |