uniapp评论弹窗

效果图

代码

template

<template>
	<view>
		<view class="comment-button" @click="isShowCommentDialog = true">
			写评论
		</view>

		<!-- 遮罩层 -->
		<view v-if="isShowCommentDialog" class="mask" @click="handleClose"></view>

		<!-- 弹窗主体 -->
		<view v-if="isShowCommentDialog" class="dialog-container">
			<view class="dialog-content">
				<view class="title" style="display: flex;justify-content: space-between;align-items: center;" >
					<text>请输入评论</text>
					<view class="button clear-button" v-if="commentContent.length > 0" @click="commentContent = ''">
						清空
					</view>
				</view>

				<textarea 
					v-model="commentContent" 
					class="comment-input" 
					placeholder="请输入您的宝贵意见（500字以内）" 
					:maxlength="500" 
					@input="handleInputChange" />
				

				<view class="word-count">
					{{ commentContent.length }}/500
				</view>

				<view class="button-group">
					<view class="button cancel-button" @click="handleClose">
						取消
					</view>
					<view class="button confirm-button" :class="{ 'disabled': !isValidComment }" @click="handleSubmit">
						确认提交
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

script

<script>
    export default {
    data() {
        return {
            isShowCommentDialog: false,
            commentContent: '',
        }
    },
    computed: {
        isValidComment() {
            const content = (this.commentContent || '').trim()
            return content.replace(/[\u3000]/g, '').length > 0
        }
    },
    methods: {
            handleInputChange(e) {
                this.commentContent = e.detail.value
            },
            handleSubmit() {
                if (!this.isValidComment) {
                    return uni.showToast({
                        title: '请输入有效内容',
                        icon: 'none'
                    })
                }
                console.log('提交内容：', this.commentContent)
                this.handleClose()
            },
            handleClose() {
                this.isShowCommentDialog = false
            }
        }
    }
</script>

style

<style>
    .comment-button {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border-radius: 4px;
            text-align: center;
    }

    .mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
    }

    .dialog-container {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            background: white;
            padding: 20px;
    }

    .comment-input {
            width: 90%;
            height: 100px;
            border: 1px solid #ddd;
            padding: 10px;
            margin: 10px 0;
    }

    .button-group {
            display: flex;
            justify-content: space-between;
    }

    .button {
            padding: 8px 16px;
            border-radius: 4px;
    }

    .clear-button{
            background: #ff0000;
            color: white;
    }

    .cancel-button {
            background: #6c757d;
            color: white;
    }

    .confirm-button {
            background: #28a745;
            color: white;
    }

    .confirm-button.disabled {
            background-color: #999;
    }

    .word-count {
            color: #666;
            font-size: 12px;
            text-align: right;
    }
</style>