Elementui按鈕設(shè)置默認(rèn)選中狀態(tài)的實(shí)現(xiàn)過(guò)程
更新時(shí)間：2023年07月27日 09:25:57 作者：來(lái)啦來(lái)啦~
這篇文章主要給大家介紹了關(guān)于Elementui按鈕設(shè)置默認(rèn)選中狀態(tài)的實(shí)現(xiàn)過(guò)程,文中通過(guò)圖文以及示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Elementui具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
一、解決問(wèn)題
二、實(shí)現(xiàn)過(guò)程
1. 按鈕類(lèi)型
elementui中按鈕有默認(rèn)按鈕類(lèi)型和樸素按鈕類(lèi)型。
<el-row> <el-button>默認(rèn)按鈕</el-button> <el-button type="primary">主要按鈕</el-button> <el-button type="success">成功按鈕</el-button> <el-button type="info">信息按鈕</el-button> <el-button type="warning">警告按鈕</el-button> <el-button type="danger">危險(xiǎn)按鈕</el-button> </el-row> <el-row> <el-button plain>樸素按鈕</el-button> <el-button type="primary" plain>主要按鈕</el-button> <el-button type="success" plain>成功按鈕</el-button> <el-button type="info" plain>信息按鈕</el-button> <el-button type="warning" plain>警告按鈕</el-button> <el-button type="danger" plain>危險(xiǎn)按鈕</el-button> </el-row>
2. 按鈕屬性
使用type、plain屬性來(lái)定義 Button 的樣式。
示例：
<el-button type="danger" plain>是樸素按鈕</el-button> <el-button type="danger" :plain="false">非樸素按鈕</el-button>
總結(jié)：所以只需要控制plain屬性的值，就可以將按鈕設(shè)置為選中狀態(tài)。
3. 通過(guò)點(diǎn)擊事件控制按鈕狀態(tài)
實(shí)現(xiàn)效果：
點(diǎn)擊右側(cè)按鈕效果：
以vue為例示范：
<template>
...
<div class="row">
<el-button type="danger" :plain="selectA" @click="clickA">默認(rèn)選中按鈕</el-button>
<el-button type="danger" :plain="selectB" @click="clickB">按鈕</el-button>
</div>
...
</template>
<script>
export default {
...
data: function () {
return {
selectA: false,
selectB: true,
}
}
...
methods: {
// 默認(rèn)選中按鈕事件
clickA() {
this.selectA = false;
this.selectB = true;
},
// 按鈕事件
clickB() {
this.selectA = true;
this.selectB = false;
},
}
...
</script>總結(jié)
到此這篇關(guān)于Elementui按鈕設(shè)置默認(rèn)選中狀態(tài)實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Elementui按鈕默認(rèn)選中狀態(tài)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue?項(xiàng)目?jī)?yōu)雅的對(duì)url參數(shù)加密詳解
這篇文章主要為大家介紹了vue?項(xiàng)目?jī)?yōu)雅的對(duì)url參數(shù)加密詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
誤引用vuex-persistedstate導(dǎo)致用戶(hù)信息無(wú)法清除問(wèn)題及解決
這篇文章主要介紹了誤引用vuex-persistedstate導(dǎo)致用戶(hù)信息無(wú)法清除問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
本文主要介紹了詳解Vue項(xiàng)目的打包方式(生成dist文件)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
vue2.0實(shí)現(xiàn)音樂(lè)/視頻播放進(jìn)度條組件
這篇文章主要為大家詳細(xì)介紹了vue2.0實(shí)現(xiàn)音樂(lè)和視頻播放進(jìn)度條組件的思路及具體實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-06-06
詳解vue中父子組件傳遞參數(shù)props的實(shí)現(xiàn)方式
這篇文章主要給大家介紹了在vue中，父子組件傳遞參數(shù)?props?實(shí)現(xiàn)方式，文章通過(guò)代碼示例介紹的非常詳細(xì)，對(duì)我們的學(xué)習(xí)或工作有一定的參考價(jià)值,需要的朋友可以參考下2023-07-07
Vue?echarts實(shí)例項(xiàng)目商家銷(xiāo)量統(tǒng)計(jì)圖實(shí)現(xiàn)詳解
Echarts，它是一個(gè)與框架無(wú)關(guān)的?JS?圖表庫(kù)，但是它基于Js，這樣很多框架都能使用它，例如Vue，估計(jì)IONIC也能用，因?yàn)槲业牧?xí)慣，每次新嘗試做一個(gè)功能的時(shí)候，總要新創(chuàng)建個(gè)小項(xiàng)目，做做Demo2022-09-09
vue history 模式打包部署在域名的二級(jí)目錄的配置指南
這篇文章主要介紹了vue history 模式打包部署在域名的二級(jí)目錄的配置指南 ，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
Vue 實(shí)現(xiàn)從小到大的橫向滑動(dòng)效果詳解
這篇文章主要介紹了Vue 實(shí)現(xiàn)從小到大的橫向滑動(dòng)效果,結(jié)合實(shí)例形式詳細(xì)分析了vue.js橫向漸變滑動(dòng)效果的實(shí)現(xiàn)步驟、相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2019-10-10
解決vuex數(shù)據(jù)異步造成初始化的時(shí)候沒(méi)值報(bào)錯(cuò)問(wèn)題
今天小編大家分享一篇解決vuex數(shù)據(jù)異步造成初始化的時(shí)候沒(méi)值報(bào)錯(cuò)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
在?Vue.js?中,你可以通過(guò)多種方式將樣式私有化,以確保樣式只作用于特定的組件,避免全局污染,本文整理了一些常用的方法,希望對(duì)大家有所幫助2024-11-11