Idea pelaksanaan
Melaksanakan reka letak komponen.
Ikat acara mendengar dan musnahkan acara mendengar
Pertimbangan ketinggian dan paparan serta penyembunyian ikon
Melaksanakan susun atur komponen
Kotak luar (ketinggian had), ikon atau teks terlipat (digunakan untuk menunjukkan dan menyembunyikan baris berlebihan), slot (menggali lubang untuk menduduki baris carian).
Ikatan acara dan pemusnahan acara
Perlu mengikat acara ubah saiz. Acara ubah saiz dicetuskan apabila saiz tetingkap berubah. Apabila peristiwa ubah saiz dicetuskan, kita perlu mengira semula ketinggian item pertanyaan kotak untuk menentukan sama ada ia perlu dilipat atau dipaparkan. Kitaran hayat yang dipasang mencetuskan pengiraan ketinggian contoh komponen. Dan hitung ketinggian item pertanyaan. Acara ubah saiz mesti dimusnahkan dalam kitaran hayat sebelum komponen dimusnahkan. Tidak menjejaskan komponen lain.
Pertimbangan ketinggian dan paparan serta penyembunyian ikon
Pertama, keadaan pengikat kotak ikon digunakan untuk menunjukkan dan menyembunyikan. Kedua, kotak luar perlu menetapkan titik kritikal ketinggian, iaitu ketinggian di mana ia tidak akan dilipat, dan jika ia melebihi ketinggian ini, ia akan dilipat. Anda perlu mengira ketinggian kotak Sebagai contoh, jika anda memerlukan 4 baris tanpa lipatan, anda perlu mengira ketinggian empat baris dan menambah ketinggian ikon. Jika lebih besar daripada ketinggian, ikon dipaparkan, jika kurang daripada ketinggian, ikon disembunyikan.
Kod penuh
Reka letak
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <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>
|
Salin selepas log masuk
kod css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <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>
|
Salin selepas log masuk
skrip
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <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>
|
Salin selepas log masuk
Penggunaan komponen
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <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>
|
Salin selepas log masuk
Atas ialah kandungan terperinci Bagaimana untuk mencapai lipatan item carian jika ia melebihi n baris dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!