快捷導(dǎo)航

elementUI給el-tabs/el-tab-pane添加圖標(biāo)效果實(shí)例

更新時(shí)間：2023年07月04日 10:52:04 作者：ADHD重癥患者

這篇文章主要給大家介紹了關(guān)于elementUI給el-tabs/el-tab-pane添加圖標(biāo)效果實(shí)例的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用elementUI具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

效果展示

原始的el-tabs

請(qǐng)?zhí)砑訄D片描述

添加圖標(biāo)后的樣式

ps：紅色是因?yàn)樘砑恿祟~外的css 在此不做描述

請(qǐng)?zhí)砑訄D片描述

代碼實(shí)現(xiàn)

html部分的代碼

給 el-tabs 添加 stretch 屬性，使得tabs平鋪滿整個(gè)頁(yè)面;

通過(guò) v-if 控制選中時(shí)圖標(biāo)的顏色更改（其實(shí)就是換個(gè)圖標(biāo)）；

<el-tabs v-model="activeName" @tab-click="handleTabClick" style="width: 780px;" stretch>
                    <el-tab-pane name="1">
                        <span slot="label"> //添加圖標(biāo)的主要代碼部分
                            <span class="tabStyle">
                                <i class="el-icon-basic-on" v-if="activeName==='1'"></i>
                                <i class="el-icon-basic-off" v-else></i>
                            </span>
                            <span style="display: block">基礎(chǔ)信息</span>
                        </span>
                        <div>
                            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="ruleForm">
                                <el-form-item label="座機(jī)號(hào)碼：" prop="pass" class="formStyle">
                                    <el-input type="password" v-model="ruleForm.pass" autocomplete="off" style="width: 380px" placeholder="請(qǐng)輸入座機(jī)號(hào)碼"></el-input>
                                    <div class="prompt"><span class="prompt-content">選填</span></div>
                                </el-form-item>
                                <el-form-item label="郵箱地址：" prop="age" class="formStyle">
                                    <el-input v-model.number="ruleForm.age" style="width: 380px" placeholder="請(qǐng)輸入郵箱地址"></el-input>
                                    <div class="prompt"><span class="prompt-content">選填</span></div>
                                </el-form-item>
                                <el-form-item style="margin-top: 90px;text-align: center">
                                    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane name="2">
                        <span slot="label">
                            <span class="tabStyle">
                                <i class="el-icon-contact-on" v-if="activeName==='2'"></i>
                                <i class="el-icon-contact-off" v-else></i>
                            </span>
                            <span style="display: block">聯(lián)系方式</span>
                        </span>
                    </el-tab-pane>
                    <el-tab-pane name="3">
                        <span slot="label">
                            <span class="tabStyle">
                                <i class="el-icon-bank-on" v-if="activeName==='3'"></i>
                                <i class="el-icon-bank-off" v-else></i>
                            </span>
                            <span style="display: block">銀行信息</span>
                        </span>
                    </el-tab-pane>
                    <el-tab-pane name="4">
                        <span slot="label">
                            <span class="tabStyle">
                                <i class="el-icon-safety-on" v-if="activeName==='4'"></i>
                                <i class="el-icon-safety-off" v-else></i>
                            </span>
                            <span style="display: block">登錄信息</span>
                        </span>
                    </el-tab-pane>
                </el-tabs>

style部分的代碼

由于用的是自定義的圖標(biāo)，所以需要在background中引入對(duì)應(yīng)的svg文件；

如果只是使用element-ui自帶的圖標(biāo)則無(wú)需進(jìn)行自定義圖標(biāo)的配置，直接調(diào)用即可；

    .el-tabs__header .el-tabs__item{ //由于圖標(biāo)較大 因此需要調(diào)整el-tabs的高度
        height: 105px;
    }
    .tabStyle{
        display: block;
        height: 65px;
    }
    .el-icon-basic-on{
        display: inline-block;
        width: 64px;
        height: 64px;
        background: url('../images1/icon/BASIC_ON.svg') no-repeat top;
    }
    .el-icon-basic-off{
        display: inline-block;
        width: 64px;
        height: 64px;
        background: url('../images1/icon/BASIC_OFF.svg') no-repeat top;
    }
    ...以此類(lèi)推

總結(jié)

到此這篇關(guān)于elementUI給el-tabs/el-tab-pane添加圖標(biāo)效果的文章就介紹到這了,更多相關(guān)elementUI給el-tabs添加圖標(biāo)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: