让 Vue 页面骚起来：用 v-for 解锁标签栏控件

2023-12-30 06:31:03

当我们对 Vue.js 的掌握日臻完善，是否应该探索如何让 Vue 页面焕发独特的魅力？本文将向你介绍一个独辟蹊径的方法，使用 v-for 渲染一个响应式的标签栏控件，让你的 Vue 页面从此与众不同。

乍一听标签栏的设计似乎令人头皮发麻，但本文将打破这个迷思，为你展示如何利用 v-for 的强大功能优雅地实现标签栏控件。

使用 v-for 渲染标签栏

传统上，标签栏是用背景图或一系列 div 来实现的，但使用 v-for 可以带来更灵活和可扩展的解决方案。

<template>
  <div class="container">
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <a :href="item.href">{{ item.label }}</a>
      </li>
    </ul>
  </div>
</template>

export default {
  data() {
    return {
      items: [
        { href: '#item-1', label: '标签 1' },
        { href: '#item-2', label: '标签 2' },
        // ... 更多的标签
      ],
    };
  },
};

通过将 items 数据数组传递给 v-for 指令，我们动态地渲染标签栏，每个标签项都有一个唯一的 href 和标签文本。

封装 wapper 组件

为了实现代码的重用性和可维护性，我们可以创建一个名为 wapper 的公用组件来封装标签栏容器。

<template>
  <div class="wapper">
    <slot></slot>
  </div>
</template>

export default {
  name: 'Wapper',
};

然后，在父组件中使用 wapper 组件来包含标签栏：

<template>
  <wapper>
    <ul>
      <!-- ... 标签栏内容 ... -->
    </ul>
  </wapper>
</template>

响应式设计

为了确保标签栏在不同屏幕尺寸下都正常显示，我们需要添加一些响应式样式：

.container {
  display: flex;
  justify-content: center;
  width: 100%;
}

ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  margin: 0 10px;
  padding: 10px;
}

@media screen and (max-width: 768px) {
  ul {
    flex-direction: column;
  }

  li {
    margin: 0;
  }
}