[新增] dropdown 下拉菜单
This commit is contained in:
就眠仪式
parent
989aa56af0
commit
ef543323c5
@ -1,7 +1,41 @@
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-dropdown></lay-dropdown>
|
||||
<lay-dropdown>
|
||||
<lay-button>下拉菜单</lay-button>
|
||||
<template #content>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-dropdown>
|
||||
<lay-button>Hover 触发</lay-button>
|
||||
<template #content>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
|
||||
<lay-dropdown>
|
||||
<lay-button>Click 触发</lay-button>
|
||||
<template #content>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
0
docs/docs/zh-CN/components/iconPicker.md
Normal file
0
docs/docs/zh-CN/components/iconPicker.md
Normal file
@ -243,6 +243,11 @@ export default {
|
||||
title: '选项卡',
|
||||
subTitle: 'tab',
|
||||
path: '/zh-CN/components/tab',
|
||||
},{
|
||||
id: 29,
|
||||
title: '图标选择',
|
||||
subTitle: 'iconPicker',
|
||||
path: '/zh-CN/components/iconPicker',
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@ const zhCN = [
|
||||
path: '/zh-CN/guide/install',
|
||||
component: () => import('../../docs/zh-CN/guide/install.md'),
|
||||
meta: { title: '安装' },
|
||||
}, {
|
||||
}, {
|
||||
path: '/zh-CN/guide/changelog',
|
||||
component: () => import('../../docs/zh-CN/guide/changelog.md'),
|
||||
meta: { title: '更新' },
|
||||
@ -33,7 +33,7 @@ const zhCN = [
|
||||
path: '/zh-CN/components/layout',
|
||||
component: () => import('../../docs/zh-CN/components/layout.md'),
|
||||
meta: { title: '布局' },
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/color',
|
||||
component: () => import('../../docs/zh-CN/components/color.md'),
|
||||
@ -60,7 +60,7 @@ const zhCN = [
|
||||
path: '/zh-CN/components/panel',
|
||||
component: () => import('../../docs/zh-CN/components/panel.md'),
|
||||
meta: { title: '面板' },
|
||||
},{
|
||||
}, {
|
||||
path: '/zh-CN/components/animation',
|
||||
component: () => import('../../docs/zh-CN/components/animation.md'),
|
||||
meta: { title: '动画' },
|
||||
@ -136,14 +136,18 @@ const zhCN = [
|
||||
path: '/zh-CN/components/rate',
|
||||
component: () => import('../../docs/zh-CN/components/rate.md'),
|
||||
meta: { title: '评分' },
|
||||
},{
|
||||
}, {
|
||||
path: '/zh-CN/components/dropdown',
|
||||
component: () => import('../../docs/zh-CN/components/dropdown.md'),
|
||||
meta: { title: '下拉' },
|
||||
},{
|
||||
}, {
|
||||
path: '/zh-CN/components/tab',
|
||||
component: () => import('../../docs/zh-CN/components/tab.md'),
|
||||
meta: { title: '选项卡' },
|
||||
}, {
|
||||
path: '/zh-CN/components/iconPicker',
|
||||
component: () => import('../../docs/zh-CN/components/iconPicker.md'),
|
||||
meta: { title: '图标选择' },
|
||||
}
|
||||
],
|
||||
},
|
||||
|
||||
@ -127,16 +127,6 @@ img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 1.25em;
|
||||
}
|
||||
|
||||
li > ul,
|
||||
li > ol {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -1,63 +0,0 @@
|
||||
.layui-avatar {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #000000d9;
|
||||
font-size: 14px;
|
||||
font-variant: tabular-nums;
|
||||
line-height: 1.5715;
|
||||
list-style: none;
|
||||
font-feature-settings: tnum;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background: #ccc;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.layui-avatar.layui-avatar-radius {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.layui-avatar.layui-avatar-sm {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.layui-avatar.layui-avatar-lg {
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
.layui-avatar.layui-avatar-xs {
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.layui-empty{
|
||||
margin: 0 8px;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.layui-empty-image{
|
||||
height: 100px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.layui-empty-image img {
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.layui-empty-description{
|
||||
margin: 0;
|
||||
}
|
||||
@ -4404,27 +4404,28 @@ body .layui-table-tips .layui-layer-content {
|
||||
}
|
||||
|
||||
.layui-dropdown {
|
||||
position: absolute;
|
||||
left: -999999px;
|
||||
top: -999999px;
|
||||
z-index: 66666666;
|
||||
margin: 5px 0;
|
||||
min-width: 100px
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.layui-dropdown:before {
|
||||
content: "";
|
||||
.layui-dropdown dl {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
left: 0;
|
||||
top: -6px
|
||||
top: 42px;
|
||||
padding: 5px 0;
|
||||
z-index: 899;
|
||||
min-width: 100%;
|
||||
border: 1px solid #eee;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box
|
||||
}
|
||||
|
||||
.layui-dropdown .layui-none {
|
||||
line-height: 26px;
|
||||
color: #999;
|
||||
text-align: center
|
||||
.layui-dropdown-up dl {
|
||||
display: block
|
||||
}
|
||||
|
||||
.layui-iconpicker {
|
||||
@ -6293,6 +6294,70 @@ body .layui-util-face .layui-layer-content {
|
||||
color: #999
|
||||
}
|
||||
|
||||
.layui-avatar {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #000000d9;
|
||||
font-size: 14px;
|
||||
font-variant: tabular-nums;
|
||||
line-height: 1.5715;
|
||||
list-style: none;
|
||||
font-feature-settings: tnum;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background: #ccc;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.layui-avatar.layui-avatar-radius {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.layui-avatar.layui-avatar-sm {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.layui-avatar.layui-avatar-lg {
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
.layui-avatar.layui-avatar-xs {
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.layui-empty{
|
||||
margin: 0 8px;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.layui-empty-image{
|
||||
height: 100px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.layui-empty-image img {
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.layui-empty-description{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.layui-anim {
|
||||
-webkit-animation-duration: .3s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
|
||||
@ -2,7 +2,6 @@ import type { App } from 'vue'
|
||||
import type { IDefineComponent, InstallOptions } from './module/type/index'
|
||||
|
||||
import "./css/layui.css"
|
||||
import "./css/layui-vue.css"
|
||||
import LayAvatar from './module/avatar/index'
|
||||
import LayRadio from './module/radio/index'
|
||||
import LayButton from './module/button/index'
|
||||
|
||||
@ -1,7 +1,23 @@
|
||||
<template>
|
||||
<div>下拉菜单</div>
|
||||
<div class="layui-dropdown" @click="open" :class="[openState?'layui-dropdown-up':'']">
|
||||
<slot></slot>
|
||||
<dl class="layui-anim layui-anim-upbit">
|
||||
<slot name="content"></slot>
|
||||
</dl>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LayDropdown" lang="ts">
|
||||
<script setup name="LaySelect" lang="ts">
|
||||
import { defineProps, ref } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
trigger?: string
|
||||
}>()
|
||||
|
||||
const openState = ref(false)
|
||||
|
||||
const open = function() {
|
||||
openState.value = !openState.value
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user