theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[新增] dropdown 组件 trigger 属性，支持 hover click 触发方式

Browse Source
This commit is contained in:
就眠仪式 2021-10-07 03:24:53 +08:00
parent ef543323c5
commit e92885eb9b
7 changed files with 84 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
docs/docs/zh-CN/components/dropdown.md
View File

@ -4,6 +4,9 @@
<lay-dropdown> <lay-dropdown>
<lay-button>下拉菜单</lay-button> <lay-button>下拉菜单</lay-button>
<template #content> <template #content>
<lay-dropdown-item>选项一</lay-dropdown-item>
<lay-dropdown-item>选项二</lay-dropdown-item>
<lay-dropdown-item>选项三</lay-dropdown-item>
</template> </template>
</lay-dropdown> </lay-dropdown>
</template> </template>
@ -25,15 +28,21 @@ export default {
::: demo ::: demo
<template> <template>
<lay-dropdown> <lay-dropdown trigger="hover">
<lay-button>Hover 触发</lay-button> <lay-button>Hover 触发</lay-button>
<template #content> <template #content>
<lay-dropdown-item>选项一</lay-dropdown-item>
<lay-dropdown-item>选项二</lay-dropdown-item>
<lay-dropdown-item>选项三</lay-dropdown-item>
</template> </template>
</lay-dropdown> </lay-dropdown>
&nbsp;&nbsp; &nbsp;&nbsp;
<lay-dropdown> <lay-dropdown>
<lay-button>Click 触发</lay-button> <lay-button>Click 触发</lay-button>
<template #content> <template #content>
<lay-dropdown-item>选项一</lay-dropdown-item>
<lay-dropdown-item>选项二</lay-dropdown-item>
<lay-dropdown-item>选项三</lay-dropdown-item>
</template> </template>
</lay-dropdown> </lay-dropdown>
</template> </template>

14
docs/index.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@ -8,16 +9,17 @@
<meta name="force-rendering" content="webkit" /> <meta name="force-rendering" content="webkit" />
<meta name="applicable-device" content="pc,mobile" /> <meta name="applicable-device" content="pc,mobile" />
<meta name="author" content="Jmys <jmys1992@gmail.com>" /> <meta name="author" content="Jmys <jmys1992@gmail.com>" />
<meta <meta name="keywords" content="element-pro,pro-components,admin,element-plus,components,vue,ui" />
name="keywords"
content="element-pro,pro-components,admin,element-plus,components,vue,ui"
/>
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<title></title> <title>Layui - Vue 开源前端 UI 框架</title>
<!--preload-links--> <!--preload-links-->
</head> </head>
<body> <body>
<div id="app"><!--app-html--></div> <div id="app">
<!--app-html-->
</div>
<script type="module" src="/src/entry-client.ts"></script> <script type="module" src="/src/entry-client.ts"></script>
</body> </body>
</html> </html>

2
src/css/layui.css
View File

@ -4225,8 +4225,6 @@ body .layui-table-tips .layui-layer-content {
.layui-menu li { .layui-menu li {
position: relative; position: relative;
margin: 1px 0;
width: calc(100% + 1px);
line-height: 26px; line-height: 26px;
color: rgba(0, 0, 0, .8); color: rgba(0, 0, 0, .8);
font-size: 14px; font-size: 14px;

3
src/index.ts
View File

@ -45,6 +45,7 @@ import LayEmpty from './module/empty/index'
import LayFormItem from './module/formItem/index' import LayFormItem from './module/formItem/index'
import LayRate from './module/rate/index' import LayRate from './module/rate/index'
import LayDropdown from './module/dropdown/index' import LayDropdown from './module/dropdown/index'
import LayDropdownItem from './module/dropdownItem/index'
import LayTab from './module/tab/index' import LayTab from './module/tab/index'
import LayTabItem from './module/tabItem/index' import LayTabItem from './module/tabItem/index'
@ -92,6 +93,7 @@ const components: Record<string, IDefineComponent> = {
LayFormItem, LayFormItem,
LayRate, LayRate,
LayDropdown, LayDropdown,
LayDropdownItem,
LayTab, LayTab,
LayTabItem LayTabItem
} }
@ -152,6 +154,7 @@ export {
LayFormItem, LayFormItem,
LayRate, LayRate,
LayDropdown, LayDropdown,
LayDropdownItem,
LayTab, LayTab,
LayTabItem, LayTabItem,
install, install,

31
src/module/dropdown/index.vue
View File

@ -1,8 +1,29 @@
<template> <template>
<div class="layui-dropdown" @click="open" :class="[openState?'layui-dropdown-up':'']"> <div
v-if="trigger === 'click'"
class="layui-dropdown"
@click="open"
:class="[openState ? 'layui-dropdown-up' : '']"
>
<slot></slot> <slot></slot>
<dl class="layui-anim layui-anim-upbit"> <dl class="layui-anim layui-anim-upbit">
<ul class="layui-menu layui-dropdown-menu">
<slot name="content"></slot> <slot name="content"></slot>
</ul>
</dl>
</div>
<div
v-if="trigger === 'hover'"
class="layui-dropdown"
@mouseenter="open"
@mouseleave="open"
:class="[openState ? 'layui-dropdown-up' : '']"
>
<slot></slot>
<dl class="layui-anim layui-anim-upbit">
<ul class="layui-menu layui-dropdown-menu">
<slot name="content"></slot>
</ul>
</dl> </dl>
</div> </div>
</template> </template>
@ -10,10 +31,14 @@
<script setup name="LaySelect" lang="ts"> <script setup name="LaySelect" lang="ts">
import { defineProps, ref } from 'vue' import { defineProps, ref } from 'vue'
const props = const props = withDefaults(
defineProps<{ defineProps<{
trigger?: string trigger?: string
}>() }>(),
{
trigger: 'click',
}
)
const openState = ref(false) const openState = ref(false)

9
src/module/dropdownItem/index.ts Normal file
View File

@ -0,0 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
Component.install = (app: App) => {
app.component(Component.name || 'LayDropdownItem', Component)
}
export default Component as IDefineComponent

8
src/module/dropdownItem/index.vue Normal file
View File

@ -0,0 +1,8 @@
<template>
<li><div class="layui-menu-body-title">
<slot></slot>
</div></li>
</template>
<script setup name="LayDropdownItem" lang="ts">
</script>