使用vue制作一个简单的tabs标签页组件

<template>
  <div id="text_property">
    <div class="tabBar">
      <div style="display: flex;justify-content: center;">
        <span
          v-for="item in items"
          :key="item.value"
          style="height:120px;width:100px;display:inline-block;"
        >
          <label
            class="tabBar_label"
            :style="item.value===selTab?'height: 40px;width: 70px;background:#6666ff;':'height: 40px;width: 70px;background:#cc3399;'"
            ><input
              :value="item.value"
              type="radio"
              name="tabs"
              @click="tabClick"
            />{{ item.title }}</label
          >
          <span
            style="height:1px;width:100px;display:inline-block;background:red;"
          ></span>
        </span>
      </div>
    </div>
    <div v-for="(tabItem,idx) in items" :key="tabItem[idx]">
        <div v-if="tabItem.value===selTab">{{tabItem.content}}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selTab: 'a',
      items: [
        { value: "a", title: "tab1", content: "1111" },
        { value: "b", title: "tab2", content: "2222" },
        { value: "c", title: "tab3", content: "333" }
      ]
    };
  },
  created() {},
  mounted() {},
  onEvents: {},
  computed: {},
  watch: {},
  methods: {
    tabClick(e) {
      this.selTab = e.target.value;
    }
  }
};
</script>
<style lang="scss" scoped>
#text_property{
  height: 300px;
  width: 300px;
  border: 1px solid rgb(93, 150, 235);
}
.tabBar input[type="radio"] {
  display: none;
}
.tabBar_label {
  display: inline-block;
  border: 1px solid fuchsia;
}
</style>

在这里插入图片描述

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值