北京网站建设出名 乐云践新,设计师网站外网,大连网站建设外包公司,青岛网站制作排名采用uniapp-vue3实现, 是一款支持高度自定义的按钮组组件#xff0c;支持H5、微信小程序#xff08;其他小程序未测试过#xff0c;可自行尝试#xff09; 可到插件市场下载尝试#xff1a; https://ext.dcloud.net.cn/plugin?id15012
使用示例 templatevie… 采用uniapp-vue3实现, 是一款支持高度自定义的按钮组组件支持H5、微信小程序其他小程序未测试过可自行尝试 可到插件市场下载尝试 https://ext.dcloud.net.cn/plugin?id15012
使用示例 templateviewview classname按钮组组件: wo-btn-group/viewview classcardview classheader默认样式(包括disabled禁用)/viewview classcontentwoBtnGroup :default-valuestate.value changeonChange/woBtnGroup/view/viewview classcardview classheader按钮形状椭圆(默认)、方形、圆形/viewview classcontentview classboxview classtitle默认椭圆/viewwoBtnGroup :default-valuestate.value :optionsstate.options changeonChange/woBtnGroup/viewview classboxview classtitle方形/viewwoBtnGroup :shapespace :default-valuestate.value :optionsstate.options changeonChange/woBtnGroup/viewview classboxview classtitle圆形圆形无边框/viewwoBtnGroup :shaperound :default-valuestate.value :optionsstate.options changeonChange/woBtnGroup/view/view/viewview classcardview classheader轮廓/viewview classcontentview classboxwoBtnGroup outline :default-valuestate.value :optionsstate.options changeonChange/woBtnGroup/viewview classboxwoBtnGroup outline :shapespace :default-valuestate.value :optionsstate.options changeonChange/woBtnGroup/viewview classboxwoBtnGroup outline :shaperound :default-valuestate.value :optionsstate.options changeonChange/woBtnGroup/view/view/viewview classcardview classheader自定义颜色/viewview classcontentview classboxwoBtnGroup outline :colororange :default-valuestate.value :optionsstate.options changeonChange/woBtnGroup/viewview classboxwoBtnGroup :colororange :default-valuestate.value :optionsstate.options changeonChange/woBtnGroup/view/view/viewview classcardview classheader自定义边框/viewview classcontentview classboxview classtitle无边框/viewwoBtnGroup :border-objstate.borderStyle1 :default-valuestate.value :optionsstate.options changeonChange/woBtnGroup/viewview classboxview classtitle虚线边框/viewwoBtnGroup outline :border-objstate.borderStyle2 :default-valuestate.value :optionsstate.options changeonChange/woBtnGroup/viewview classboxview classtitle圆角幅度/viewwoBtnGroup outline :border-objstate.borderStyle3 :default-valuestate.value :optionsstate.options changeonChange/woBtnGroup/viewview classboxview classtitle边框宽度/viewwoBtnGroup :border-objstate.borderStyle4 :default-valuestate.value :optionsstate.options changeonChange/woBtnGroup/view/view/viewview classcardview classheader自定义暗黑模式/viewview classcontentview classbox dark1woBtnGroup :default-valuestate.value :optionsstate.options changeonChange/woBtnGroup/viewview classbox dark1woBtnGroup :shaperound :default-valuestate.value :optionsstate.options changeonChange/woBtnGroup/viewview classbox dark dark-borderwoBtnGroup :shaperound :default-valuestate.value :optionsstate.options changeonChange/woBtnGroup/viewview classbox dark dark-borderwoBtnGroup :border-objstate.borderStyle1 :default-valuestate.value :optionsstate.options changeonChange/woBtnGroup/viewview classbox dark dark-border1woBtnGroup :shapespace :default-valuestate.value :optionsstate.options changeonChange/woBtnGroup/viewview classbox dark dark-border1woBtnGroup :border-objstate.borderStyle1 :shapespace :default-valuestate.value :optionsstate.options changeonChange/woBtnGroup/view/view/view/view
/templatescript setup langts
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);
};
/scriptstyle 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
