::v-deep .el-radio-button__inner { width: 30px; height: 42px; //background: #f7f8fa; color: #333; //border: 0 !important; } 如何设置按扭内文字到边框的距离

你可以使用 `padding` 属性来调整内文字到边框的距离。，设置左右内边距为 5px，上下内边距为 0，可以使用以下 CSS 代码：

.el-radio-button__inner {
  padding: 0 5px;
}

你可以根据自己的需求调整内边距的数值。

相关问题

::v-deep .el-radio-button__inner { width: 30px; height: 42px; //background: #f7f8fa; color: #333; //border: 0 !important; } 如何设置按扭内文字到边框的距离为居中

您可以通过设置 `line-height` 属性来实现将按钮内的文字垂直居中显示，例如：

.el-radio-button__inner {
  width: 30px;
  height: 42px;
  line-height: 42px;
}

此外，为了使文本水平居中，您可以添加 `text-align: center;` 属性。完整的 CSS 样式如下：

.el-radio-button__inner {
  width: 30px;
  height: 42px;
  line-height: 42px;
  text-align: center;
}

<el-radio-group v-model="staffInfo.sex"> <el-radio-button label="1">男</el-radio-button> <el-radio-button label="2">女</el-radio-button> </el-radio-group> 样式修改 ::v-deep.el-radio-button{ margin-right: 15px; border-radius:4px; .el-radio-button__inner {//修改按钮样式 width: 120px; height: 42px; background: #F7F8FA; color:#333; border: 0 !important; } .el-radio-button__orig-radio:checked + .el-radio-button__inner {// 修改按钮激活样式 color: #fff; background-color: #f63; border-color: #f63; box-shadow: -1px 0 0 0 #f63; } ———这个完整的代码应该怎样写

完整的代码应该如下所示：

<template>
  <el-radio-group v-model="staffInfo.sex">
    <el-radio-button label="1">男</el-radio-button>
    <el-radio-button label="2">女</el-radio-button>
  </el-radio-group>
</template>

<style scoped>
  ::v-deep .el-radio-button {
    margin-right: 15px;
    border-radius: 4px;
  }
  ::v-deep .el-radio-button__inner {
    width: 120px;
    height: 42px;
    background: #f7f8fa;
    color: #333;
    border: 0 !important;
  }
  ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    color: #fff;
    background-color: #f63;
    border-color: #f63;
    box-shadow: -1px 0 0 0 #f63;
  }
</style>

注意，样式选择器中的 `::v-deep` 是用于穿透组件样式限制的，需要在样式选择器前加上 `scoped` 声明，以限定样式仅在当前组件内生效。