wot-design-uni 嵌套弹窗时弹框会限定在父组件内

myltx2025-03-21 14:40

wot-design-uni 嵌套弹窗时弹框会限定在父组件内

问题出现步骤

在 SwipeAction 中使用 SelectPicker 代码如下（完整代码地址会贴在文章底部），效果

ts 复制代码

<template>
  <view class="px-3 py-20 text-center">
    <view @click.stop="closeOutside">
      <wd-swipe-action>
        <wd-select-picker v-model="value" label="基本用法" :columns="columns" @change="handleChange" />
        <template #right>
          <view class="action">
            <view class="button" style="background: #C8C7CD;" @click="handleAction('操作1')">
              操作1
            </view>
            <view class="button" style="background: #FFB300;" @click="handleAction('操作2')">
              操作2
            </view>
            <view class="button" style="background: #E2231A;" @click="handleAction('操作3')">
              操作3
            </view>
          </view>
        </template>
      </wd-swipe-action>
    </view>
  </view>
</template>

问题出现的原因

最开始猜测是 SwipeAction 包裹的问题，然后我使用了普通的 view 标签进行包裹发现是正常的效果，然后我去看了一下SelectPicker的实现代码，发现内部使用了ActionSheet，然后ActionSheet使用了Popup，接着我去官方github的issue搜索了一下相关的问题，找到了#900，其中提到了popup嵌套的问题

解决方案

按照issue中说的方法对代码进行了调整。查看

ts 复制代码

<template>
  <view class="px-3 text-center">
    <view class="my-20px">
      修改后代码
    </view>
    <view @click.stop="closeOutside">
      <wd-swipe-action>
        <wd-cell title="基本用法" value="内容" clickable @click="handleSelect" />
        <template #right>
          <view class="action">
            <view class="button" style="background: #C8C7CD;" @click="handleAction('操作1')">
              操作1
            </view>
            <view class="button" style="background: #FFB300;" @click="handleAction('操作2')">
              操作2
            </view>
            <view class="button" style="background: #E2231A;" @click="handleAction('操作3')">
              操作3
            </view>
          </view>
        </template>
      </wd-swipe-action>

      <wd-select-picker ref="select" v-model="value" label="基本用法" :columns="columns" use-default-slot @change="handleChange" />
    </view>
  </view>
</template>

完整版代码地址wot-design-ui-demo

效果1

效果2

效果3