应用uni-popup和注意事项

文章介绍了如何从DCloud插件市场下载并引入uni-popup组件到项目中,特别强调需同时引入uni-transition插件,提供了vue代码示例来展示弹窗的打开和关闭方法,并提及uni-popup的type属性支持的上中下位置。
摘要由CSDN通过智能技术生成

首先在DCloud插件市场下载组件到项目(附上链接:https://ext.dcloud.net.cn/plugin?id=329),现在好像是不支持直接导入HBuilder X,需要先导入示例项目,然后在示例项目的路径“uni-popup 弹出层示例\uni_modules\uni-popup”找到uni-popup文件夹,放到自己项目的对应uni_modules文件下。
**注意事项:**这里需要注意的是uni-popup插件需要用到uni-transition插件,所以需要在uni_modules文件夹下一起复制过去,运行不成功的,可以看一下是不是遗漏了这个插件,有图有真相:
在这里插入图片描述
应用,代码如下

<uni-popup ref="Popup" type="bottom">
	<view style="width: 750rpx;background-color: #FFFFFF;border-radius: 24rpx 24rpx 0rpx 0rpx;">
		<view>正常写内容就可以</view>
	</view>
</uni-popup>

vue代码:
Click(){ //打开弹窗
	this.$refs.Popup.open()
}
ClickClose(){ //关闭弹窗
	this.$refs.Popup.close()
}

uni-popup的 type 的值有 top center bottom 上中下属性

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值