如何解决在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"
也需要重构
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。