el‐radio - daniel-qa/Vue GitHub Wiki

el-radio

#

  • 間距排版範例
 <el-radio-group v-model="noticeForm.sender" class="compact-radio-group">
     <el-radio label="HiTeach" size="large" border>HiTeach</el-radio>
     <el-radio label="IES" size="large" border>IES</el-radio>
     <el-radio label="Sokrates" size="large" border>Sokrates</el-radio>
     <el-radio label="Auth" size="large" border>Auth</el-radio>
     <el-radio label="Event" size="large" border>Event</el-radio>
     <el-radio label="IES MGR" size="large" border>IES MGR</el-radio>
     <!-- <el-radio label="HiTA" size="large" border>HiTA</el-radio> -->
 </el-radio-group>

<style scoped>
.compact-radio-group {
	display: flex;
	flex-wrap: wrap; /* 要不要換行，看需求 */
	gap: 4px 4px; /* 垂直間距 4px，水平間距 8px，可調 */
}

	.compact-radio-group .el-radio {
		margin: 4px;
		padding: 4px 8px; /* 控制單個 radio 的內部 padding */
		font-size: 12px;
	}
</style>
  • ex
<div style="display: flex; flex-direction: column; align-items: flex-start;background-color:white;padding-top:20px;">
    <el-radio-group v-model="radioValue" style="padding-left: 20px;">
        <el-radio label="批量">批量</el-radio>
        <el-radio label="挑選">挑選</el-radio>
    </el-radio-group>
</div>
  • ex 2
<template>
  <el-radio-group v-model="radioValue" style="padding: 20px;">
    <el-radio label="批量">批量</el-radio>
    <el-radio label="挑選">挑選</el-radio>
  </el-radio-group>

  <p>选中的值: {{ radioValue }}</p>
</template>

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

const radioValue = ref('批量');
</script>

<style>
/* 你可以根据需要调整样式 */
</style>

推荐写法（兼容 Vue 3 和未来版本） 为了确保代码的可维护性并避免未来的版本问题，建议统一使用 value 属性：

p.s 有時 lable 會比較好用

<template>
  <el-radio-group v-model="radio1">
    <!-- 推荐使用 value -->
    <el-radio value="Value 1">Option 1</el-radio>
    <el-radio value="Value 2">Option 2</el-radio>
  </el-radio-group>
</template>

<script setup>
import { ref } from "vue";

const radio1 = ref("Value 1");
</script>

el-radio 樣式調整

<style scoped>
::v-deep(.el-radio__label) {
  font-size: 20px;
  font-weight: bold;  
}
</style>

  • ::v-deep 只會影響 當前組件 內的樣式，即使存在 scoped 屬性，也能滲透到組件內部的元素。

  • 當前組件：指的是該 .vue 文件本身，包含其中的模板、邏輯和樣式。

P.S radio 不應該有太多的選擇。太多選項，則改用 Select 組件。

el-radio-button

<template>
    <div style="text-align:left;padding-left:20px;">
        <el-radio-group v-model="radio1" size="large">
            <el-radio-button label="template1">
                模版一
            </el-radio-button>
            <el-radio-button label="template2">
                模版二
            </el-radio-button>
        </el-radio-group>
    </div>
    {{radio1}}
    <div v-if="radio1 === 'template1'">
        模版一
    </div>

    <div v-if="radio1 === 'template2'">
        模版二
    </div>
</template>

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

    const radio1 = ref('template1')
</script>

<style scoped>
    /* 自定義 el-radio-button 大小 */
    ::v-deep(.el-radio-button--large .el-radio-button__inner) {
        padding: 10px 20px;
        font-size: 14px;
        width: 200px;
    }
</style>

:deep 是 Vue3 新寫法

  • :deep() 就是 Vue 3 里取代 /deep/（或 >>>）的新写法。
/* Vue 2 的写法 */
.parent /deep/ .child {
  color: red;
}

.parent >>> .child {
  color: red;
}

/* Vue 3 的写法 */
.parent :deep(.child) {
  color: red;
}
  • Vue 2 的 /deep/ 和 >>> 只是 vue-loader 里的一种临时 hack，帮助 scoped 样式穿透子组件。

Vue 3 弃用了这种 hack，改成了标准化的 :deep()，让代码更清晰、维护更方便。

**现在你只需要用 :deep()，就能兼容 Vue 3 **

  • **所以，Vue 3 的 :deep() 不是 hack，而是一个官方认可的解决方案 **
⚠️ **GitHub.com Fallback** ⚠️