feat(menu): 新增 title 插槽, 调整 子菜单 height 为 46px
This commit is contained in:
parent
5855bee3be
commit
991462af17
@ -2,9 +2,9 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-breadcrumb>
|
<lay-breadcrumb>
|
||||||
<lay-breadcrumb-item title="哈哈"></lay-breadcrumb-item>
|
<lay-breadcrumb-item title="工作空间"></lay-breadcrumb-item>
|
||||||
<lay-breadcrumb-item title="哈哈"></lay-breadcrumb-item>
|
<lay-breadcrumb-item title="控制台"></lay-breadcrumb-item>
|
||||||
<lay-breadcrumb-item title="哈哈"></lay-breadcrumb-item>
|
<lay-breadcrumb-item title="访问量"></lay-breadcrumb-item>
|
||||||
</lay-breadcrumb>
|
</lay-breadcrumb>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -26,9 +26,33 @@ export default {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-breadcrumb separator=">">
|
<lay-breadcrumb separator=">">
|
||||||
<lay-breadcrumb-item title="哈哈"></lay-breadcrumb-item>
|
<lay-breadcrumb-item title="热门音乐"></lay-breadcrumb-item>
|
||||||
<lay-breadcrumb-item title="哈哈"></lay-breadcrumb-item>
|
<lay-breadcrumb-item title="王杰"></lay-breadcrumb-item>
|
||||||
<lay-breadcrumb-item title="哈哈"></lay-breadcrumb-item>
|
<lay-breadcrumb-item title="谁明浪子心"></lay-breadcrumb-item>
|
||||||
|
</lay-breadcrumb>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: demo
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<lay-breadcrumb separator="-">
|
||||||
|
<lay-breadcrumb-item title="可口可乐"></lay-breadcrumb-item>
|
||||||
|
<lay-breadcrumb-item title="美年达"></lay-breadcrumb-item>
|
||||||
|
<lay-breadcrumb-item title="芬达"></lay-breadcrumb-item>
|
||||||
</lay-breadcrumb>
|
</lay-breadcrumb>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -29,7 +29,7 @@ export default {
|
|||||||
.grid-demo {
|
.grid-demo {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
border-radius: 4px;
|
border-radius: 2px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: #79C48C;
|
background-color: #79C48C;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
@ -65,7 +65,7 @@ export default {
|
|||||||
.grid-demo {
|
.grid-demo {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
border-radius: 4px;
|
border-radius: 2px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: #79C48C;
|
background-color: #79C48C;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
@ -31,7 +31,9 @@ export default {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-menu selectedKey="5" tree>
|
<lay-menu selectedKey="5" tree>
|
||||||
<lay-menu-item title="首页" id="1"></lay-menu-item>
|
<lay-menu-item title="首页" id="1">
|
||||||
|
<template v-slot:title> 哈哈哈 </template>
|
||||||
|
</lay-menu-item>
|
||||||
<lay-menu-item title="用户" id="2"></lay-menu-item>
|
<lay-menu-item title="用户" id="2"></lay-menu-item>
|
||||||
<lay-menu-item title="角色" id="3"></lay-menu-item>
|
<lay-menu-item title="角色" id="3"></lay-menu-item>
|
||||||
<lay-menu-item title="目录" id="7">
|
<lay-menu-item title="目录" id="7">
|
||||||
|
@ -2,6 +2,10 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-timeline>
|
<lay-timeline>
|
||||||
|
<lay-timeline-item title="0.1.1">
|
||||||
|
[新增] tree 树,支持 node-click,selectKeys 等<br>
|
||||||
|
[新增] table 表格,提供 columns datasource page 分页<br>
|
||||||
|
</lay-timeline-item>
|
||||||
<lay-timeline-item title="0.1.0">
|
<lay-timeline-item title="0.1.0">
|
||||||
[新增] tree 树,支持 node-click,selectKeys 等<br>
|
[新增] tree 树,支持 node-click,selectKeys 等<br>
|
||||||
[新增] table 表格,提供 columns datasource page 分页<br>
|
[新增] table 表格,提供 columns datasource page 分页<br>
|
||||||
|
@ -30,6 +30,9 @@
|
|||||||
反馈
|
反馈
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
<li class="layui-nav-item">
|
||||||
|
<a href="javascript:void(0)"> 0.1.1 </a>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</lay-header>
|
</lay-header>
|
||||||
<lay-side>
|
<lay-side>
|
||||||
|
@ -129,9 +129,6 @@ table td {
|
|||||||
padding: 0 10px; /*内边距*/
|
padding: 0 10px; /*内边距*/
|
||||||
}
|
}
|
||||||
|
|
||||||
table tr:hover {
|
|
||||||
background: #efefef;
|
|
||||||
}
|
|
||||||
table th {
|
table th {
|
||||||
white-space: nowrap; /*表头内容强制在一行显示*/
|
white-space: nowrap; /*表头内容强制在一行显示*/
|
||||||
}
|
}
|
||||||
|
@ -4802,8 +4802,8 @@ body .layui-table-tips .layui-layer-content {
|
|||||||
|
|
||||||
.layui-nav-tree .layui-nav-item a {
|
.layui-nav-tree .layui-nav-item a {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 40px;
|
height: 46px;
|
||||||
line-height: 40px;
|
line-height: 46px;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
@ -1,16 +1,22 @@
|
|||||||
<template>
|
<template>
|
||||||
<dd :class="[selectKey === id ? 'layui-this' : '']" @click="selectHandle()">
|
<dd :class="[selectKey === id ? 'layui-this' : '']" @click="selectHandle()">
|
||||||
<a href="javascript:void(0)">{{ title }}</a>
|
<a href="javascript:void(0)">
|
||||||
|
<slot v-if="slots.title" name="title"></slot>
|
||||||
|
<span v-else> {{ title }} </span>
|
||||||
|
</a>
|
||||||
</dd>
|
</dd>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LayMenuChildItem" lang="ts">
|
<script setup name="LayMenuChildItem" lang="ts">
|
||||||
import { defineProps, inject, Ref } from 'vue'
|
import { defineProps, inject, Ref, useSlots } from 'vue'
|
||||||
|
|
||||||
const props = defineProps<{
|
const slots = useSlots()
|
||||||
|
|
||||||
|
const props =
|
||||||
|
defineProps<{
|
||||||
id: string
|
id: string
|
||||||
title: string
|
title: string
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const selectKey: Ref<string> = inject('selectKey') as Ref<string>
|
const selectKey: Ref<string> = inject('selectKey') as Ref<string>
|
||||||
|
|
||||||
|
@ -5,7 +5,8 @@
|
|||||||
:class="[isOpen && isTree ? 'layui-nav-itemed' : '']"
|
:class="[isOpen && isTree ? 'layui-nav-itemed' : '']"
|
||||||
>
|
>
|
||||||
<a href="javascript:void(0)" @click="openHandle">
|
<a href="javascript:void(0)" @click="openHandle">
|
||||||
{{ title }}
|
<slot v-if="slots.title" name="title"></slot>
|
||||||
|
<span v-else>{{ title }}</span>
|
||||||
<i class="layui-icon layui-icon-down layui-nav-more" />
|
<i class="layui-icon layui-icon-down layui-nav-more" />
|
||||||
</a>
|
</a>
|
||||||
<dl
|
<dl
|
||||||
@ -25,7 +26,10 @@
|
|||||||
:class="[selectKey === id ? 'layui-this' : '']"
|
:class="[selectKey === id ? 'layui-this' : '']"
|
||||||
@click="selectHandle()"
|
@click="selectHandle()"
|
||||||
>
|
>
|
||||||
<a href="javascript:void(0)">{{ title }} </a>
|
<a href="javascript:void(0)">
|
||||||
|
<slot v-if="slots.title" name="title"></slot>
|
||||||
|
<span v-else> {{ title }} </span>
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user