uniapp 发布评论时弹窗（自动弹出系统键盘）

最新推荐文章于 2024-04-26 10:50:51 发布

古木2019

最新推荐文章于 2024-04-26 10:50:51 发布

阅读量582

点赞数 1

文章标签： uni-app 前端 javascript

本文链接：https://blog.csdn.net/qq_38188762/article/details/133931818

版权

<template>
	<view class="pos-fixed bg-w sub-comments w100 ">

		<u-popup :show="show" mode="bottom" @close="close" @open="open" v-if="show">
			<view class="flex justify-between ai-end padding-sm mb-1 mt-1">

				<view class="com-textarea-box">
					<u--textarea :height="60" :cursorSpacing="100" class="com-textarea" :focus="focus"
						:showConfirmBar="false" v-model="formData" placeholder="友善评论" count autoHeight
						maxlength="300"></u--textarea>
				</view>
				<view class="pb-1 f36 f-w mr-1 " :class="formData!='' ? 'c-red' : 'c-999'" @tap="postComments()">
					发布
				</view>
			</view>
		</u-popup>
		<view class="flex justify-between align-center padding-sm" @tap.stop="showComments()">
			<view class="flex align-center justify-center sub-comments-input">
				<view class="mr-1">
					<u-icon size="22" name="edit-pen-fill"></u-icon>
				</view>
				<view>友善评论...</view>
			</view>
			<view class="flex">
				<text class="iconfont c-999 f48 mr-4">&#xe718;</text>
				<text class="iconfont c-999 f48 mr-2">&#xe719;</text>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				formData: "",
				isPopupComments: false,
				show: false,
				focus: true,//是否自动获取焦点弹出系统键盘
			}
		},
		methods: {
			showComments() {
				this.show = true;

			},

			open() {
				this.show = true;
				console.log('open');
			},
			close() {
				this.show = false
				console.log('close');
			},
			postComments() {
				console.log("发布评论");
				this.formData = "";
				this.show = false;

			},

			blur() {
				this.focus = false
			}


		},
	}
</script>


<style lang="scss">
	.sub-comments {
		left: 0;
		bottom: 0;

		// min-height: 100rpx;
		.sub-comments-input {
			width: 484rpx;
			height: 75rpx;
			background: rgba(51, 51, 51, 0.05);
			border-radius: 35rpx;
			opacity: 1;
			
		}
	}

	.com-textarea-box {
		width: 85%;

		.com-textarea,
		textarea {
			min-height: 200rpx;
			padding: 20rpx;

			background: rgba(51, 51, 51, 0.02);
			color: #000 !important; 
		}
	}
</style>