u-popup 在小程序里

### u-popup 小程序组件使用教程 #### 一、概述 `u-popup` 是 `uni-app` 中的一个弹出层组件，可以用来创建各种类型的弹窗效果。通过设置不同的参数，能够实现底部弹出、顶部弹出等多种样式，并且支持自定义内容。 #### 二、基础属性配置 为了使 `u-popup` 正常工作，在模板内需声明此组件并绑定可见状态变量 `v-model="popVisible"` 。此外还可以指定弹出方向 (`mode`) 和圆角大小 (`border-radius`) 等样式特性[^4]： ```html <u-popup v-model="popVisible" mode="bottom" border-radius="32"> <!-- 自定义的内容 --> </u-popup> ``` #### 三、处理输入框焦点与键盘行为 当希望在弹窗打开时让某个特定的 `<input>` 获得焦点，可以通过给它加上 `:focus="isFocus"` 属性来控制其获取或失去焦点的状态；同时为了避免软键盘顶起整个页面布局，应将 `adjustPosition` 设置为 false: ```html <input class="input" :border="border" input-align="left" :focus="isFocus" :adjust-position="false"/> ``` #### 四、关闭事件监听 每当用户点击遮罩区域或者触发其他形式的关闭动作后都会发出 `@close` 事件，可以在 JavaScript 部分定义相应的回调函数来进行额外操作，比如重置表单数据等: ```javascript methods:{ hide(){ this.isFocus=false; // 更多逻辑... } } ``` #### 五、综合案例展示 下面给出一段完整的代码片段作为参考，展示了如何在一个按钮点击后显示带有输入框的下拉菜单型弹窗，并确保首次展现即刻获得光标定位而不被移动屏幕所干扰: ```vue <template> <view> <button type="primary" @click="showPopup">显示弹窗</button> <u-popup v-model="popVisible" mode="bottom" border-radius="32" @close="hide"> <input class="input" placeholder="请输入..." :border="border" input-align="left" :focus="isFocus" :adjust-position="false" /> </u-popup> </view> </template> <script> export default { data() { return { popVisible:false, isFocus:true, }; }, methods: { showPopup(){ this.popVisible=true; }, hide(){ this.isFocus=false; } } }; </script> <style scoped lang="scss"> .input{ width:90%; margin-top:20rpx; padding-left:15rpx; height:80rpx; line-height:80rpx; font-size:28rpx; color:#333; background-color:#f7f7f7; border-bottom:solid 1rpx #ebebeb; } </style> ```