小当家ISV
互联网高新技术服务商
全球共有10多个国家和地区1000多个平台,20万+商户使用
全球共有10多个国家和地区1000多个平台,20万+商户使用
如何修改radio组件的大小
作者: 杨凤琴 发布时间： 2025-07-28 338 分类专栏: 前端开发
radio组件常用于登录注册勾选协议、购物车选购、管理等情景。
但是系统默认样式太大了，页面运行出来不协调，于是给radio组件定义了radio的class的类名，并设置了width和 height 且值相等，但是并没有修改成功。
最后查阅相关资料，发现是通过以下代码实现的：
.radio{
transform:scale(0.8);//等比例缩小
}
若觉得默认样式不够大，可以让scale的值大于1。
当然，没有写类名也可以直接写标签名，不过要想和其他的radio样式区分，还是建议写上类名，显得代码更加规范。
<template>
<radio color="#2F4C74" :checked="radioCheck" class="radio" @click="pickRadio()"/>
</template>
<script>
export default{
data(){
return{
radioCheck:false,
}
},
methods:{
pickRadio(){
this.radioCheck=!this.radioCheck;
},
}
}
</script>
<style lang="scss" scoped>
//@import "index.scss";
.radio{
transform:scale(0.8);//等比例缩小
}
</style>
杨凤琴
小当家ISV，重庆APP开发，小程序开发，软件系统开发 地址：重庆市南岸区南坪万达广场写字楼2栋19-6 联系电话：023-81361879
ICP备案号：渝ICP备15003473-1 增值电信业务许可证：
渝B2-15003473
渝公网安备 50010802005103号
友情链接： APP定制开发 小程序定制开发 MagicShop商城系统 酒类行业解决方案
重庆小当家互联网信息技术有限公司
