[动作面板] 在tabBar中使用时报错不存在

[l771311416]

tdesign-miniprogram 版本

1.2.4

重现链接

No response

重现步骤

我在custom-tab-bar文件夹 也就是 tabBar使用了动作面板。这是我在wxml中的引用<t-action-sheet id="t-action-sheet" bind:selected="handleSelected" /> 并且我在js中明确触发了handleAction的情况下的代码 import ActionSheet, { ActionSheetTheme } from 'tdesign-miniprogram/action-sheet/index'; handleAction() { ActionSheet.show({ theme: ActionSheetTheme.Grid, selector: '#t-action-sheet', context: this, items: [ { label: '我要出售', icon: 'money', }, { label: '定金找车', icon: 'cart', }, ], }); }, 但是报错信息为下面： 未找到组件,请确认 selector && context 是否正确

期望结果

期待正常展示

实际结果

无法展示，并且报错

基础库版本

No response

补充说明

No response

[github-actions[bot]]

👋 @l771311416，感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[l771311416]

找到一部分原因是因为import ActionSheet, { ActionSheetTheme } from 'tdesign-miniprogram/action-sheet/index';这个的引入未找到导致的

[betavs]

从源码中可以发现引入是可以找到的

https://github.com/Tencent/tdesign-miniprogram/blob/0029123cbd8bf117515badfb9ac3001f8a7dce70/src/action-sheet/index.ts#L1-L13

从你提供的代码来看，可能是 this 的指向有问题

handleAction() {
  ActionSheet.show({
    theme: ActionSheetTheme.Grid,
    selector: "#t-action-sheet",
    context: this,
    items: [
      { label: "我要出售", icon: "money" },
      { label: "定金找车", icon: "cart" },
    ],
  });
}

[l771311416]

是因为我在tabBar中使用的原因吗，因为我看在

handleAction() {
let that =this
  ActionSheet.show({
    theme: ActionSheetTheme.Grid,
    selector: "#t-action-sheet",
    context: that,
    items: [
      { label: "我要出售", icon: "money" },
      { label: "定金找车", icon: "cart" },
    ],
  });
}

这样也会一样报错

[betavs]

type Context = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;

应该没有问题的，你可以尝试在页面中使用看看是否有问题

[l771311416]

我认为这确实是一个兼容性问题，我在按照官方文档的代码进行书写的情况下依然会出现这样的问题，但是我在pages目录下进行使用并没有此问题的发生。但是只要在tabBar中进行引入 import ActionSheet, { ActionSheetTheme } from 'tdesign-miniprogram/action-sheet/index';便会报错

{
  "dependencies": {
    "tdesign-miniprogram": "^1.2.4"
  }
}
// 以上是我的版本号

[betavs]

可以的话，提供一下完整的在pages和tabbar中的应用代码

[l771311416]

D:\WeChatProject\Shop\custom-tab-bar 代码：

<t-tab-bar value="{{value}}" bindchange="onChange" theme="tag" split="{{false}}">
  <t-tab-bar-item wx:for="{{tabBar}}" wx:key="index" value="{{item.value}}" icon="{{item.icon}}">
    {{item.label}}
  </t-tab-bar-item>
  <t-fab icon="add" bind:click="handleAction" aria-label="增加" style="right: 46%;bottom: 5%;"></t-fab>

<t-action-sheet id="t-action-sheet" bind:selected="handleSelected" />

</t-tab-bar>

import ActionSheet, { ActionSheetTheme } from 'tdesign-miniprogram/action-sheet/index';
  handleAction() {
      ActionSheet.show({
        theme: ActionSheetTheme.List,
        selector: '#t-action-sheet',
        context: this,
        items: [
          {
            label: '选项一',
          },
          {
            label: '选项二',
          },
          {
            label: '选项三',
          },
          {
            label: '选项四',
          },
        ],
      });
    }

D:\WeChatProject\MotoCycleShop\pages\my\buyCarList 代码：

<view class="find-car-list">
  <block wx:for="{{findCars}}" wx:key="id">
    <view class="find-car-item" bindtap="viewFindCarDetail" data-id="{{item._id}}">
      <!-- <view class="find-car-info">
        <text class="find-car-price">￥{{item.price}}</text>
        <text class="find-car-title">{{item.title}}</text>
        <text class="find-car-style">{{item.bikeStyle}}款</text>
        <text class="find-car-mileage">{{item.mileage}}公里</text>
      </view> -->
      
      <t-cell title="{{item.title}}" description="{{item.bikeStyle}}款{{item.mileage}}公里￥{{item.price}}" hover arrow   />
    </view>
  </block>
  <t-action-sheet id="t-action-sheet" bind:selected="handleSelected" />

<t-button size="large" variant="outline" bind:tap="handleAction" block theme="primary">列表型</t-button>
</view>
import ActionSheet, { ActionSheetTheme } from 'tdesign-miniprogram/action-sheet/index';
    handleAction() {
        ActionSheet.show({
          theme: ActionSheetTheme.List,
          selector: '#t-action-sheet',
          context: this,
          items: [
            {
              label: '选项一',
            },
            {
              label: '选项二',
            },
            {
              label: '选项三',
            },
            {
              label: '选项四',
            },
          ],
        });
      },

[betavs]

就是把完整的项目例子提交到GitHub仓库