溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹怎么在Vue中實現一個展開折疊效果，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
1.html代碼
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js文本段落展開和收攏效果</title> <script type="text/javascript" src="https://www.jb51.net/ajaxjs/jquery-1.6.2.min.js"></script> </head> <body> <div id="container"> <div id="wrap"> <div> <h2>這一段文字是可以折疊展開的，點擊下面的“更多”就可以展開，點擊下面的“折疊”就可以折疊</h2> </div> </div> <div id="read-more"></div> </div> </body> </html>
2.js代碼，最關鍵的
$(function() {
var slideHeight = 45; // px 定義折疊的最小高度
var defHeight = $('#wrap').height();
if(defHeight >= slideHeight) {
$('#wrap').css('height', slideHeight + 'px');
$('#read-more').append('<a href="#" rel="external nofollow" >更多</a>');
$('#read-more a').click(function() {
var curHeight = $('#wrap').height();
if(curHeight == slideHeight) {
$('#wrap').animate({
height: defHeight
}, "normal");
$('#read-more a').html('折疊');
} else {
$('#wrap').animate({
height: slideHeight
}, "normal");
$('#read-more a').html('更多');
}
return false;
});
}
});3.css代碼
#container {
margin: 0 auto;
width: 600px;
border: 1px solid #3bb2d0;
}
#wrap {
position: relative;
padding: 10px;
overflow: hidden;
}
#read-more {
padding: 5px;
background: #fff;
color: #333;
}
#read-more a {
padding-right: 22px;
no-repeat 100% 50%;
font-weight: bold;
text-decoration: none;
}
#read-more a: hover {
color: #000;
}除了使用jQuery的方式實現上述效果，同樣可以在Vue實現，下面是解決辦法：
1、創建collapse.js文件
const elTransition =
"0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out";
const Transition = {
"before-enter"(el) {
el.style.transition = elTransition;
if (!el.dataset) el.dataset = {};
el.dataset.oldPaddingTop = el.style.paddingTop;
el.dataset.oldPaddingBottom = el.style.paddingBottom;
el.style.height = 0;
el.style.paddingTop = 0;
el.style.paddingBottom = 0;
},
enter(el) {
el.dataset.oldOverflow = el.style.overflow;
if (el.scrollHeight !== 0) {
el.style.height = el.scrollHeight + "px";
el.style.paddingTop = el.dataset.oldPaddingTop;
el.style.paddingBottom = el.dataset.oldPaddingBottom;
} else {
el.style.height = "";
el.style.paddingTop = el.dataset.oldPaddingTop;
el.style.paddingBottom = el.dataset.oldPaddingBottom;
}
el.style.overflow = "hidden";
},
"after-enter"(el) {
el.style.transition = "";
el.style.height = "";
el.style.overflow = el.dataset.oldOverflow;
},
"before-leave"(el) {
if (!el.dataset) el.dataset = {};
el.dataset.oldPaddingTop = el.style.paddingTop;
el.dataset.oldPaddingBottom = el.style.paddingBottom;
el.dataset.oldOverflow = el.style.overflow;
el.style.height = el.scrollHeight + "px";
el.style.overflow = "hidden";
},
leave(el) {
if (el.scrollHeight !== 0) {
el.style.transition = elTransition;
el.style.height = 0;
el.style.paddingTop = 0;
el.style.paddingBottom = 0;
}
},
"after-leave"(el) {
el.style.transition = "";
el.style.height = "";
el.style.overflow = el.dataset.oldOverflow;
el.style.paddingTop = el.dataset.oldPaddingTop;
el.style.paddingBottom = el.dataset.oldPaddingBottom;
}
};
export default {
name: "collapseTransition",
functional: true,
render(h, { children }) {
const data = {
on: Transition
};
return h("transition", data, children);
}
};2、在.vue組件中引入
<template>
<div class="container">
<button @click="isActive = !isActive">展開/折疊</button>
<collapse>
<div class="container" v-show="isActive">
<h3>歡迎大家品嘗Pizza!</h3>
<h6>這里有你非常喜歡的Pizza!</h6>
</div>
</collapse>
</div>
</template>
<script>
import collapse from "../assets/js/collapse.js";
export default {
data() {
return {
isActive: false
};
},
components: {
collapse
}
};
</script>關于怎么在Vue中實現一個展開折疊效果就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
