点击popup遮罩层关闭也能监测到popup状态

在做购物袋按钮时候发现点击popup的遮罩层关闭后,无法监测到popup的状态,导致点击按钮无法再次正常打开popup。

问题代码如下:

<script setup lang="ts">
import {  ref } from 'vue'
const popup = ref<{
    open: (type?: UniHelper.UniPopupType) => void
    close: () => void
}>()
const isOpen = ref(true)
const openOrClosePopup = async () => {
    if (isOpen.value) {
      popup.value?.open()
    } else {
      popup.value?.close()
    }
}
<script>
<templete>
    <view style="z-index:99999999">
        <button @click="openOrClosePopup"/>    
    </view>
    <uni-popup ref="popup" type="bottom">
        <view>要显示的内容</view>
    </uni-popup>
<templete>

后面发现用@change可以解决这个问题:

<script setup lang="ts">
import {  ref } from 'vue'
const popup = ref<{
    open: (type?: UniHelper.UniPopupType) => void
    close: () => void
}>()
const isOpen = ref(true)
const openOrClosePopup = async () => {
    if (isOpen.value) {
      popup.value?.open()
    } else {
      popup.value?.close()
    }
}
const maskClick = () => {
  isOpen.value = !isOpen.value
}
<script>
<templete>
    <view style="z-index:999999">
        <button @click="openOrClosePopup"/>    
    </view>
    <uni-popup ref="popup" type="bottom" @change="maskClick" >
        <view>要显示的内容</view>
    </uni-popup>
<templete>

 

posted on 2023-12-04 16:25  反应弧有点长  阅读(139)  评论(0编辑  收藏  举报