uniapp u-action-sheet slot="content"不起作用是怎么回事？

我在使用uniapp的u-action-sheet组件时，按照文档尝试使用slot="content"来自定义内容区域，但发现这个slot不生效。代码结构和官方示例基本一致，但自定义内容始终无法显示，只有默认的按钮列表能正常展示。请问这是什么原因导致的？需要如何解决？

2 回复

可能是版本问题，检查uni-app版本是否支持slot。或者写法错误，确保在u-action-sheet内正确使用<view slot="content">。建议查阅官方文档或更新版本。


在 UniApp 中，u-action-sheet 组件的 slot="content" 可能不起作用，通常由以下原因导致：

  1. 组件版本问题：旧版本可能不支持 slot 插槽。
  2. 语法错误：插槽使用方式不正确。
  3. 组件配置：未启用插槽功能。

解决方案：

  1. 更新组件：确保使用最新版 uView UI（如果使用该UI库）。
  2. 检查插槽语法：
    • 正确结构如下：
      <u-action-sheet>
  <view slot="content">
    自定义内容
  </view>
</u-action-sheet>
  3. 确认组件支持：查阅官方文档，确保 u-action-sheet 支持 content 插槽。

示例代码：

<template>
  <view>
    <u-action-sheet :list="list" v-model="show">
      <view slot="content">
        <text>这是自定义内容区域</text>
      </view>
    </u-action-sheet>
    <u-button @click="show = true">打开ActionSheet</u-button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      list: [{ text: '选项1' }, { text: '选项2' }]
    };
  }
};
</script>

注意事项：

  • 如果使用 uView UI，请确保版本 ≥2.0.0。
  • 某些情况下需通过 custom-style 属性调整样式。

若仍无效，请检查控制台错误或尝试替换为原生 uni-action-sheet 组件测试。

回到顶部