vuejs实现标签选项卡动态更改css样式的方法

实现标签选项卡动态更改CSS样式是Vue.js开发中常见的需求之一。下面是一份实现该功能的完整攻略。

第一步：创建Vue组件

我们首先需要创建一个Vue组件来实现标签选项卡的功能和CSS样式的动态更改。下面是一个基本的组件示例。

<template>
  <div class="tab">
    <div class="tab-header">
      <div class="tab-item" :class="{'active': active === index}" v-for="(item, index) in items" :key="index" @click="setActive(index)">
        {{ item }}
      </div>
    </div>
    <div class="tab-content">
      <slot v-bind:active="active"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tab',
  props: {
    items: Array,
    activeIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      active: this.activeIndex
    };
  },
  methods: {
    setActive(index) {
      this.active = index;
    }
  }
};
</script>

这个组件使用了一个 items 数组来生成标签选项卡的标题。当标签被点击时，我们会动态更改 active 属性来控制哪个标签被选中。接下来我们需要为组件添加样式。

第二步：为组件添加CSS样式

我们为组件添加的样式主要有两个部分。一部分是为标签选项卡的头部添加样式，另一部分则是为内容区域添加样式。

.tab {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tab-header {
  display: flex;
  margin-bottom: 10px;
}

.tab-item {
  padding: 10px;
  font-weight: bold;
  cursor: pointer;
}

.tab-item.active {
  background-color: #009688;
  color: #fff;
}

.tab-content {
  border: 1px solid #ddd;
  padding: 10px;
}

这个样式表定义了一个 .tab 类，它设置了标签选项卡的布局。.tab-header 类用于设置标签选项卡的头部部分，.tab-item 类用于定义标签选项卡的每个选项。当一个选项被选中时，会自动添加 .active 类，我们使用该类来改变背景颜色和文字颜色。

最后，我们为选项卡的内容区域添加了一些基本的样式。

第三步：在Vue应用中使用Tab组件

现在我们已经创建了一个Tab组件，并为它添加了CSS样式。接下来，我们需要在Vue项目中引入组件并使用它。

<template>
  <div>
    <tab :items="items">
      <template v-for="(item, index) in items" :slot="index" :slot-scope="{active}">
        <div v-if="active === index">Content {{ item }}</div>
      </template>
    </tab>
  </div>
</template>

<script>
import Tab from '@/components/Tab.vue';

export default {
  name: 'Demo',
  components: {
    Tab
  },
  data() {
    return {
      items: ['One', 'Two', 'Three']
    };
  }
};
</script>

在这个示例中，我们引入了 Tab 组件并将 items 数组传递给它。我们还使用了 v-for 来为每个选项创建内容，每个内容都绑定了 active 来控制其是否显示。

示例1：动态改变背景色

在此示例中，我们通过点击标签选项卡中的每一项，改变选项卡背景颜色。

<template>
  <div>
    <tab :items="items">
      <template v-for="(item, index) in items" :slot="index" :slot-scope="{active}">
        <div v-if="active === index" :style="{ 'background-color': colors[index] }">Content {{ item }}</div>
      </template>
    </tab>
  </div>
</template>

<script>
import Tab from '@/components/Tab.vue';

export default {
  name: 'Demo',
  components: {
    Tab
  },
  data() {
    return {
      items: ['One', 'Two', 'Three'],
      colors: ['#FFC107', '#4CAF50', '#2196F3']
    };
  }
};
</script>

在这个示例中，我们添加了一个 colors 数组，用于存储每个选项的背景颜色。当选项卡被点击时，我们使用 v-if 和 active 来判断当前显示的选项卡，然后将其背景颜色设置为相应的颜色。

示例2：动态改变字体大小

在这个示例中，我们通过点击标签选项卡中的每一项，改变选项卡中显示文字的字体大小。

<template>
  <div>
    <tab :items="items">
      <template v-for="(item, index) in items" :slot="index" :slot-scope="{active}">
        <div v-if="active === index" :style="{ 'font-size': sizes[index] + 'px' }">Content {{ item }}</div>
      </template>
    </tab>
  </div>
</template>

<script>
import Tab from '@/components/Tab.vue';

export default {
  name: 'Demo',
  components: {
    Tab
  },
  data() {
    return {
      items: ['One', 'Two', 'Three'],
      sizes: [24, 16, 12]
    };
  }
};
</script>

在这个示例中，我们添加了一个 sizes 数组，用于存储每个选项的字体大小。当选项卡被点击时，我们使用 v-if 和 active 来判断当前显示的选项卡，然后将其字体大小设置为相应的大小。