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

71 阅读 0 评论 47 点赞

我是靠谱客的博主细心人生，最近开发中收集的这篇文章主要介绍uni-app 开发微信小程序使用 vant popup时v-model无效，觉得挺不错的，现在分享给大家，希望可以做个参考。

【省流：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的文档

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。