当前位置: 首页 > 工具软件 > Model Search > 使用案例 >

uni-app 开发微信小程序使用 vant popup时v-model无效

燕嘉熙
2023-12-01

【省流:vant小程序版跟网页版的属性方法不同,要好好看文档】

因为项目需要,目前在使用uni-app开发一个微信小程序,是将之前官网的部分功能转为小程序可用。

由于之前官网使用的是vant,所以也在uni-app上使用vant作为UI框架来开发。(Vue2)

在我使用到vant的popup的时候,问题出现了。

我用原先的代码,用一个show来控制popup组件的的显示与否,但是失败了。

<van-popup v-model="show">xxx</van-popup>

查了一下github和搜索了一下才发现,小程序上的vant用的是跟网页版的不一样的方法,网页版的可以使用v-model,但是小程序的要用"show"属性来控制显示与否。

<van-popup :show="show" @close="show=false" position="bottom">xxx</van-popup>

由于是用show属性来控制,所以需要写一个close方法,这样一来,点击遮罩层关闭的“close-on-click-overlay”属性也才其效果,跟vue那里的v-model一次控制不一样。

小程序端的vant和网页端的vant还是有一些区别的,大家在写的时候如果遇到跟网页端不同的情况,应该看看vant-weapp的文档

 类似资料: