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

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

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>

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>