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

1.删除弹窗评论官方组件中的安全区，然后自己设置一个安全区

//paddingBottom: this.safeAreaInsets + 'px' //在chiken\uni_modules\uni-popup\components\uni-popup这个目录下注释

在弹窗评论组件中设置安全区

<view class="safe-area-bottom" :style="{background:'#fff'}"></view>

2.子评论详情页的回复评论区的创建reply.vue
页面

<view class="replyBar">
                <view class="out">
                    <view class="left">发布一条友好的评论吧</view>
                    <view class="right">
                        <uni-icons type="paperplane" size="26" color="#333"></uni-icons>
                    </view>
                </view>
                <view class="safe-area-bottom" :style="{background:'#fff'}"></view>
            </view>

样式

.replyBar{
            padding: 30rpx;
            border-top: 2rpx solid #e4e4e4;
            background: #fff;
            .out{
                display: flex;
                justify-content: center;
                align-items: center;
                .left{
                    flex: 1;
                    height: 70rpx;
                    background: #f7f7f7;
                    border-radius: 70rpx;
                    padding: 0 20rpx;
                    display: flex;
                    align-items: center;
                    color: #999;
                    margin-right: 30rpx;
                }
            }
        }

3.创建common-reply组件化把弹窗评论组件，用于detail和reply两个页面（以前介绍过方法）

4.给reply页面的评论框构建弹窗，逻辑
引用组件，上面replybar加入click事件

<uni-popup type="bottom" ref="commentPopup">
                <common-reply></common-reply>
            </uni-popup>

逻辑方法 //创建一个控制对象，在点击事件后进行操作弹窗

import { ref } from 'vue';

const commentPopup =ref(null)

const clickReply = ()=>{
    commentPopup.value.open();
}