uniapp-vue3-微信小程序-按钮组wo-btn-group

采用uniapp-vue3实现, 是一款支持高度自定义的按钮组组件，支持H5、微信小程序（其他小程序未测试过，可自行尝试）

可到插件市场下载尝试： https://ext.dcloud.net.cn/plugin?id=15012

• 使用示例

<template>
	<view>
		<view class="name">按钮组组件: wo-btn-group</view>
		<view class="card">
			<view class="header">默认样式(包括disabled禁用)：</view>
			<view class="content">
				<woBtnGroup :default-value="state.value" @change="onChange"></woBtnGroup>
			</view>
		</view>
		<view class="card">
			<view class="header">按钮形状：椭圆(默认)、方形、圆形</view>
			<view class="content">
				<view class="box">
					<view class="title">默认椭圆：</view>
					<woBtnGroup :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup>
				</view>
				<view class="box">
					<view class="title">方形：</view>
					<woBtnGroup :shape="'space'" :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup>
				</view>
				<view class="box">
					<view class="title">圆形（圆形无边框）：</view>
					<woBtnGroup :shape="'round'" :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="header">轮廓：</view>
			<view class="content">
				<view class="box">
					<woBtnGroup outline :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup>
				</view>
				<view class="box">
					<woBtnGroup outline :shape="'space'" :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup>
				</view>
				<view class="box">
					<woBtnGroup outline :shape="'round'" :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="header">自定义颜色：</view>
			<view class="content">
				<view class="box">
					<woBtnGroup outline :color="'orange'" :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup>
				</view>
				<view class="box">
					<woBtnGroup :color="'orange'" :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="header">自定义边框：</view>
			<view class="content">
				<view class="box">
					<view class="title">无边框：</view>
					<woBtnGroup :border-obj="state.borderStyle1" :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup>
				</view>
				<view class="box">
					<view class="title">虚线边框：</view>
					<woBtnGroup outline :border-obj="state.borderStyle2" :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup>
				</view>
				<view class="box">
					<view class="title">圆角幅度：</view>
					<woBtnGroup outline :border-obj="state.borderStyle3" :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup>
				</view>
				<view class="box">
					<view class="title">边框宽度：</view>
					<woBtnGroup :border-obj="state.borderStyle4" :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="header">自定义暗黑模式：</view>
			<view class="content">
				<view class="box dark1">
					<woBtnGroup :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup>
				</view>
				<view class="box dark1">
					<woBtnGroup :shape="'round'" :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup>
				</view>
				<view class="box dark dark-border">
					<woBtnGroup :shape="'round'" :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup>
				</view>
				<view class="box dark dark-border">
					<woBtnGroup :border-obj="state.borderStyle1" :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup>
				</view>
				<view class="box dark dark-border1">
					<woBtnGroup :shape="'space'" :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup>
				</view>
				<view class="box dark dark-border1">
					<woBtnGroup :border-obj="state.borderStyle1" :shape="'space'" :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import woBtnGroup from './woBtnGroup.vue'
import { reactive } from 'vue';

const state = reactive({
	borderStyle1: {
		isShow: false,
		size: '4rpx',
		style: 'dashed',
		radius: '70rpx'
	},
	borderStyle2: {
		isShow: true,
		size: '4rpx',
		style: 'dashed',
		radius: '70rpx'
	},
	borderStyle4: {
		isShow: true,
		size: '12rpx',
		style: 'solid',
		radius: '70rpx'
	},
	borderStyle3: {
		isShow: true,
		size: '4rpx',
		style: 'solid',
		radius: '16rpx'
	},
	value: 1,
  options: [
    {
      label: '按钮1',
      value: 1,
    },
		{
		  label: '按钮2',
		  value: 2,
			disabled: true
		},
    {
      label: '按钮3',
      value: 3,
    },
		{
		  label: '按钮4',
		  value: 4,
		},
		{
		  label: '按钮5',
		  value: 5,
		},
  ],
});
const onChange = (e: any) => {
	console.log('点击按钮：', e);
};
</script>

<style scoped>
.flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
}
.name {
	font-weight: bold;
	padding: 40rpx 0 10rpx 20rpx;
}
.title {
	padding-bottom: 10rpx;
}
.box {
	margin: 20rpx
}
.dark1 {
	background-color: black;
	color: #fff;
	border-radius: 70rpx;
}
.dark {
	background-color: black;
	color: #fff;
}
.dark-border {
	padding: 10rpx;
	border-radius: 70rpx;
	border: 6rpx solid #3370FF;
}
.dark-border1 {
	padding: 10rpx;
	border: 6rpx solid #3370FF;
}
.card {
	background: #f1f1f1;
	margin: 40rpx 10rpx;
	padding: 30rpx;
	border-radius: 12rpx;
}
.header {
	font-size: 26rpx;
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
}
.content {
	font-size: 24rpx;
	/* padding-bottom: 20rpx; */
	/* background-color: black; */
	/* color: #fff; */
}
/* .btn-border {
	font-size: 28rpx;
	border: 4rpx solid #3370FF;
	padding: 4rpx;
	border-radius: 70rpx;
} */
</style>