uni-app uni-popup组件父组件使用插槽时，内容插槽内输入框绑定父组件传入model，输入会关闭popup弹出框

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app uni-popup组件父组件使用插槽时，内容插槽内输入框绑定父组件传入model，输入会关闭popup弹出框

开发环境 版本号 项目创建方式
Windows 23H2 HBuilderX

操作步骤：

  1. 创建组件和描述中相同
  2. 使用组件和描述中相同
  3. 在输入框中输入任意字符

预期结果：

  • popup的内容区关闭

实际结果：

  • popup的内容区关闭

bug描述：

app端是正常的，h5会有问题

组件代码：

<template>  
    <view>  
        <slot name="custom-content"></slot>  
        <uni-popup ref="popup_ref">  
            <view style="height: 100px;">  
                <uni-easyinput v-model="inputModel"></uni-easyinput>  
            </view>  
        </uni-popup>  
    </view>  
</template>  

<script setup>  
import {ref, onMounted, getCurrentInstance} from 'vue'  
const inputModel = defineModel({default: []})  

const this_ = getCurrentInstance()  
onMounted(() =>{
    this_.refs['popup_ref'].open('bottom')  
})  
</script>  

<style>  
</style>

使用组件的方式：

<template>  
    <view>  
        <bug-popup v-model="inputModel">  
            <template v-slot:custom-content>插槽内容</template>  
        </bug-popup>  
    </view>  
</template>  

<script setup>  
import {ref} from 'vue'   
const inputModel = ref('')  
</script>

在h5端像输入框输入内容会导致popup的内容区关闭


Harmonyos Next教程
4 回复

本来想试着把传入v-model改成触发事件再在父组件里修改相关的值替代一下，没想到除了Model其他绑定的响应式属性只要被改了，就会触发这个bug。就是说封装组件，不能绑定响应式属性和插槽同时使用，否则就触发这个bug。


已确认bug，感谢反馈， 下个版本修复

找到项目中 uni_modules/uni-transition/components/uni-transition/uni-transition.vue，参照 pull 949 改动，临时修复此问题

在 uni-app 中使用 uni-popup 组件时，如果在内容插槽内包含输入框并绑定父组件传入的 model，可能会遇到输入时关闭 popup 弹出框的问题。这通常是由于事件冒泡导致的。为了避免这种情况，我们可以通过在输入框中阻止事件冒泡来解决。

下面是一个示例代码，展示了如何在父组件中使用 uni-popup 组件，并在插槽内绑定输入框的 model，同时防止输入时关闭 popup。

父组件代码（ParentComponent.vue）

<template>
  <view>
    <button @click="showPopup = true">Open Popup</button>
    <uni-popup v-model="showPopup" position="bottom">
      <template #content>
        <view class="popup-content">
          <input
            type="text"
            v-model="inputValue"
            @input="handleInput"
            placeholder="Type something"
          />
        </view>
      </template>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false,
      inputValue: ''
    };
  },
  methods: {
    handleInput(event) {
      // 阻止事件冒泡，确保 popup 不会因为输入而关闭
      event.stopPropagation();
      this.inputValue = event.target.value;
    }
  }
};
</script>

<style scoped>
.popup-content {
  padding: 20px;
}
</style>

解释

  1. 数据绑定：showPopup 控制 uni-popup 的显示与隐藏，inputValue 绑定到输入框的 v-model。
  2. 事件处理：在输入框的 @input 事件中，通过 event.stopPropagation() 阻止事件冒泡，这样输入框的输入事件就不会冒泡到 uni-popup 组件，从而避免触发关闭行为。
  3. 插槽使用：使用 #content 插槽将自定义内容（输入框）传递到 uni-popup 内部。

注意事项

  • 确保 uni-popup 组件的版本和用法符合 uni-app 的最新文档，因为不同版本可能有细微差异。
  • 如果问题仍然存在，检查是否有其他事件监听器（如全局事件监听）可能影响到 popup 的行为。
  • 根据实际需求调整样式和布局。

通过上述代码示例，你应该能够在 uni-app 中使用 uni-popup 组件，并在插槽内的输入框中正常输入而不关闭 popup。

回到顶部