(el-radio)操作：Element-plus 中 Radio 单选框改成垂直排列的样式操作与使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了(el-radio)操作：Element-plus 中 Radio 单选框改成垂直排列的样式操作与使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Ⅰ、Element-plus 提供的Radio单选框组件与想要目标情况的对比：

1、Element-plus 提供 Radio 组件情况：

其一、Element-ui 自提供的Radio代码情况为(示例的代码)：

(el-radio)操作：Element-plus 中 Radio 单选框改成垂直排列的样式操作与使用,# Element-plus,vue.js,前端,javascript,经验分享,element-plus,vscode,前端框架


// Element-plus 自提供的代码：
// 此时是使用了 ts 语言环境，但是我在实际项目中并没有使用 ts 语言和环境；

<template>
  <div>
    <el-radio-group v-model="radio1" size="large">
      <el-radio-button label="New York" />
      <el-radio-button label="Washington" />
      <el-radio-button label="Los Angeles" />
      <el-radio-button label="Chicago" />
    </el-radio-group>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const radio1 = ref('New York')
</script>

代码地址：https://element-plus.gitee.io/zh-CN/component/radio.html#按钮样式

其二、页面的显示情况为：

(el-radio)操作：Element-plus 中 Radio 单选框改成垂直排列的样式操作与使用,# Element-plus,vue.js,前端,javascript,经验分享,element-plus,vscode,前端框架

2、目标想修改后的情况:

(el-radio)操作：Element-plus 中 Radio 单选框改成垂直排列的样式操作与使用,# Element-plus,vue.js,前端,javascript,经验分享,element-plus,vscode,前端框架

Ⅱ、实现 Radio 单选框组件达到目标效果变化的过程：

Radio 单选框组件成功引入 vue3 项目的过程(去除了 ts 的语法)：

其一、代码：

<script setup>
import { ref } from 'vue'

// do not use same name with ref
const radio1 = ref('New York')


</script>

<template>
  <el-radio-group v-model="radio1" size="large" class='radioDiv'>
    <div><el-radio-button label="New York" /></div>
    <div><el-radio-button label="Washington" /></div>
    <div><el-radio-button label="Los Angeles" /></div>
    <div><el-radio-button label="Chicago" /></div>
  </el-radio-group>
</template>

<style lang="scss" scoped>
.radioDiv {
  margin: 0 auto;
  width: auto;
  text-align: left;
  display: table;
  // 但是有的项目中又需要类似表格的布局怎么办呢？可以用display:table来解决;
  // display: table; 语法（类似 <table>）此元素会作为块级表格来显示，表格前后带有换行符;
}
</style>

其二、效果展示：
(el-radio)操作：Element-plus 中 Radio 单选框改成垂直排列的样式操作与使用,# Element-plus,vue.js,前端,javascript,经验分享,element-plus,vscode,前端框架

Ⅲ、小结：

其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！
其二、若有转发或引用本文章内容，请注明本博客地址https://blog.csdn.net/weixin_43405300,创作不易，且行且珍惜！
其三、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482文章来源地址https://www.toymoban.com/news/detail-613498.html

到了这里，关于(el-radio)操作：Element-plus 中 Radio 单选框改成垂直排列的样式操作与使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！