点击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>