Vue 实现展开折叠效果的示例代码

更新时间：2018年08月27日 16:53:22 作者：Miss_Ye

这篇文章主要介绍了Vue 实现展开折叠效果的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

本文介绍了Vue 实现展开折叠效果的示例代码，分享给大家，具体如下：

效果如见：

1.html代码

<!DOCTYPE html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
  <title>js文本段落展开和收拢效果</title>
  <script type="text/javascript" src="http://9i0i.com/pic.php?p=/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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持程序员之家。

您可能感兴趣的文章:

vue 实现购物车总价计算
今天小编就为大家分享一篇vue 实现购物车总价计算，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
详细讲解vue2+vuex+axios
在vue2项目中，组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的情况下（后台获取数据存入vuex，组件之间共享数据），那么就需要用vuex来管理这些。
2017-05-05
Vue项目打包部署全过程(history模式)
vue项目中我们比较常用的模式为hash和history模式,下面这篇文章主要给大家介绍了关于Vue项目打包部署的全过程,讲解的是vue-router中history模式的部署,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2023-05-05
vue引入elementUi后打开页面报错Uncaught?TypeError的解决方式
这篇文章主要给大家介绍了关于vue引入elementUi后打开页面报错Uncaught?TypeError:?Cannot?read?properties?of?undefined(reading?‘prototype‘)的解决方式,文中通过图文介绍的非常详细,需要的朋友可以参考下
2022-08-08
vuex 动态注册方法 registerModule的实现
这篇文章主要介绍了vuex 动态注册方法 registerModule的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-07-07
Create?vite理解Vite项目创建流程及代码实现
这篇文章主要为大家介绍了Create?vite理解Vite项目创建流程及代码实现，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
vue中使用vuex的超详细教程
这篇文章主要介绍了vue中使用vuex的超详细教程，给大家介绍vue项目怎么使用，非常适合初学者使用，保存数据以及获取数据，本文给大家介绍的非常详细，需要的朋友可以参考下
2022-08-08
vue中渲染对象中属性时显示未定义的解决
这篇文章主要介绍了vue中渲染对象中属性时显示未定义的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
深入浅析vue全局环境变量和模式
这篇文章主要介绍了vue全局环境变量和模式的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-04-04
Vue项目代码之路由拆分、Vuex模块拆分、element按需加载详解
这篇文章主要介绍了Vue项目代码之路由拆分、Vuex模块拆分、element按需加载,项目较大路由较多时，路由拆分是一个不错的代码优化方案，按不同业务分为多个模块，结构清晰便于统一管理，本文通过示例给大家详细讲解，需要的朋友可以参考下
2022-11-11