在Vue.js中使用图标代替文本作为选项卡

问题描述

我想使下部菜单类似于VK，在其中单击图标，然后内容会更改。我实现了不同的内容，但是我不能使每个选项卡都有其自己的图标。

我提供了屏幕截图和代码。不注意样式，我首先需要了解使用Vue CLI的逻辑。

<template>
    <div id="app">
        <font-awesome-icon 
            icon="user-secret" 
            v-for="tab in tabs" 
            :key='tab' 
            @click="currentTab = tab" 
            :class="['tab-button',{active: currentTab === tab}]"
        > 
            {{ tab }}
        </font-awesome-icon>
    
        <component v-bind:is="currentTabComponent"></component>
    </div>
</template>
    
<script>
import Posts from './Posts.vue'
import List from './List.vue'
    
export default {
    data () {
        return {
            currentTab: 'Posts',tabs: ['Posts','List'],icon: 'bell'
        }
    },components: {
        tabPosts: Posts,tabList: List
    },computed: {
        currentTabComponent() {
            return 'tab-' + this.currentTab.toLowerCase()
        }
    }
}
</script>
    
<style scoped>
body {
    overflow: auto;
    padding: 0;
    margin: 0;
}
    
#app {
    position: relative;
    width: 320px;
    height: 400px;
    border:  solid 1px black;
}
.tab-button.active {
    position: relative;
    color: red;
    height: 50px;
    width: 50px; 
}
    
.tab-button {
    position: relative;
    float:  right;
    bottom: 10px;
    height: 50px;
    width: 50px; 
}
</style>

解决方法

尝试一下：

       <div 
            v-for="tab in tabs" 
            :key='tab' 
            @click="currentTab = tab" 
            :class="['tab-button',{active: currentTab === tab}]"
        > 
        <font-awesome-icon >
            icon="user-secret"
        </font-awesome-icon >
    </div>

此@click="currentTab = tab" 也需要重构