html Vue 3：是带有选项卡图标的组件

col17t5w 于 2023-03-21 发布在其他

关注(0)|答案(2)|浏览(142)

我做了一个选项卡概述，为了不使API过载调用，我把它们放在一个循环中，如文档中所述：链接
这一切都工作，但我的标签有图标和翻译，我不确定如何实现它们。
我试着将标签对象更改为一个包含图标和翻译的数组，这很有效，但〈component：is =“tabs[currentTab]”不再有效，没有错误，没有控制台错误，只有空白标签。
我的问题是，我如何在脚本设置中使用这个Vue 3功能，以及图标和翻译？
组件如下：

<ul class="nav nav-tabs nav-fill nav-icons" id="tabsWithIcons" role="tablist">
                <li class="nav-item" role="presentation"
                    v-for="(_, tab) in tabs"
                    :key="tab"
                    :class="['tab-button', { active: currentTab === tab }]"
                    @click="currentTab = tab">
                    <button class="nav-link justify-content-center" :class="[{ active: currentTab === tab }]" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">
                        <BootstrapIcon icon="share-fill" />
                       <span>{{ tab }}</span>
                    </button>
                </li>
            </ul>
            <div class="tab-content my-4" id="myTabContent">
                <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
                  <component :is="tabs[currentTab]"></component>
                </div>
            </div>

下面是我的脚本代码：

import Home from '@/views/Home.vue'
import Contact from '@/views/Contact.vue'
import AboutMe from '@/views/AboutMe.vue'

import { ref } from 'vue'

const currentTab = ref('Home')

const tabs = {
  Home,
  Contact,
  AboutMe
}

"我试过了“
将选项卡= { }更改为：

const tabs = [
  { name: 'Home', icon: 'house-fill', translation: i18n('message')} ,
  { name: 'Contact', icon: 'telephone-fill', translation: i18n('message')} ,
  { name: 'AboutMe', icon: 'person-fill', translation: i18n('message')} ,
]

然后图标和选项卡标签工作（当我在模板中将选项卡更改为tab.name等），但选项卡内容保持空白，因为〈component：is=“tab[currentTab]”没有得到它...而且翻译也不工作。
我也尝试过创建一个getCurrentTab函数，循环通过选项卡数组并返回选项卡名称，但随后我得到了一些奇怪的void不是字符串错误...
有人能帮我找到正确的方向吗？
下面是代码沙箱：
https://codesandbox.io/p/sandbox/little-water-fyx9w8?file=%2Fsrc%2Fmain.js&selection=%5B%7B%22endColumn%22%3A22%2C%22endLineNumber%22%3A2%2C%22startColumn%22%3A22%2C%22startLineNumber%22%3A2%7D%5D

Html

来源：https://stackoverflow.com/questions/75696792/vue-3-is-component-with-tab-icons

2条答案

按热度按时间

xoefb8l81#

更新

在我的另一个问题中是answered。
<script setup>的解决方案

<script setup>
...
</script>
<script>
   export default {
      icon: 'home-icon',
      name: 'Home'
  }
</script>

只需将所有选项卡属性放入组件中

<template>
  <div class="tab">
    Home component
  </div>
</template>
<script>
  export default {
      name: 'Home',
      icon: 'house-fill'
  }
</script>

然后

<button
   v-for="(tabObj, tab, index) in tabs" 
   :key="tab"
   :class="['tab-button', { active: currentTab === tab }]"
   @click="currentTab = tab"
 >
  icon: {{tabObj.icon}}, name: {{ tabObj.name }}
</button>

以下是更新后的证监会Playground

赞(0）回复(0）举报 2023-03-21

frebpwbc2#

你对 tabs is array是正确的，您只需要向它们添加组件，然后将它们引用到<component />：

const tabs = [
  { name: 'Home', component: Home, icon: 'house-fill', translation: i18n('message')} ,
  { name: 'Contact', component: Contact, icon: 'telephone-fill', translation: i18n('message')} ,
  { name: 'AboutMe', component: AboutMe, icon: 'person-fill', translation: i18n('message')} ,
]

以及

<component :is="tabs[currentTab].component" />

对于上面的v-for，也需要修改，就像将tabs转换为array一样
解析示例
你的最小可复制的例子是从你提供的代码不同，我不明白为什么你这样做，但你将不得不移植自己的，因为他们是不同的

赞(0）回复(0）举报 2023-03-21

我来回答

html Vue 3：是带有选项卡图标的组件

2条答案

相关问题

热门标签

最新问答