快捷導(dǎo)航

Elementui按鈕設(shè)置默認(rèn)選中狀態(tài)的實現(xiàn)過程

更新時間：2023年07月27日 09:25:57 作者：來啦來啦~

這篇文章主要給大家介紹了關(guān)于Elementui按鈕設(shè)置默認(rèn)選中狀態(tài)的實現(xiàn)過程,文中通過圖文以及示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Elementui具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

一、解決問題

二、實現(xiàn)過程

1. 按鈕類型

elementui中按鈕有默認(rèn)按鈕類型和樸素按鈕類型。

<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">危險按鈕</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>危險按鈕</el-button>
</el-row>

2. 按鈕屬性

使用type、plain屬性來定義 Button 的樣式。

示例：

<el-button type="danger"  plain>是樸素按鈕</el-button>
<el-button type="danger" :plain="false">非樸素按鈕</el-button>

總結(jié)：所以只需要控制plain屬性的值，就可以將按鈕設(shè)置為選中狀態(tài)。

3. 通過點擊事件控制按鈕狀態(tài)

實現(xià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)實現(xiàn)的文章就介紹到這了,更多相關(guān)Elementui按鈕默認(rèn)選中狀態(tài)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: