uviewUI中u-popup组件show属性显示和不显示控制问题

问题在uviewUI中u-popup组件show并不是用来控制弹出层的显示与否，而是用v-model来进行控制，注意查看官方的API解决在控件上面加入v-model控制即可<template><view class="content"><u-popup v-model="show" @close="close" @open="open" :round="10" mod

Gabriel_wei

9438人浏览 · 2021-12-08 20:03:16

Gabriel_wei · 2021-12-08 20:03:16 发布

问题

在uviewUI中u-popup组件show并不是用来控制弹出层的显示与否，而是用v-model来进行控制，注意查看官方的API
在这里插入图片描述

解决

在控件上面加入v-model控制即可

<template>
	<view class="content">
		<u-popup v-model="show" @close="close" @open="open" :round="10" mode="top" class="pop">
            <view>
                <text>出淤泥而不染，濯清涟而不妖</text>
            </view>
		</u-popup>
		<u-button @click="btnCli()">打开</u-button>
	</view>
</template>
<script>
	export default {
      data() {
        return {
          show: true
        }
      }, 
      methods: {
		btnCli(){
			console.log(1)
			this.show = true
		},
        open() {
          // console.log('open');
        },
        close() {
          this.show = false
          // console.log('close');
        }
      }
	}
</script>
<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx;
	}
	.pop{
		height: 100px;
		width: 100px;
	}
</style>