暂时保存一下窑炉的那个切换按钮组

src/components/DropdownBtnYaolu.vue

@@ -0,0 +1,86 @@
+<template>
+	<div class="drop-down-btn">
+		<button class="top-btn" @click='toggleExpand'><span style="margin-right: 3px;">{{active}}</span><svg-icon class-name="arrow" icon-class="arrow" :style="{transform:isExpand?'rotate(180deg)':'rotate(0deg)'}"/></button>
+		<div v-show="isExpand" class="btn-box">
+			<button
+				class="btn"
+				v-for="opt in options"
+				:key="opt"
+				@click="clickBtn(opt)"
+				v-show="active !== opt">
+				<span class="btn-text">
+					{{ opt }}
+				</span>
+			</button>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'DropDownBtn',
+	components: {},
+	props: ['options', 'active'],
+	data() {
+		return {
+			isExpand: false
+		};
+	},
+	computed: {},
+	methods: {
+		clickBtn(opt) {
+			this.$emit('emitFun', opt)
+			this.isExpand = !this.isExpand
+		},
+		toggleExpand() {
+			this.isExpand = !this.isExpand
+		}
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.drop-down-btn {
+	z-index: 1000;
+	button {
+		border: none;
+		appearance: none;
+		outline: none;
+		color: #fff;
+		font-size: 14px;
+		padding: 8px 5px 8px 8px;
+		height: 32px;
+	}
+	.top-btn {
+		background: #02457E;
+		border-radius: 5px;
+		cursor: pointer;
+		.arrow {
+			font-size: 16px;
+		}
+	}
+	.btn-box {
+		.btn {
+			display: block;
+			width: 100%;
+			background: #03233C;
+			&:hover {
+				background: #02457E;
+				transition: all 0.5s ease-out;
+			}
+			.btn-text{
+				padding: 0px 5px 6px;
+				border-bottom: 1px solid #010D18;
+			}
+		}
+		.btn:last-child{
+			border-bottom-right-radius: 5px;
+			border-bottom-left-radius: 5px;
+			.btn-text{
+				height: 16px;
+				border-bottom: none;
+			}
+		}
+	}
+}
+</style>