[Vue.js/Nuxt.js] タブなどを横一列で表示する時に、長さに応じて横幅が変わるようにしたい場合はcssでがんばらなくてもできる


概要

[Home] [Company] [Recruit]

こういうタブ一覧みたいなやつが、横一列に広がってて長さが長くなるに応じて短くするコンポーネントをつくります。

コンポーネント名はタブ一覧がTabList、タブがTabItemとかでいいと思います。(適当)

多分scssだけでもうまくやればできるんですけど、結構めんどくさそうだったので配列の長さのpropsを渡したほうが早いなと思いました

なのでスピード重視のコードです


解決法


  • タブコンポーネントにタブ一覧Arrayのlengthをわたす

  • タブコンポーネントで長さを変えたい要素に style 属性を付ける

  • style内で width: calc(100% / アイテム数) を設定してやればOK


サンプルコード


タブ一覧コンポーネント

<template>

<div class="switching-tabs">
<SwitchingTab
v-for="(item, i) in tabItems"
:key="`switching-tabs--${i}`"
:name="item.name"
:link="item.link"
:tab-items-length="tabItems.length"
class="switching-tabs__tab"
/>
</div>
</template>

<script>
import SwitchingTab from '~/components/Common/SwitchingTab';

export default {
components: {
SwitchingTab
},
props: {
tabItems: {
type: Array,
required: true
}
}
};
</script>

<style lang="scss" src="./style.scss" scoped>
</style>

.switching-tabs {

display: flex;
}


タブコンポーネント

<template>

<a :href="link" :style="tabStyle" class="switching-tab">
<div class="switching-tab__container">
<label class="switching-tab__container__label">{{ name }}</label>
</div>
</a>
</template>

<script>
export default {
props: {
name: {
type: String,
required: true
},
link: {
type: String,
required: true
},
tabItemsLength: {
type: Number,
required: true
}
},
computed: {
tabStyle() {
return {
width: `calc(100% / ${this.tabItemsLength})`
};
}
}
};
</script>

<style lang="scss" src="./style.scss" scoped>
</style>

.switching-tab {

text-decoration: none;

&__container {
display: flex;
justify-content: center;
padding: 10px 0;
border: solid 1px #000;
border-radius: 10px;
background-color: #fff;

&__label {
color: #000;
font-size: 1.3rem;
font-weight: 600;
}
}
}


おわり

こんな感じのコードを埋め込めばそれっぽいタブ一覧みたいなコンポーネントができると思います。