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

🐛(component): [popup-menu]修复悬浮菜单样式

Browse Source
This commit is contained in:
sight
2022-07-01 18:03:42 +08:00
parent 5270ba05d1
commit afda4aa077
4 changed files with 229 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
package/document-component/src/document/zh-CN/components/menu.md
View File

@@ -423,6 +423,168 @@ export default {
:::
::: title 悬浮菜单
:::
::: demo
<template>
<lay-switch v-model="collapse20"></lay-switch>
<br/>
<br/>
<lay-menu v-model:selectedKey="selectedKey20" v-model:tree="isTree20" v-model:openKeys="openKeys20" :collapse="collapse20">
<lay-menu-item id="1">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-menu-item id="2">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-sub-menu title="目录" id="3">
<template #icon><lay-icon type="layui-icon-home"></lay-icon></template>
<template #title>首页</template>
<lay-menu-item id="4">
<template #title>首页</template>
</lay-menu-item>
<lay-menu-item id="5">
<template #title>菜单一</template>
</lay-menu-item>
<lay-sub-menu id="6">
<template #title>首页</template>
<lay-menu-item id="7">
<template #title>首页</template>
</lay-menu-item>
<lay-menu-item id="8">
<template #title>首页</template>
</lay-menu-item>
<lay-sub-menu id="9">
<template #title>首页</template>
<lay-menu-item id="10">
<template #title>首页</template>
</lay-menu-item>
<lay-menu-item id="11">
<template #title>首页</template>
</lay-menu-item>
<lay-menu-item id="12">
<template #title>首页</template>
</lay-menu-item>
</lay-sub-menu>
</lay-sub-menu>
</lay-sub-menu>
<lay-sub-menu title="目录" id="13">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
<lay-menu-item id="14">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-menu-item id="15">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-sub-menu id="16">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
<lay-menu-item id="17">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-menu-item id="18">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-sub-menu id="19">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
<lay-menu-item id="20">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-menu-item id="21">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-menu-item id="22">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
</lay-sub-menu>
</lay-sub-menu>
</lay-sub-menu>
</lay-menu>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const selectedKey20 = ref("5")
const openKeys20 = ref(["7"])
const collapse20 = ref(true)
const isTree20 = ref(true)
return {
selectedKey,
openKeys6,
colapse,
isTree
}
}
}
</script>
:::
::: title 过渡动画
:::