前端自定义按钮

自定义按钮

HTML

		<div id='app'>
			<div class='button'>
			<div id='aqi' class='btn1 onClick' name='aqi' @click='EventChange'>AQI</div>
			<div id='pm25' class='btn2' name='pm25' @click='EventChange'>PM2.5</div>
			<div id='pm10' class='btn3' name='pm10' @click='EventChange'>PM10</div>
			<div id='so2' class='btn4' name='so2' @click='EventChange'>SO2</div>
		</div>
		</div>

JS

	<script>
		new Vue({
			el: '#app',
			data:{
				preButton: 'aqi', //存储上一个按钮的ID
			},
			created(){
				
			},
			mounted(){
				
			},
			methods:{
				EventChange(e){
					let arr_class = e.target.className.split(' ') //判断当前点击的按钮是否为已选按钮
					if(arr_class.length > 1){
						
					}else{
						//把上一个按钮的样式更改为没有点击的样式
						document.getElementById(this.preButton).className = document.getElementById(this.preButton).className.split(' ')[0];
						//把当前点击的按钮的样式更改为点击样式
						e.target.className = arr_class[0] + ' '+'onClick';
						//把当前按钮的ID赋值给preButton 方便下次点击时找到上一个按钮
						this.preButton = e.target.id;
					}
				},
			}
		})
	</script>

CSS

			.button{
				text-align: center;
				display: flex;
			}
			.button div{
				width: 50px;
				height: 30px;
				line-height: 30px;
			}
			.btn1{
				border: 1px #bbbbbb solid;
				border-bottom-left-radius: 5px;
				border-top-left-radius: 5px;
			}
			.btn2{
				border-top: 1px #bbbbbb solid;
				border-bottom: 1px #bbbbbb solid;
			}
			.btn3{
				border: 1px #bbbbbb solid;
				border-right: 0;
			}
			.btn4{
				border: 1px #bbbbbb solid;
				border-bottom-right-radius: 5px;
				border-top-right-radius: 5px;
			}
			/* 点击按钮的样式 */
			.onClick{ 
				background-color: #1989FA;
				color: #FFFFFF;
			}
			/* 不点击按钮的样式 */
			.unClick{
				background-color: #FFFFFF;
				color: #000000;
			}