采用uniapp-vue3实现, 是一款支持高度自定义的按钮组组件，支持H5、微信小程序（其他小程序未测试过，可自行尝试）
可到插件市场下载尝试： https://ext.dcloud.net.cn/plugin?id=15012文章来源：https://www.toymoban.com/news/detail-723673.html
- 使用示例
文章来源地址https://www.toymoban.com/news/detail-723673.html
<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>
到了这里，关于uniapp-vue3-微信小程序-按钮组wo-btn-group的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
