const tabComponent = {
  template: `
        <ul class="tabList">
          <li  v-for="item in list" :key="item.id"  @click='iconHandler(item)'>
              <img :src="current===item.id?item.checkedSrc:item.src" alt="">
              <p>{{item.text}}</p>
          </li>
        </ul>`,

  data() {
    return {
      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: "我的券"
        }
      ]
    }
  },

  props: {
    /* tab选中下标 */
    current: {
      type: Number,
      default: 1
    }
  },

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