父級寬度自適應
1.父級限制最大寬度
2.子級豎著排放,每列的個數明確
3.父級的寬度跟隨子級元素的個數變化寬度
tips: 因為父級要設置"background-color"屬性,所以父級DIV必須要給明確的寬高,這就意味著純CSS自適應寬度無法做到(好吧,是我做不到)
HTML
<template><div class="apps"><div class="parent"><ulv-for="(item, index) in parentList":key="index"@mouseover="mouseoverParent(index)"@mouseout="mouseoutParent(index)"class="parent-ul"><li>觸摸條件-{{ item }}</li></ul><divclass="other-div"@mouseover="mouseoverOther()"@mouseout="mouseoutOther()"><ul v-for="(item, index) in mockContentList" :key="index"><li>內容-{{ item }}</li></ul></div></div></div>
</template>
data
parentList: [1, 2, 3, 4, 5], mockContentList: undefined,index: 0, // 緩存左側欄選擇的第幾項的indexwidth1: '120px',width2: