首先在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 上中下属性