chore: 拆分 dropdown 为 dropdown 与 dropdown-menu

This commit is contained in:
就眠儀式
2022-03-19 13:02:52 +08:00
parent d0f3b9dd70
commit d4b4afcc0e
13 changed files with 98 additions and 39 deletions

View File

@@ -16,9 +16,11 @@
<lay-dropdown>
<lay-button type="primary">下拉菜单</lay-button>
<template #content>
<lay-dropdown-item>选项一</lay-dropdown-item>
<lay-dropdown-item>选项</lay-dropdown-item>
<lay-dropdown-item>选项</lay-dropdown-item>
<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>
@@ -46,18 +48,22 @@ export default {
<lay-dropdown trigger="hover">
<lay-button>Hover 触发</lay-button>
<template #content>
<lay-dropdown-item>选项一</lay-dropdown-item>
<lay-dropdown-item>选项</lay-dropdown-item>
<lay-dropdown-item>选项</lay-dropdown-item>
<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>
&nbsp;&nbsp;
<lay-dropdown>
<lay-button>Click 触发</lay-button>
<template #content>
<lay-dropdown-item>选项一</lay-dropdown-item>
<lay-dropdown-item>选项</lay-dropdown-item>
<lay-dropdown-item>选项</lay-dropdown-item>
<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>

View File

@@ -98,6 +98,49 @@ export default {
:::
::: title 海量数据
:::
::: demo
<template>
<lay-select v-model="selected">
<lay-select-option value="1" label="学习"></lay-select-option>
<lay-select-option value="3" label="运动"></lay-select-option>
<lay-select-option value="1" label="学习"></lay-select-option>
<lay-select-option value="3" label="运动"></lay-select-option>
<lay-select-option value="1" label="学习"></lay-select-option>
<lay-select-option value="3" label="运动"></lay-select-option>
<lay-select-option value="1" label="学习"></lay-select-option>
<lay-select-option value="3" label="运动"></lay-select-option>
<lay-select-option value="1" label="学习"></lay-select-option>
<lay-select-option value="3" label="运动"></lay-select-option>
<lay-select-option value="1" label="学习"></lay-select-option>
<lay-select-option value="3" label="运动"></lay-select-option>
<lay-select-option value="1" label="学习"></lay-select-option>
<lay-select-option value="3" label="运动"></lay-select-option>
<lay-select-option value="1" label="学习"></lay-select-option>
<lay-select-option value="3" label="运动"></lay-select-option>
</lay-select>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const selected = ref('1')
return {
selected
}
}
}
</script>
:::
::: title 多选使用
:::