uni-app 发布媒介功能（自由选择媒介类型的内容） 设计

1.首先明确需求

我想做一个可以选择媒介的内容，来进行发布媒介的功能

（媒介包含：图片、文本、视频）

2.原型设计

发布-编辑界面

通过点击下方的加号，可以自由选择添加的媒介类型

但是因为预览中无法看到视频的效果，所以我这里就完成了添加文本和图片的效果

添加一些内容后的样子：

可以分段发布图片和文本的效果

也可以对其进行预览，这样可以观察别人浏览自己作品的场景

如果确定好了，就可以返回发布内容啦！

3.核心代码 - 抽屉效果实现

抽屉效果参考了，uniapp官网的抽屉组件

uni-app官网https://uniapp.dcloud.net.cn/component/uniui/uni-drawer.html

我改编后的具体代码如下所示：

<template>
	<view >
		<uni-card is-full :is-shadow="false">
		</uni-card>
		<uni-section title="左侧滑出" type="line">
			<view class="example-body" >
				<wd-icon @click="showDrawer('showRight')" class="add-content" color="#ffffff" name="add" size="32rpx"></wd-icon>
				<uni-drawer class="drawer-content" ref="showRight" mode="right" :width="320" @change="change($event,'showRight')">
					<view class="close">
						<view class="add-tip" >
							<wd-icon @click="closeDrawer('showRight',-1)" name="close" size="16px"></wd-icon>
							<text>请选择添加的内容</text>
							<text></text>
						</view>
					</view>
					<view class="add-select">
						<text class="item" @click="closeDrawer('showRight',0)">图片</text>
						<text class="item" @click="closeDrawer('showRight',1)">文本</text>
					</view>
				</uni-drawer>
			</view>
		</uni-section>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				showRight: false,
			}
		},
		methods: {
			
			// 打开窗口
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e,index) {
				this.$refs[e].close()
				  this.$emit('custom-event', index);
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			}
		}
		
	}
</script>

<style lang="scss" scoped>


.example-body {
	padding: 10px;
	background-color: red;
	border-radius: 10rpx;
	margin: 20rpx;
	padding: 20rpx 25rpx;
	background-color: #00e900;
	font-size: 30rpx;
	color: #282c35;
	border-radius: 40rpx;
	box-shadow: 0 0 20rpx rgba(228, 228, 228, 0.5); 
	
	.add-content{
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
		
	}	
	

}

.close {
	padding: 10px;
}

.add-tip{
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 30rpx;
	padding-top: 40px;
}

.drawer-content{
	display: flex;
	flex-direction: column;
	
	.add-select{
		display: flex;
		flex-direction: column;
		
		.item{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 30rpx;
			margin: 0rpx 40rpx;
			border-bottom: #e3e3e3 solid 1rpx;
			
			&:active{
				background-color: #ececec ;
			}
		}
	}
}
</style>

4.未开发说明：

隐式设置和定时发布还未开发