首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Elementui按钮默认选中状态

Elementui按钮设置默认选中状态的实现过程

2023-07-27 09:23:40 作者：来啦来啦~

这篇文章主要给大家介绍了关于Elementui按钮设置默认选中状态的实现过程,文中通过图文以及示例代码介绍的非常详细,对大家学习或者使用Elementui具有一定的参考学习价值,需要的朋友可以参考下

一、解决问题

二、实现过程

1. 按钮类型

elementui中按钮有默认按钮类型和朴素按钮类型。

<el-row>
 <el-button>默认按钮</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>

总结：所以只需要控制plain属性的值，就可以将按钮设置为选中状态。

3. 通过点击事件控制按钮状态

实现效果：

点击右侧按钮效果：

以vue为例示范：

<template>
 ...
    <div class="row">
     	<el-button type="danger" :plain="selectA" @click="clickA">默认选中按钮</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: {
	 // 默认选中按钮事件
		clickA() {
			this.selectA = false;
			this.selectB = true;
		},
		// 按钮事件
		clickB() {
			this.selectA = true;
			this.selectB = false;
		},
	}
	...
</script>

总结

到此这篇关于Elementui按钮设置默认选中状态实现的文章就介绍到这了,更多相关Elementui按钮默认选中状态内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！