pet_uni/components/FooterNav/index.vue

<template>
	<view class="foot-nav row">
		<view class="foot-nav-background-group">
			<view class="foot-nav-background">
				<view class="foot-nav-background-small"></view>
			</view>
		</view>
		<view class="foot-nav-button-group row">
			<view class="col-3 foot-nav-button" v-for="(item,index) in footGroup"
            :class="{active:(item.name === footCheck)}"
						:style="{
              backgroundImage:'url('+item.image+ ((index === footCheck)?'-active':'')+'.png)',
              backgroundSize:'auto '+((index === footCheck)?'81':'54')+'rpx',
              display:(item.is_show)?'flex':'none'
				    }" @click="selectItem(index)">

			</view>
		</view>
	</view>
</template>

<script>
	import {
		imghost
	} from '@/config/host.js'
	export default {
		props: {
      footGroup:{
        type:Object,
        default:{}
      },
      footCheck:{
        type:Number,
        default:0
      },
		},
		data() {
			return {
        check:0,
			}
		},
		onLoad() {
			console.log(this.footGroup)
		},
		methods: {
      selectItem(index){
        this.current = index;
        this.$emit('change',index)
      },
			commitFootCheck(item) {
				this.$store.commit('footCheck',item.name);
				this.$store.commit('title',item.title);
				console.log('commit');
			},
			isFootCheck() {
				// return this.;
			}
		},
    mounted() {
      this.check = this.footCheck;
    },
		watch: {
			"$store.state.footCheck": {
				handler(newVal, oldVal) {
					this.footCheck = newVal;
				}
			}
		}
	}
</script>

<style lang="scss">
	@import '@/components/FooterNav/components/index.scss';
</style>