Vue封装一个tab组件

目录

1、封装好的组件使用方式。

2、tabs的封装代码。

3、单个tab的封装。

---

1、封装好的组件使用方式。

<!--  -->
<template>
  <div class=''>
    <GetBagTabs class="tabs" v-model="activeIndex">
      <GetBagTab title="扫码取袋" name="1">
        扫码取袋展示内容
      </GetBagTab>
      <GetBagTab title="支付取袋" name="2">
        支付取袋展示内容
      </GetBagTab>
    </GetBagTabs>
  </div>
</template>

<script>
import GetBagTabs from './components/GetBagTabs'
import GetBagTab from './components/GetBagTab'
export default {
  name: '',
  components: {
    GetBagTabs,
    GetBagTab
  },
  directives: {},
  filters: {},
  mixins: [],
  model: {},
  props: {},
  data () {
    return {
      activeIndex: 2
    }
  },
  computed: {},
  watch: {},
  beforeCreate () {},
  created () {

  },
  beforeMount () {},
  mounted () {

  },
  beforeUpdate () {},
  updated () {},
  activated () {},
  deactivated () {},
  beforeDestroy () {},
  destroyed () {},
  // 方法集合
  methods: {

  }
}
</script>
<style rel='stylesheet/less' lang='less' scoped>
//@import url();
</style>

2、tabs的封装代码。

<!-- 取袋方式的tab组件 -->
<template>
  <div ref="tabs" class="way_taps">
    <!-- tabs导航区 -->
    <div class="tabs_wrap">
      <div class="tab" :class="{'active': value === item.name}" v-for="(item, i) of tabList" :key="i" @click="chooseTab(i)">
        {{item.title}}
      </div>
    </div>
    <!-- 展示内容的内容区 -->
    <div class="content_wrap">
      <slot></slot>
    </div>
  </div>
</template>

<script>

export default {
  name: 'GetBagTabs',
  components: {},
  directives: {},
  filters: {},
  mixins: [],
  model: {
    prop: 'value',
    event: 'click'
  },
  props: {
    // v-model绑定的值，如果有tab中有name对应name，没有则对应index
    value: {
      type: [String, Number],
      default: 0
    }
  },
  data () {
    return {
      activeIndex: 0,
      tabComponentsList: [],
      tabList: []
    }
  },
  computed: {},
  watch: {
    value: {
      handler  (n, o) {
        console.log('valuevalue', n, o)
        console.log('tabComponentsList', this.tabComponentsList)
        this.updatedTab()
      },
      immediate: true
    }
  },
  beforeCreate () {},
  created () {

  },
  beforeMount () {},
  mounted () {
    this.getTabList()
  },
  beforeUpdate () {},
  updated () {},
  activated () {},
  deactivated () {},
  beforeDestroy () {},
  destroyed () {},
  // 方法集合
  methods: {
    // 切换tab时的更新限时对应tab内容
    updatedTab () {
      this.tabComponentsList.forEach((item, index) => {
        console.log('item', item)
        let matchName = item.name || index
        console.log('matchName', matchName)
        if (this.value === matchName) {
          console.log('=== matchName', matchName)
          item.showContent = true
        } else {
          item.showContent = false
        }
      })
    },
    chooseTab (index) {
      let tab = this.tabList[index]
      let name = tab.name
      let title = tab.title
      this.activeIndex = index
      this.$emit('click', name, title)
    },
    getTabList () {
      this.tabComponentsList = this.$children.filter(item => item.$options.name === 'GetBagTab')
      this.tabList = this.tabComponentsList.map((item, index) => {
        return {
          title: item.title,
          name: item.name || index
        }
      })

      // 解决首次加载不更新显示问题
      this.updatedTab()
    }
  }
}
</script>
<style rel='stylesheet/less' lang='less' scoped>
//@import url();
.way_taps {
  text-align: center;
  .tabs_wrap {
    height: 0.7rem;
    line-height: 0.7rem;
    background-color: #f3f3f3;
    border-radius: 40px;
    display: inline-flex;
    margin-top: 0.2rem;
    color: #8c8c8c;
    box-shadow: 0px 4px 11px 0px rgba(0,0,0,0.11);
    .tab {
      padding: 0 0.4rem;
    }
    .active {
      color: #fff;
      background-color: #46CB71;
      border-radius: 40px;

    }
  }
  .content_wrap {
  }
}
</style>

3、单个tab的封装。

<!-- 取袋方式的tab组件 -->
<template>
  <div ref="tab" class="tap" v-show="showContent">
    <slot></slot>
  </div>
</template>

<script>

export default {
  name: 'GetBagTab',
  components: {},
  directives: {},
  filters: {},
  mixins: [],
  model: {},
  props: {
    // tab的标签栏。
    title: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      showContent: false
    }
  },
  computed: {},
  watch: {},
  beforeCreate () {},
  created () {

  },
  beforeMount () {},
  mounted () {

  },
  beforeUpdate () {},
  updated () {},
  activated () {},
  deactivated () {},
  beforeDestroy () {},
  destroyed () {},
  // 方法集合
  methods: {
    payGetBag () {},
    qrcodeGetBag () {}
  }
}
</script>
<style rel='stylesheet/less' lang='less' scoped>
//@import url();
.tap {
}
</style>