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-button>下拉菜单</lay-button>
<template #content>
<lay-dropdown-item>选项一</lay-dropdown-item>
<lay-dropdown-item>选项二</lay-dropdown-item>
<lay-dropdown-item>选项三</lay-dropdown-item>
</template>
</lay-dropdown>
</template>
@ -25,15 +28,21 @@ export default {
::: demo
<template>
<lay-dropdown>
<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>
</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>
</template>
</lay-dropdown>
</template>

44
docs/index.html
View File

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

2
src/css/layui.css
View File

@ -4225,8 +4225,6 @@ body .layui-table-tips .layui-layer-content {
.layui-menu li {
position: relative;
margin: 1px 0;
width: calc(100% + 1px);
line-height: 26px;
color: rgba(0, 0, 0, .8);
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 LayRate from './module/rate/index'
import LayDropdown from './module/dropdown/index'
import LayDropdownItem from './module/dropdownItem/index'
import LayTab from './module/tab/index'
import LayTabItem from './module/tabItem/index'
@ -92,6 +93,7 @@ const components: Record<string, IDefineComponent> = {
LayFormItem,
LayRate,
LayDropdown,
LayDropdownItem,
LayTab,
LayTabItem
}
@ -152,6 +154,7 @@ export {
LayFormItem,
LayRate,
LayDropdown,
LayDropdownItem,
LayTab,
LayTabItem,
install,

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

@ -1,8 +1,29 @@
<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>
<dl class="layui-anim layui-anim-upbit">
<slot name="content"></slot>
<ul class="layui-menu layui-dropdown-menu">
<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>
</div>
</template>
@ -10,14 +31,18 @@
<script setup name="LaySelect" lang="ts">
import { defineProps, ref } from 'vue'
const props =
const props = withDefaults(
defineProps<{
trigger?: string
}>()
}>(),
{
trigger: 'click',
}
)
const openState = ref(false)
const open = function() {
openState.value = !openState.value
const open = function () {
openState.value = !openState.value
}
</script>

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>