uni-app中uni-popup-dialog对话框组件设置borderRadius圆角属性无效

插件版本已经是最新版本1.9.5

在 uni-app 中使用 uni-popup-dialog 组件时，如果直接通过组件的 style 属性设置 borderRadius 圆角属性无效，这通常是因为组件的样式被内部样式或全局样式覆盖。为了解决这个问题，你可以尝试以下几种方法：

方法一：使用深度选择器（::v-deep）

在 Vue 组件中，如果你使用了 scoped 样式，可以使用深度选择器 ::v-deep 来穿透组件的 scoped 样式限制，直接修改子组件的样式。

<template>
  <uni-popup-dialog v-model="showDialog">
    <!-- Dialog content -->
  </uni-popup-dialog>
</template>

<script>
export default {
  data() {
    return {
      showDialog: false
    };
  }
};
</script>

<style scoped>
::v-deep .uni-popup-dialog {
  border-radius: 20px; /* 设置圆角 */
  overflow: hidden; /* 确保内容不被圆角裁剪 */
}
</style>

方法二：全局样式覆盖

如果深度选择器无效，或者你不希望使用 scoped 样式，可以尝试在全局样式中覆盖 uni-popup-dialog 的样式。

在 App.vue 或全局的 CSS 文件中添加：

.uni-popup-dialog {
  border-radius: 20px !important; /* 使用 !important 提升优先级 */
  overflow: hidden; /* 确保内容不被圆角裁剪 */
}

方法三：自定义组件样式

如果上述方法仍然无效，你可以考虑创建一个自定义的对话框组件，完全掌控其样式。

<template>
  <view class="custom-dialog" v-if="visible">
    <!-- Dialog content -->
    <view class="dialog-content">
      <!-- Your content here -->
    </view>
  </view>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  }
};
</script>

<style>
.custom-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialog-content {
  background: white;
  border-radius: 20px;
  padding: 20px;
}
</style>

在这个自定义组件中，你可以完全自由地设置 borderRadius 和其他样式属性，而不受 uni-popup-dialog 组件的限制。

通过以上方法，你应该能够解决 uni-popup-dialog 组件设置 borderRadius 圆角属性无效的问题。