<template> <div class="tab-style"> <span @click="tabNum1 = 0;sendTabNum()"><img :src="tabNum == 0?check1:uncheck1"></span> <span @click="tabNum1 = 1;sendTabNum()"><img :src="tabNum == 1?check2:uncheck2" ></span> <span @click="tabNum1 = 2;sendTabNum()"><img :src="tabNum == 2?check3:uncheck3"></span> </div> </template> <script> import check1 from '@/assets/userBind/check1.png' import check2 from '@/assets/userBind/check2.png' import check3 from '@/assets/userBind/check3.png' import uncheck1 from '@/assets/userBind/uncheck1.png' import uncheck2 from '@/assets/userBind/uncheck2.png' import uncheck3 from '@/assets/userBind/uncheck3.png' export default { props: { 'tabNum': { default: 0, type: Number, }, }, data () { return { tabNum1: this.tabNum, check1: check1, check2: check2, check3: check3, uncheck1: uncheck1, uncheck2: uncheck2, uncheck3: uncheck3, } }, methods: { sendTabNum () { this.$emit('getTabNum', this.tabNum1) }, }, } </script> <style lang="less" scoped> .tab-style{ display:flex; justify-content: center; padding-top:12px; padding-bottom: 8px; align-items: center; box-shadow:0 2px 3px 0 rgba(220,220,221,0.50); span{ display: block; width:112px; height: 32px; border-radius:16px; } img{ width:112px; height: 32px; margin-right:5.7px; } span:nth-of-type(2){ margin:0 10px; } } </style>