更新记录

1.0.2（2021-06-29） 下载此版本

修复H5不兼容问题

1.0.1（2021-04-04） 下载此版本

更新部分样式

1.0.0（2021-04-04） 下载此版本

版本初始化

平台兼容性

评论输入框

说明

组件功能 1.触发弹出输入框
2.点击空白隐藏返回 3.输入的内容带记忆功能，对于不同的评论体会可保存已输入的评论内容，当下次再触发时，可找到上次输入的内容。 4.点击发布触发事件返回输入的内容

基本用法

在template中使用组件

<template>
    <view>
        <button @click="clickComment('1')">小心</button>
        <button @click="clickComment('2')">大呃呃</button>
        <qizai9527-input-comment
            :placeholder="placeholder" 
            :valueData="tmpCommentData" 
            :isShow="isShowComment" 
            :curKey="curCommentId"
            @submitComment="submitComment"  
            @clickOther="clickOther">
        </qizai9527-input-comment>
    </view>
</template>

    export default {
        data() {
            return {
                nameList:{
                    1:'小心',
                    2:'大呃呃',
                    3:'小气鬼',
                },

                isShowComment:false,
                placeholder:"友善是交流的起点",
                tmpCommentData:[],
                curCommentId:'',
            }
        },
        methods: {
            // 点击评论触发评论输入框
            clickComment(id){
                this.curCommentId = id;
                this.placeholder = "回复 "+ this.nameList[id] + "：";
                this.isShowComment=true;
            },
            // 提交评论并清除记忆
            submitComment(e){
                this.isShowComment=false;
                this.tmpCommentData[this.curCommentId] = '';
            },
            // 点击空白返回并保存记忆
            clickOther(e){
                this.isShowComment=false;
                this.tmpCommentData[this.curCommentId] = e;
            }
        }
    }

API

属性说明

事件说明

补充：有任何问题联系wx：chwlzgz 。 在线求打扰~ 可接私活（专业后端PHP）