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.

Sign up for GitHub

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

Jump to bottom

n-tabs、n-tab-pane渲染问题 #6689

Closed
5 tasks done
ashuicoder opened this issue Jan 7, 2025 · 7 comments · May be fixed by #6722
Closed
5 tasks done

n-tabs、n-tab-pane渲染问题 #6689

ashuicoder opened this issue Jan 7, 2025 · 7 comments · May be fixed by #6722
Labels
waiting for response

Comments

@ashuicoder
Copy link

ashuicoder commented Jan 7, 2025 •
edited
Loading

描述错误

在vue3中使用component的is方式渲染n-tabs和n-tab-pane并不能正确渲染出来。

RenderComponent.vue:

<template>
  <component :is="component" :name :tab>
    <slot></slot>
  </component>
</template>

<script setup lang="ts">
const props = defineProps<{
  component: string;
  name?: string;
  tab?: string;
}>();
</script>

<style scoped></style>

index.vue:

<template>
  <n-card title="没有问题" style="margin-bottom: 16px">
    <n-tabs type="line" animated>
      <n-tab-pane name="oasis" tab="Oasis"> Wonderwall </n-tab-pane>
      <n-tab-pane name="the beatles" tab="the Beatles"> Hey Jude </n-tab-pane>
      <n-tab-pane name="jay chou" tab="周杰伦"> 七里香 </n-tab-pane>
    </n-tabs>
  </n-card>

  <n-card title="有问题">
    <RenderComponent
      component="n-tabs"
      type="line"
      animated
      default-value="oasis"
    >
      <RenderComponent component="n-tab-pane" name="oasis" tab="Oasis">
        Wonderwall
      </RenderComponent>

      <RenderComponent
        component="n-tab-pane"
        name="the beatles"
        tab="the Beatles"
      >
        Hey Jude
      </RenderComponent>
      <RenderComponent component="n-tab-pane" name="jay chou" tab="周杰伦">
        七里香
      </RenderComponent>
    </RenderComponent>
  </n-card>

  <NH1 type="error">为什么用component渲染不出来？</NH1>
</template>

<script setup lang="ts">
import { NH1 } from "naive-ui";
import RenderComponent from "./RenderComponent.vue";
</script>

<style scoped></style>

但是如果我不用子组件直接这样使用是可以的：

<n-card title="有问题">
    <component is="n-tabs" type="line" animated default-value="oasis">
      <component is="n-tab-pane" name="oasis" tab="Oasis">
        Wonderwall
      </component>

      <component is="n-tab-pane" name="the beatles" tab="the Beatles">
        Hey Jude
      </component>
      <component is="n-tab-pane" name="jay chou" tab="周杰伦">
        七里香
      </component>
    </component>
  </n-card>

是不是因为attrs没有被正确绑定的原因？

复现步骤

直接运行给的代码就能复现

最小复现链接

https://github.com/ashuicoder/naive-ui-dmeo

系统信息

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 13th Gen Intel(R) Core(TM) i5-13490F
    Memory: 14.50 GB / 31.84 GB
  Binaries:
    Node: 20.18.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.15.0 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (119.0.2151.58)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    naive-ui: ^2.41.0 => 2.41.0 
    vue: ^3.5.13 => 3.5.13

使用的包管理器

pnpm

验证
@ashuicoder ashuicoder added the untriaged need to sort label Jan 7, 2025
@jahnli jahnli added waiting for response and removed untriaged need to sort labels Jan 7, 2025
@jahnli
Copy link
Collaborator

jahnli commented Jan 7, 2025

Provide a based on Playground or CodeSandbox or stackblitz [Minimal, Reproducible Example] (https://stackoverflow.com/help/minimal-reproducible-example)

@ashuicoder
Copy link
Author

Provide a based on Playground or CodeSandbox or stackblitz [Minimal, Reproducible Example] (https://stackoverflow.com/help/minimal-reproducible-example)

最小复现链接

@jahnli
Copy link
Collaborator

jahnli commented Jan 7, 2025

image

@ashuicoder
Copy link
Author

image

https://codesandbox.io/p/live/495ed23f-65b5-498a-8119-679ac55196ef

@ashuicoder
Copy link
Author

看一下能不能看到，我改了一下权限

@Rolaka
Copy link

Rolaka commented Jan 8, 2025

naive-ui/src/tabs/src/Tabs.tsx

Lines 817 to 826 in c96427d

const tabPaneChildren = defaultSlot
? flatten(defaultSlot()).filter((v) => {
return (v.type as any).__TAB_PANE__ === true
})
: []
const tabChildren = defaultSlot
? flatten(defaultSlot()).filter((v) => {
return (v.type as any).__TAB__ === true
})
: []

Tabs find TabPane based on a special component option tag, RenderComponent does not have this flag.

Don't call components in weird way.

@jahnli
Copy link
Collaborator

jahnli commented Jan 24, 2025

Some components can't be repackaged.

@jahnli jahnli closed this as completed Jan 24, 2025
@jahnli jahnli mentioned this issue Jan 24, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
waiting for response
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(n-tabs): add n-tab-pane usage prompts jahnli/naive-ui
3 participants
@Rolaka @jahnli @ashuicoder