点亮前端，纵向布局单选按钮，Element Plus教你轻松搞定

2024-01-19 08:10:30

使用 Element Plus 实现纵向排列的单选按钮

引言

Element Plus 是一款流行的前端 UI 框架，提供了一系列丰富的组件，包括单选按钮。默认情况下，这些按钮是水平排列的。本文将指导您如何轻松实现单选按钮的纵向排列。

设置

首先，在您的项目中导入 el-radio-group 和 el-radio 组件。

import { ElRadioGroup, ElRadio } from 'element-plus'

Vue.component('ElRadioGroup', ElRadioGroup)
Vue.component('ElRadio', ElRadio)

使用组件

接下来，在需要的地方使用 el-radio-group 和 el-radio 组件。el-radio-group 组件用于包裹单选按钮组，而 el-radio 组件用于表示各个按钮。

<el-radio-group v-model="value">
  <el-radio label="选项1">选项1</el-radio>
  <el-radio label="选项2">选项2</el-radio>
  <el-radio label="选项3">选项3</el-radio>
</el-radio-group>

实现纵向排列

为了实现纵向排列，需要在 el-radio-group 组件上添加一个 flex 属性，并将其值设置为 "direction: column"。

<el-radio-group v-model="value" flex="direction: column">
  <el-radio label="选项1">选项1</el-radio>
  <el-radio label="选项2">选项2</el-radio>
  <el-radio label="选项3">选项3</el-radio>
</el-radio-group>

完整示例

完整的示例代码如下：

<template>
  <el-radio-group v-model="value" flex="direction: column">
    <el-radio label="选项1">选项1</el-radio>
    <el-radio label="选项2">选项2</el-radio>
    <el-radio label="选项3">选项3</el-radio>
  </el-radio-group>
</template>

<script>
import { ElRadioGroup, ElRadio } from 'element-plus'

Vue.component('ElRadioGroup', ElRadioGroup)
Vue.component('ElRadio', ElRadio)

export default {
  data() {
    return {
      value: '选项1'
    }
  }
}
</script>