⏪: 删除提交的手风琴案例
This commit is contained in:
parent
62ba847924
commit
1531321951
@ -75,11 +75,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.layui-iconpicker-list li {
|
.layui-iconpicker-list li {
|
||||||
display: inline-block;
|
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
|
display: inline-block;
|
||||||
width: 60px;
|
width: 60px;
|
||||||
margin: 0 5px 5px 0;
|
margin: 0 5px 5px 0;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
|
overflow: hidden;
|
||||||
border: 1px solid #eee;
|
border: 1px solid #eee;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -74,16 +74,21 @@ const close = function (index: number, id: any) {
|
|||||||
}
|
}
|
||||||
childrens.value.splice(index, 1);
|
childrens.value.splice(index, 1);
|
||||||
if (active.value === id) {
|
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 : "");
|
change(nextChildren && nextChildren.props ? nextChildren.props.id : "");
|
||||||
}
|
}
|
||||||
emit("close", id);
|
emit("close", id);
|
||||||
};
|
};
|
||||||
|
|
||||||
watch(slotsChange, function () {
|
watch(
|
||||||
|
slotsChange,
|
||||||
|
function () {
|
||||||
childrens.value = [];
|
childrens.value = [];
|
||||||
setItemInstanceBySlot((slot.default && slot.default()) as VNode[]);
|
setItemInstanceBySlot((slot.default && slot.default()) as VNode[]);
|
||||||
}, { immediate: true });
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
);
|
||||||
|
|
||||||
provide("active", active);
|
provide("active", active);
|
||||||
provide("slotsChange", slotsChange);
|
provide("slotsChange", slotsChange);
|
||||||
|
@ -542,151 +542,6 @@ export default {
|
|||||||
</script>
|
</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 属性
|
::: title Menu 属性
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
@ -43,7 +43,7 @@
|
|||||||
rel="nofollow"
|
rel="nofollow"
|
||||||
class="site-star"
|
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>
|
||||||
<a
|
<a
|
||||||
href="https://gitee.com/layui-vue"
|
href="https://gitee.com/layui-vue"
|
||||||
|
Loading…
x
Reference in New Issue
Block a user