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

1.在comment-item组件修改写入防止内页死循环跳转功能

const Props = defineProps({
    subReply:{
        type:Boolean,
        default: false
    }
})    
    
    
//点击回复

const goReply =()=>{
    if(Props.subReply){    //这是获取上面对的变量值的js的一种方式，而只有内页评论的subreply为falses，detail中传递的为true，这样能进行判断跳转，防止内页跳转死循环
        uni.navigateTo({
            url:"/pages/detail/reply"
        })
    }
    
}

2.写底部评论弹出框，当点击评论框时弹出，又评论框是在组件interactive-bar中，要进行组件向父级传值的事件
在interactive-bar的组件中写入
页面

<view class="item" v-if="type==1" @click="clickCommon"> //创建一个点击事件

js

const emit =defineEmits(['comment']);   //创建一个emit往上传值事件为comment
    
    //点击评论框
    const clickCommon =() =>{
        emit("comment");  //传值，但事件值为空
    }

在detail页面中写入

<view class="interactive">
            <interactive-bar :type="1" @comment="handelComment"> </interactive-bar>//获取下面的事件，当组件的评论框被点击，就会用emit传入事件，并设置控制器handelcomment
            <view class="safe-area-bottom"></view>
        </view>
    </view>
    <uni-popup type="bottom" ref="commentPopup">  //ref 是写入一个对象，可以控制此标签属性
        弹出内容
    </uni-popup>
</template>

<script setup>
import { ref } from 'vue';
const commentPopup =ref(null);  //对象为空

const handelComment =()=>{
    commentPopup.value.open();  //当事件响应后，用对象commentpopup进行打开弹出
}
    
</script>

3.对弹出评论框进行布局和样式的写入

页面

<uni-popup type="bottom" ref="commentPopup">
        <view class="commentPopup">
            <input type="text" class="ipt" placeholder="请输入评论内容" maxlength="50"/>
            <view class="button">
                <uni-icons type="paperplane" size="26" color="#333"></uni-icons>
            </view>
        </view>
    </uni-popup>

样式

.commentPopup{
        background: #fff;
        padding: 30rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .ipt{
            background: #f7f7f7;
            height: 70rpx;
            flex: 1;  //和button一排，它占其他的空白部分，1为比重的意思在这个排列下
            padding: 0 20rpx;
            font-size: 28rpx;
            color: #333;
            
        }
        .button{
            width: 70rpx;
            height: 70rpx;
            margin-left: 10rpx;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
    }