const tabComponent = {
  template: `
        <ul class="tabList">
          <li  v-for="item in tabComponent.list" :key="item.id"  @click='tabComponent.iconHandler(item)'>
              <img :src="current===item.id?item.checkedSrc:item.src" alt="">
              <p>{{item.text}}</p>
          </li>
        </ul>`,
  props: {
    /* tab选中下标 */
    current: {
      type: Number,
      default: 1
    }
  },

  /* tab数据列表 */
  list: [
    {
      id: 1,
      src: "./img/home.png",
      checkedSrc: "./img/checked_home.png",
      link: "./couponCollection.html",
      text: "首页"
    },
    {
      id: 2,
      src: "./img/order.png",
      checkedSrc: "./img/checked_order.png",
      link: "./myOrder.html",
      text: "订单"
    },
    {
      id: 3,
      src: "./img/coupon.png",
      checkedSrc: "./img/checked_coupon.png",
      link: "./myCoupon.html",
      text: "我的券"
    }
  ],

  /* 根据不同icon进行跳转 */
  iconHandler(item) {
    window.location.replace(item.link)
  }
}