没有展开时
在这里插入图片描述
点击展开之后
在这里插入图片描述

<div class="flashread_item_box_time">
                        <span class="moment_time">9分钟前</span>
                        <div class="flashread_item_box_zan">
                            <span class="flashread_item_box_item"><i class="iconfont icon-changyongtubiao-mianxing-"></i>10</span>
                            <span class="flashread_item_box_item" @click="tocomment(index)"><i class="iconfont icon-pinglun" :class="{showcolor:currentTab==index}"></i>10</span>
                        </div>
                    </div>
                    <div class="comment_textareabox" :class="{'showcomment':currentTab==index}">
                        <div class="textarea_com">
                            <textarea placeholder="你来谈谈?" class="comment_textarea" v-on:input="change" v-model="comment"></textarea>
                            <button class="btn_comment" :class="{'showcolor':showcombtn}">发表</button>
                        </div>
                    </div>
data(){
        return{
            currentTab:-1,
            flashreadlists:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
            showcombtn:false,
            comment:''
        }
    },
    methods:{
        change(){
            if(this.comment.length>=1){
                this.showcombtn=true
            }else{
                this.showcombtn=false
            }
        },
        tocomment(index){
            if(index!=this.currentTab){
                this.currentTab = index;

            }else{
                this.currentTab = -1;

            }
        }
    }
Logo

前往低代码交流专区

更多推荐