more_vue3_h5展开收起组件

博主： renlmingj
发布时间：2024 年 06 月 04 日
175 次浏览
暂无评论
2876字数
分类： uniapp_v3

##### 一、在 components 中新建 moreCom 文件夹并新建 moreCom.vue文件

###### 1、写入 html 代码

```html
<template>
	<view class="wrap">
		<view ref="moreDom" class="more_wrap" :style="{'height': heights}">
			<view id="moreDom">{{content}}</view>
		</view>
		<view class="pop_wrap" v-if="content">
			<view @click="pop">{{!isPop ? '展开' : '收起'}}</view>
		</view>
	</view>
</template>
```

###### 2、写入 css 代码

```scss
.wrap {
	position: relative;

.more_wrap {
		width: 100%;
		overflow: hidden;
	}

.pop_wrap {
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		bottom: -1rpx;
		width: 100%;
		height: 50rpx;
		background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, 1));
	}
}
```

###### 3、写入 js 代码

```js
import { ref } from 'vue';
const { content, height, isAnimation } = defineProps({
	// 内容
	content: {
		type: String,
		default: ''
	},
	// 默认展示高度
	height: {
		type: Number,
		default: 200
	},
	// 是否开启动画，true --- 开启   false --- 不开启
	isAnimation: {
		type: Boolean,
		default: false
	}
})

##### 二、父组件调用

###### 1、html 代码

```html
<more-com :content="content" :height="height" :isAnimation="isAnimation"></more-com>
```

###### 2、js 代码

```js
import moreCom from '@/components/moreCom/moreCom.vue';
import { ref } from 'vue';
const content = ref(
	'JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。JavaScript的标准是ECMAScript。截至2012年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为ECMAScript 2015，但通常被称为ECMAScript 6或者ES2015。'
	);
const height = ref(210);
const isAnimation = ref(false);
```

##### 三、效果展示
![收起效果图][1]
![展开效果图][2]

> 注：只适用于 h5，小程序均不支持

[1]: https://www.renlmingj.cn/usr/uploads/2024/06/2541820869.png
  [2]: https://www.renlmingj.cn/usr/uploads/2024/06/2111840672.png

最后修改：2024 年 06 月 13 日