vue项目table切换

Posted 2020-12-07 fancy1486450630

html

<template>
	<div class="HeaderBox">
		<div :class="[‘HeaderButtonBox‘,current == item.path ? ‘active‘ : ‘‘]" @click="clickHeaderBtn(item.path)" v-for="(item,index) in setList"
		 :key="index">
			<img :src="current == item.path ? item.selectImg : item.img" />
			<span>{{item.name}}</span>
		</div>
		<!-- <div style="margin-top: 50px;">
			<button @click="voiceTyping">语言打字</button>
			<button @click="VoiceTranstate">语言翻译</button>
		</div> -->
	</div>
</template>

js

	data() {
			return {
				current: ""
			}
		},
//所需要的循环列表
computed: {
			setList() {
				return [{
					name: this.$i18n.t(‘header.languageSet‘),
					path: "/LanguageSet",
					img: require(‘../../assets/img/ic_menu_language_n.png‘),
					selectImg: require(‘../../assets/img/ic_menu_language_s.png‘)
				}, {
					name: this.$i18n.t(‘header.basicSet‘),
					path: "/basicSetting",
					img: require(‘../../assets/img/ic_menu_setup_n.png‘),
					selectImg: require(‘../../assets/img/ic_menu_setup_s.png‘)
				}, {
					name: this.$i18n.t(‘header.languageInstruction‘),
					path: "/OrderSet",
					img: require(‘../../assets/img/ic_menu_microphone_n.png‘),
					selectImg: require(‘../../assets/img/ic_menu_microphone_s.png‘)
				}]
			}
		},
//点击切换路由
methods: {
			clickHeaderBtn(path) {
				if (this.$route.path == path) return;
				this.$router.push({
					path: path,
					query: {
						pathStr: path
					}
				});
			},
//切换标题选中
created() {
			this.current = this.$route.query.pathStr ? this.$route.query.pathStr : "/LanguageSet";
		}

css

	.HeaderBox {
		width: 140px;
		height: 515px;
		display: inline-block;
		float: left;
		background-color: #FAFAFA;
	}

	.HeaderButtonBox {
		height: 48px;
		width: 100%;
		text-align: center;
		line-height: 48px;
	}

	.HeaderButtonBox img {
		vertical-align: middle;
		width: 24px;
		height: 24px;
		margin-right: 5px;
		font-size: 14px;
		color: #333333;
		float: left;
		margin: 11px 0 0 10px;
	}

	.active {
		color: #3b8fe9;
		background-color: #ebf7fe;
		box-sizing: border-box;
		border-right: 2px solid #3b8fe9;
	}

	button {
		width: 85px;
		height: 30px;
		background: none;
	}