您的當(dāng)前位置：首頁 Vue 實(shí)現(xiàn)展開折疊效果的示例代碼

Vue 實(shí)現(xiàn)展開折疊效果的示例代碼

來源：九壹網(wǎng)

本文介紹了Vue 實(shí)現(xiàn)展開折疊效果的示例代碼，分享給大家，具體如下：

效果如見：

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.gxlcms.com//www.gxlcms.com/ajaxjs/jquery-1.6.2.min.js"></script>
</head>
<body>
 <div id="container"> 
 <div id="wrap">
 <div>
 <h1>這一段文字是可以折疊展開的，點(diǎn)擊下面的“更多”就可以展開，點(diǎn)擊下面的“折疊”就可以折疊</h1>
 </div>
 </div>
 <div id="read-more"></div>
 </div>
</body>
 </html>

2.js代碼，最關(guān)鍵的

$(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的方式實(shí)現(xiàn)上述效果，同樣可以在Vue實(shí)現(xiàn)，下面是解決辦法：

1、創(chuàng)建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">
 <h2>歡迎大家品嘗Pizza!</h2>
 <h5>這里有你非常喜歡的Pizza!</h5>
 </div>
 </collapse>
 </div>
</template>
<script>
import collapse from "../assets/js/collapse.js";
export default {
 data() {
 return {
 isActive: false
 };
 },
 components: {
 collapse
 }
};
</script>

成熟丰满熟妇高潮XXXXX,人妻无码AV中文系列久久兔费 ,国产精品一国产精品,国精品午夜福利视频不卡麻豆

Vue 實(shí)現(xiàn)展開折疊效果的示例代碼