feat: edit页面

src/views/SellerDashboard/MyListings/EditDetail/components/Radio.vue

@@ -0,0 +1,70 @@
+<template>
+	<div class="radio-button-group">
+		<button
+			v-for="item in options"
+			:key="item.key"
+			type="button"
+			:class="['radio-button', { 'is-active': modelValue === item.key }]"
+			@click="selectOption(item.key)"
+		>
+			{{ item.name }}
+		</button>
+	</div>
+</template>
+
+<script setup lang="ts">
+interface Option {
+	name: string | number
+	value: string | number | boolean
+	key: string
+	optype: boolean
+}
+
+const props = defineProps<{
+	modelValue: string | number | boolean | null // v-model 绑定的值
+	options: Option[] // 按钮选项数组
+}>()
+
+const emit = defineEmits<{
+	(e: "update:modelValue", value: any): void
+}>()
+
+const selectOption = (value: any) => {
+	if (props.modelValue !== value) {
+		emit("update:modelValue", value)
+	}
+}
+</script>
+
+<style lang="less" scoped>
+.radio-button-group {
+	display: flex;
+	gap: 8px;
+	flex-wrap: wrap;
+}
+
+.radio-button {
+	border: 1px solid #d9d9d9;
+	height: 3.2rem;
+	min-width: 8rem;
+	padding: 0 1.7rem;
+	color: #000;
+	cursor: pointer;
+	border-radius: 2rem;
+	outline: none;
+	background-color: #fff;
+	font-size: 1.2rem;
+	transition: all 0.2s ease;
+}
+
+.radio-button:hover {
+	border-color: #000;
+}
+
+.radio-button.is-active {
+	color: #fff;
+	background-color: #000;
+	border-color: #000;
+	font-family: pingfang_medium;
+}
+</style>