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

news2024/9/28 23:26:37

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

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

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

在这里插入图片描述


// 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#按钮样式

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

在这里插入图片描述

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

在这里插入图片描述

Ⅱ、实现 `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>

其二、效果展示：
在这里插入图片描述

Ⅲ、小结：

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/804553.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！