Vue 实现展开折叠效果的示例代码
程序员文章站
2022-03-21 21:11:01
本文介绍了vue 实现展开折叠效果的示例代码，分享给大家，具体如下：
效果如见：
1.html代码
...
本文介绍了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="//www.jb51.net/ajaxjs/jquery-1.6.2.min.js"></script>
</head>
<body>
<div id="container">
<div id="wrap">
<div>
<h1>这一段文字是可以折叠展开的，点击下面的“更多”就可以展开，点击下面的“折叠”就可以折叠</h1>
</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">
<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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。