分頁標籤 - daniel-qa/Vue GitHub Wiki

分頁標籤

  • 代碼
<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-button label="template3">
                機構類型
            </el-radio-button>
        </el-radio-group>
    </div>

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

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

    <div v-if="radio1 === 'template3'">
        模版三
    </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>
  • 如果只想要渲染指定元件

只要加入特定的 class name ( 比如 custom-radio)

    <div style="text-align:left;padding-left:20px;" class="custom-radio">
        <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-button label="template3">
                機構類型
            </el-radio-button>
        </el-radio-group>
    </div>

/* 只改變加上 custom-radio 的按鈕樣式 */
::v-deep(.custom-radio .el-radio-button__inner) {
    padding: 10px 20px;
    font-size: 14px;
    width: 200px;
}

class，代表的是，限縮選擇的範圍，(就是找到對應的 class name 時，才開始套入)

  • 另一種樣式的 radio 頁籤
<div style="display: flex; flex-direction: column; align-items: flex-start;">
    
    <el-radio-group v-model="radio1">
        <el-radio label="template1" size="large" border>學區</el-radio>
        <el-radio label="template2" size="large" border>地理資訊</el-radio>
        <el-radio label="template3" size="large" border>機構類型</el-radio>
    </el-radio-group>
</div>              

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

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

<div v-if="radio1 === 'template3'">
    模版三
</div>
⚠️ **GitHub.com Fallback** ⚠️