實作元件的佈局。
綁定監聽事件和銷毀監聽事件
#高度判斷和圖示的顯示與隱藏
外層盒子（限制高度）、折疊的圖示或文字（用來顯示和隱藏多餘的行）、插槽（挖個坑給搜尋行佔位）。
需要綁定一個resize事件。 resize事件是在視窗大小改變時就會觸發。 resize事件觸發我們就要重新計算盒子查詢項目的高度，判斷是否需要折疊或顯示。 mounted生命週期觸發計算組件實例高度。並計算查詢項高度。 resize事件要在元件銷毀前的生命週期中進行銷毀。不影響其他組件。
首先圖示盒子綁定狀態，用來顯示和隱藏。其次外層盒子需要設置一個高度臨界點，即多大高度時不折疊，超過了這個高度就折疊。盒子高度需要你計算，例如，你需要4行不折疊，需要算出四行的高度並加上圖示的高度。如果大於高度則顯示圖示、如果小於隱藏圖示。
<template>
<div class="fold_box">
<div
class="fold_box_over"
:
:class="{'fold_box_over_max': isOver}"
>
<div
ref="foldBoxMain"
class="fold_box_main"
>
<slot></slot>
</div>
<div
v-show="isOverChange"
class="fold_box_over_show"
>
<div
class="fold_box_over_btn"
@click="showOver"
>
<el-icon :class="{'fold_box_over_btn_rotate': !isOver}" :size="14">
<ArrowDown />
</el-icon>
</div>
</div>
</div>
</div>
</template><style lang="less" scoped>
.fold_box {
width: 100%;
.fold_box_over {
overflow: hidden;
position: relative;
transition: all 0.4s ease;
}
.fold_box_over_max {
height: 159px !important;
}
.fold_box_main {
width: 100%;
}
.fold_box_over_show {
height: 15px;
position: absolute;
width: 100%;
background-color: #fff;
bottom: 0;
left: 0;
}
.fold_box_over_btn {
width: 20px;
height: 15px;
cursor: pointer;
text-align: center;
line-height: 15px;
margin: 0 auto;
el-icon svg{
font-weight: bold;
transition: all 0.4s ease;
}
&:hover {
color: #00caab;
}
}
.fold_box_over_btn_rotate svg{
transform: rotate(180deg);
}
}
</style><script>
import { reactive, toRefs, ref,onMounted,onBeforeUnmount,getCurrentInstance } from "vue";
export default {
setup() {
const state = reactive({
boxWidth: 0,
mainHeight: 0,
isOver: false,
isOverChange: false
});
const { ctx } = getCurrentInstance()
const changeSize = () => {
let el = ctx.$el
state.boxWidth = el.offsetWidth
countMainHeight()
}
window.addEventListener('resize', changeSize)
const countMainHeight = () => {
if (ctx.$refs['foldBoxMain']) {
let el= ctx.$refs['foldBoxMain']
state.mainHeight = el.offsetHeight + 15
if (state.mainHeight > 129) {
state.isOverChange = true
state.isOver = true
} else {
state.isOverChange = false
state.isOver = false
}
}
}
onMounted(() => {
changeSize()
})
onBeforeUnmount(()=> {
window.removeEventListener('resize', changeSize)
})
const showOver = () => {
state.isOver = !state.isOver
}
return {
...toRefs(state),
changeSize,
countMainHeight,
showOver
};
},
};
</script><template>
<FoldBox ref="foldBox">
<div class="item" v-for="(item,index) in boxList" :key="index">{{item}}</div>
</FoldBox>
</template>
<script>
import { reactive, toRefs, ref } from "vue";
import FoldBox from './FoldBox.vue'
export default {
components:{
FoldBox
},
setup() {
const state = reactive({
boxList: [1,2,3,4,5]
});
return {
...toRefs(state),
};
},
};
</script>
<style scoped>
.item {
height: 30px;
margin: 6px;
background-color: skyblue;
}
</style>以上是vue3如何實現搜尋項目超過n行就折疊的詳細內容。更多資訊請關注PHP中文網其他相關文章！
