Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[dropdown] 生产模式下,在vue3.4.x,tabs→tab-panel→组件中使用dropdown报错 #4003

Closed
Tracked by #4111
YahaneXy opened this issue Mar 7, 2024 · 3 comments
Labels

Comments

@YahaneXy
Copy link

YahaneXy commented Mar 7, 2024

tdesign-vue-next 版本

1.8.1

重现链接

No response

重现步骤

<template>
  <div>
    <tabs>
      <tab-panel
        v-for="(item, index) in tabList"
        :key="index"
        :label="item.label"
        :value="item.value"
      >
        <template #label>
          <dropdown
            :min-column-width="128"
            :popup-props="{
              overlayClassName: 'route-tabs-dropdown',
              onVisibleChange: (visible: boolean, ctx: PopupVisibleChangeContext) =>
                handleTabMenuClick(visible, ctx, item.value),
              visible: active === item.value,
            }"
          >
            {{ item.label }}
            <template #dropdown>
              <dropdown-menu>
                <dropdown-item>
                  <refresh-icon />
                  123321
                </dropdown-item>
              </dropdown-menu>
            </template>
          </dropdown>
        </template>
      </tab-panel>
    </tabs>
  </div>
</template>

<script setup lang="ts">
import { PopupVisibleChangeContext } from "tdesign-vue-next/es/popup/type";
import { ref } from "vue";
import {
  Tabs,
  TabPanel,
  Dropdown,
  DropdownMenu,
  DropdownItem,
} from "tdesign-vue-next";

const tabList = [
  {
    label: "选项卡一",
    value: 1,
  },
  {
    label: "选项卡二",
    value: 2,
  },
  {
    label: "选项卡三",
    value: 3,
  },
];
const active = ref(-1);
const handleTabMenuClick = (
  visible: boolean,
  ctx: PopupVisibleChangeContext,
  path: number
) => {
  if (ctx.trigger === "document") active.value = -1;
  if (visible) active.value = path;
};
</script>

期望结果

正常显示下拉框

实际结果

错误提示:cannot read properties of null (reading 'refs')

框架版本

3.4.x

浏览器版本

122.0.6261.70

系统版本

Windows(22H2)

Node版本

20.9.0

补充说明

No response

Copy link
Contributor

github-actions bot commented Mar 7, 2024

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

@YahaneXy YahaneXy changed the title [dropdown] 在vue3.4.x,tabs→tab-panel→组件中使用dropdown会刨槽 [dropdown] 在vue3.4.x,tabs→tab-panel→组件中使用dropdown无法正常显示下拉 Mar 7, 2024
@YahaneXy YahaneXy changed the title [dropdown] 在vue3.4.x,tabs→tab-panel→组件中使用dropdown无法正常显示下拉 [dropdown] 在vue3.4.x,tabs→tab-panel→组件中使用dropdown报错 Mar 7, 2024
@YahaneXy YahaneXy changed the title [dropdown] 在vue3.4.x,tabs→tab-panel→组件中使用dropdown报错 [dropdown] 生产模式下,在vue3.4.x,tabs→tab-panel→组件中使用dropdown报错 Mar 7, 2024
@uyarn uyarn added the vue 3.4 label Mar 7, 2024
@hdszy
Copy link

hdszy commented Apr 15, 2024

解决了吗?

@jesseice
Copy link

还没解决吗

@uyarn uyarn added the to be published to be published label Dec 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants