vue 更多收起功能

最新推荐文章于 2024-12-05 16:53:27 发布

原创最新推荐文章于 2024-12-05 16:53:27 发布 · 865 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

这篇博客探讨了如何利用HTML5和CSS3的基本知识，而非依赖Vue，来优雅地实现内容显示与隐藏的效果。文章通过实例展示了如何根据元素高度动态调整显示状态，并提供了详细的代码实现。

<template>
	<div class="home">
		<div class='test' ref="test">我是测试行高</div>
		<div class='box' ref="box">
 		 {{html}} <span class='shouqi' v-show="showShouqi" @click="putAway">收起</span>
 		 <span class="more" ref="more" v-show="showMore" @click="changeMore">更多</span>
		</div>
	 </div>
</template>

<script>

export default {
	data() {
	 return {
 		 showMore: false,
 		 showShouqi: false,
  		 html: '本文题目中虽然写有vue和react,但是并非vue和react相关知识，而是最基本的html5和css3的一些知识，之所以写vue，是因为我最近项目中用到了类似效果，我用vue相关知识实现并不雅观，用html5和css3实现，则更加完美。clientHeight 相同。包括元素的padding，但不包括元素的 border 和 margin。'
	 }
 	},
	mounted() {
	 const originBoxHeight = this.$refs.box.scrollHeight
	 const baseOneHeight = this.$refs.test.clientHeight
	 if (originBoxHeight > 2 * baseOneHeight) {
		  this.showMore = true
 		 this.showShouqi = false
	 }
	 this.$refs.box.style.height = 2 * this.$refs.test.clientHeight + 'px'
	 this.$refs.more.style.top = this.$refs.test.clientHeight + 'px'
    },
	methods: {
		changeMore() {
  			this.$refs.box.style.height = this.$refs.box.scrollHeight + 'px'
  			this.btnChange()
	   },
	putAway() {
 	 this.$refs.box.style.height = 2 * this.$refs.test.clientHeight + 'px'
 	 this.btnChange()
	},
    btnChange() {
 	 this.showMore = !this.showMore
 	 this.showShouqi = !this.showShouqi
    }
  }
};
</script>

<style lang='less' scoped>
.box,
.test {
  position: relative;
  width: 100%;
  font-size: 12px;
  line-height: 20px;
  overflow: hidden;
}
.test {
  opacity: 0;
}
.more {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 12px;
  color: red;
  background: white;
}
.shouqi {
  color: red;
}
</style>