鸡汤来咯开发学习笔记-15

1.创建评论回复内页，在detail同级目录中就行，reply.vue

<template>
    <view class="replyLayout">
        <view class="outer">
            <view class="body">
                <comment-item></comment-item>   //调用组件
            </view>
            <view class="list">
                <view class="row" v-for="item in 5">
                    <comment-item></comment-item>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.replyLayout{
    .body{
        padding: 30rpx 0;
        border-bottom: 12rpx solid #f7f7f7;
        
    }
    .list{
        .row{
            border-bottom: 1rpx solid #f7f7f7 ;
        }
    }
}

</style>

2.设置跳转事件，在detail里面点击跳转到reply页面，在评论组件中

方法

const goReply =()=>{
    uni.navigateTo({
        url:"/pages/detail/reply"
    })
}

标签（这俩个加上方法标签）

<view class="reply" @click="goReply">

3.在大评论组件中定义一个变量默认false，让detail中能显示二级评论，内页评论中的第一个主评论不显示二级评论

方法

defineProps({
    subReply:{
        type:Boolean,
        default: false
    }
})    

标签更改

<view class="subReply" @click="goReply" v-if="subReply">

detail页中传值

<comment-item :subReply="true"></comment-item>

                    

4.隐藏@内容，方便后续开发

<text class="text" v-if="false">
                        回复<text class="nickname">@tuntun</text>
                    </text>