⏪: 删除提交的手风琴案例
This commit is contained in:
		
							parent
							
								
									62ba847924
								
							
						
					
					
						commit
						1531321951
					
				@ -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;
 | 
			
		||||
 | 
			
		||||
@ -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);
 | 
			
		||||
 | 
			
		||||
@ -7,4 +7,4 @@ import Vue from "vue";
 | 
			
		||||
export default {
 | 
			
		||||
  name: "App",
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
</script>
 | 
			
		||||
@ -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 属性
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -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"
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user