uni-popup使用教程

### uni-popup 使用教程及示例代码 #### 1. 安装与配置 在使用 `uni-popup` 前，需要从 DCloud 插件市场下载组件并将其导入到项目中。具体步骤如下： - 访问插件市场链接：[https://ext.dcloud.net.cn/plugin?id=329](https://ext.dcloud.net.cn/plugin?id=329)。 - 下载示例项目后，在路径 `uni-popup 弹出层示例\uni_modules\uni-popup` 中找到 `uni-popup` 文件夹，并将其复制到自己项目的 `uni_modules` 文件夹下[^1]。 需要注意的是，`uni-popup` 插件依赖于 `uni-transition` 插件，因此也需要将 `uni-transition` 文件夹一并复制到 `uni_modules` 文件夹中。 #### 2. 示例代码 以下为一个基本的 `uni-popup` 使用示例： ```html <template> <view> <!-- 打开弹窗按钮 --> <button @click="openPopup">打开弹窗</button> <!-- 弹出层 --> <uni-popup ref="popup" type="bottom"> <view style="width: 750rpx; background-color: #FFFFFF; border-radius: 24rpx 24rpx 0rpx 0rpx;"> <view>正常写内容就可以</view> </view> </uni-popup> </view> </template> <script> export default { methods: { openPopup() { this.$refs.popup.open(); // 打开弹窗 } } }; </script> ``` #### 3. 高级功能：搭配 `uni-popup-dialog` 如果需要实现更复杂的弹窗功能，例如输入框对话框，可以结合 `uni-popup-dialog` 组件使用。以下是示例代码： ```html <template> <view> <!-- 打开弹窗按钮 --> <button @click="openDialog">打开对话框</button> <!-- 对话框 --> <uni-popup ref="popup" type="dialog"> <uni-popup-dialog mode="input" message="请输入内容" :duration="2000" :before-close="true" @close="closeDialog" @confirm="confirmDialog"></uni-popup-dialog> </uni-popup> </view> </template> <script> export default { methods: { openDialog() { this.$refs.popup.open(); // 打开对话框 }, closeDialog() { this.$refs.popup.close(); // 关闭对话框 }, confirmDialog(value) { console.log("用户输入的内容：", value); // 获取输入框的值 this.$refs.popup.close(); // 手动关闭对话框 } } }; </script> ``` #### 4. 禁止遮盖层页面滑动 在某些场景下，用户可能希望在弹窗显示时禁止背景页面的滑动。可以通过以下方式实现： ```css /* 在弹窗显示时禁止页面滑动 */ .popup-show { overflow: hidden; height: 100vh; } ``` 然后在 Vue 组件中动态添加该类名： ```javascript export default { data() { return { isPopupShow: false }; }, methods: { openPopup() { this.isPopupShow = true; this.$refs.popup.open(); }, closePopup() { this.isPopupShow = false; this.$refs.popup.close(); } } }; ``` 并在模板中绑定类名： ```html <view :class="isPopupShow ? 'popup-show' : ''"> <!-- 页面内容 --> </view> ``` #### 5. iOS 自动弹出键盘问题 在微信小程序中，使用 `uni-popup-dialog` 的 `input` 模式时，可能会遇到 iOS 平台自动弹出键盘的问题。为解决此问题，可以在打开弹窗前延迟一段时间再触发弹窗显示[^2]。 示例代码如下： ```javascript methods: { openDialog() { setTimeout(() => { this.$refs.popup.open(); }, 200); // 延迟 200ms 打开弹窗 } } ``` --- ###