jiaoyi-uni/components/bottom-operation/more.vue

<template>
	<view class="more" :style="{ height: value ? '430rpx' : '0px' }">
		<view class="more-line">
			<m-line color="#d4d4d4" length="100%" :hairline="true"></m-line>
		</view>
		<view class="flex_r more-list">
			<view class="flex_c_c more-item" v-for="(item, index) in list" :key="index" @click="onClick(item)">
				<view class="icon_ more-item-icon">
					<image class="img" :src="item.icon" mode="aspectFill"></image>
				</view>
				<view class="text_26" style="color: #686868">
					{{ item.title }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		value: {
			type: Boolean,
			default: false
		}
	},
	// #4c4c4c
	data() {
		return {
			isShow: false,
			list: [
				{
					type: 'img',
					icon: 'https://jymini.oss-cn-guangzhou.aliyuncs.com/mini/pic.svg',
					title: '照片'
				},
				// #ifdef APP || H5
				{
					type: 'shot',
					icon: 'https://jymini.oss-cn-guangzhou.aliyuncs.com/mini/zhaoxiang.svg',
					title: '拍摄'
				},
				// #endif
				{
					type: 'video',
					icon: 'https://jymini.oss-cn-guangzhou.aliyuncs.com/mini/video.svg',
					title: '视频'
				}
			]
		};
	},
	created() {},
	watch: {
		value: {
			handler: function (newV) {
				this.isShow = newV;
			},
			immediate: true
		}
	},
	methods: {
		onClick(item) {
			this.$emit('onMore', item);
		}
	}
};
</script>

<style lang="scss" scoped>
.more {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	background-color: #f6f6f6;
	overflow: hidden;
	transition: all 0.2s;
	.more-line {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
	.more-list {
		box-sizing: border-box;
		padding: 20rpx;
		width: 100%;
		height: 370rpx;
		flex-wrap: wrap;
	}
	.more-item {
		width: 25%;
		height: 190rpx;
		.more-item-icon {
			width: 120rpx;
			height: 120rpx;
			background-color: #fff;
			border-radius: 30rpx;
			margin-bottom: 10rpx;
			.img {
				width: 50%;
				height: 50%;
			}
		}
	}
}
</style>