: 删除提交的手风琴案例

This commit is contained in:
就眠儀式 2022-05-25 19:52:41 +08:00
parent 62ba847924
commit 1531321951
7 changed files with 14 additions and 153 deletions

View File

@ -75,11 +75,12 @@
}
.layui-iconpicker-list li {
display: inline-block;
vertical-align: top;
display: inline-block;
width: 60px;
margin: 0 5px 5px 0;
padding: 5px;
overflow: hidden;
border: 1px solid #eee;
border-radius: 2px;
cursor: pointer;

View File

@ -74,16 +74,21 @@ const close = function (index: number, id: any) {
}
childrens.value.splice(index, 1);
if (active.value === id) {
const nextChildren = childrens.value[index === childrens.value.length ? 0 : index];
const nextChildren =
childrens.value[index === childrens.value.length ? 0 : index];
change(nextChildren && nextChildren.props ? nextChildren.props.id : "");
}
emit("close", id);
};
watch(slotsChange, function () {
childrens.value = [];
setItemInstanceBySlot((slot.default && slot.default()) as VNode[]);
}, { immediate: true });
watch(
slotsChange,
function () {
childrens.value = [];
setItemInstanceBySlot((slot.default && slot.default()) as VNode[]);
},
{ immediate: true }
);
provide("active", active);
provide("slotsChange", slotsChange);

View File

@ -7,4 +7,4 @@ import Vue from "vue";
export default {
name: "App",
};
</script>
</script>

View File

@ -542,151 +542,6 @@ export default {
</script>
:::
::: title 手风琴模式
:::
::: demo
<template>
<br />
<br />
<lay-switch v-model="collapse"></lay-switch>
<br />
<br />
<lay-menu :selectedKey="selectedKey2" @changeSelectedKey="changeSelectedKey" @changeOpenKeys="changeOpenKeys"
v-model:openKeys="openKeys2" :tree="true" :childSpacing="true" :collapse="collapse" >
<lay-sub-menu id="1" @click.stop="changekey('1')" @mousedown.stop="change">
<template #icon>
<lay-icon type="layui-icon-home" ></lay-icon>
</template>
<template #title>
首页1
</template>
<lay-menu-item id="10" @click="">首页</lay-menu-item>
<lay-menu-item id="11" @click="">首页</lay-menu-item>
<lay-sub-menu id="20" @click.stop="changekey('20')" @mousedown.stop="change">
<template #title>
首页20
</template>
<lay-menu-item id="21">首页</lay-menu-item>
<lay-menu-item id="22">首页</lay-menu-item>
<lay-sub-menu id="220" @click.stop="changekey('220')" @mousedown.stop="change">
<template #title>
首页220
</template>
<lay-menu-item id="221">首页</lay-menu-item>
<lay-menu-item id="222">首页</lay-menu-item>
<lay-menu-item id="223">首页</lay-menu-item>
</lay-sub-menu>
<lay-sub-menu id="230" @click.stop="changekey('230')" @mousedown.stop="change">
<template #title>
首页230
</template>
<lay-menu-item id="231">首页</lay-menu-item>
<lay-menu-item id="232">首页</lay-menu-item>
<lay-menu-item id="233">首页</lay-menu-item>
</lay-sub-menu>
</lay-sub-menu>
<lay-sub-menu id="30" @click.stop="changekey('30')" @mousedown.stop="change">
<template #title>
首页30
</template>
<lay-menu-item id="31">首页</lay-menu-item>
<lay-menu-item id="32">首页</lay-menu-item>
<lay-menu-item id="33">首页</lay-menu-item>
</lay-sub-menu>
</lay-sub-menu>
<lay-sub-menu id="7" @mousedown.stop="change" @click.stop="changekey('7')">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页2
</template>
<lay-menu-item id="8">首页</lay-menu-item>
<lay-menu-item id="9">首页</lay-menu-item>
</lay-sub-menu>
<lay-sub-menu id="3" @mousedown.stop="change" @click.stop="changekey('3')">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页3
</template>
<lay-menu-item id="4">首页</lay-menu-item>
<lay-menu-item id="5">首页</lay-menu-item>
</lay-sub-menu>
</lay-menu>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const openKeys2 = ref([''])
const selectedKey2 = ref("10")
let index
let open
let idx
const map = new Map()
const changeSelectedKey = (val) => {
selectedKey2.value = val;
}
const changeOpenKeys = (val) => {
setTimeout(function () {
if (collapse.value == false) {
if (index != undefined) map.set(index, idx)
open = val.includes(idx)
// console.log(open)
if (open == false) {
map.delete(index)
openKeys2.value = Array.from(map.values())
} else {
openKeys2.value = Array.from(map.values())
}
}
}, 150);
}
const changekey = (id) => {
idx = id
}
const change = (val) => {
//console.log(val)
let lis = Array.from(val.path).filter(function (v) {
//@ts-ignore
if (v.tagName == 'DL') {
return v
}
})
index = lis.length
}
const collapse = ref(false)
return {
openKeys2,
collapse,
selectedKey2,
changeSelectedKey,
changeOpenKeys,
changekey,
change
}
}
}
</script>
:::
::: title Menu 属性
:::

View File

@ -43,7 +43,7 @@
rel="nofollow"
class="site-star"
>
<i class="layui-icon"></i> Star <cite id="getStars">900</cite>
<i class="layui-icon"></i> Star <cite id="getStars">973</cite>
</a>
<a
href="https://gitee.com/layui-vue"