el‐radio - daniel-qa/Vue GitHub Wiki

el-radio

#

推荐写法（兼容 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="模版一" value="New York" />
            <el-radio-button label="模版二" value="Washington" />
        </el-radio-group>
    </div>

    <div v-if="radio1=='模版一'">
        模版一
    </div>

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

<script setup>

    import { ref } from 'vue'

    const radio1 = ref('模版一')
    
</script>

<style scoped>

    /* 自定義 el-radio-button 大小*/
    /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** ⚠️