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

 更新时间:2023年07月27日 09:25:57   作者:来啦来啦~  
这篇文章主要给大家介绍了关于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按钮默认选中状态内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue 项目优雅的对url参数加密详解

    vue 项目优雅的对url参数加密详解

    这篇文章主要为大家介绍了vue 项目优雅的对url参数加密详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • 误引用vuex-persistedstate导致用户信息无法清除问题及解决

    误引用vuex-persistedstate导致用户信息无法清除问题及解决

    这篇文章主要介绍了误引用vuex-persistedstate导致用户信息无法清除问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 详解Vue项目的打包方式(生成dist文件)

    详解Vue项目的打包方式(生成dist文件)

    本文主要介绍了详解Vue项目的打包方式(生成dist文件),文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • vue2.0实现音乐/视频播放进度条组件

    vue2.0实现音乐/视频播放进度条组件

    这篇文章主要为大家详细介绍了vue2.0实现音乐和视频播放进度条组件的思路及具体实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-06-06
  • 详解vue中父子组件传递参数props的实现方式

    详解vue中父子组件传递参数props的实现方式

    这篇文章主要给大家介绍了在vue中,父子组件传递参数 props 实现方式,文章通过代码示例介绍的非常详细,对我们的学习或工作有一定的参考价值,需要的朋友可以参考下
    2023-07-07
  • Vue echarts实例项目商家销量统计图实现详解

    Vue echarts实例项目商家销量统计图实现详解

    Echarts,它是一个与框架无关的 JS 图表库,但是它基于Js,这样很多框架都能使用它,例如Vue,估计IONIC也能用,因为我的习惯,每次新尝试做一个功能的时候,总要新创建个小项目,做做Demo
    2022-09-09
  • vue history 模式打包部署在域名的二级目录的配置指南

    vue history 模式打包部署在域名的二级目录的配置指南

    这篇文章主要介绍了vue history 模式打包部署在域名的二级目录的配置指南 ,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • Vue 实现从小到大的横向滑动效果详解

    Vue 实现从小到大的横向滑动效果详解

    这篇文章主要介绍了Vue 实现从小到大的横向滑动效果,结合实例形式详细分析了vue.js横向渐变滑动效果的实现步骤、相关操作技巧与注意事项,需要的朋友可以参考下
    2019-10-10
  • 解决vuex数据异步造成初始化的时候没值报错问题

    解决vuex数据异步造成初始化的时候没值报错问题

    今天小编大家分享一篇解决vuex数据异步造成初始化的时候没值报错问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue如何将style私有化

    vue如何将style私有化

    在 Vue.js 中,你可以通过多种方式将样式私有化,以确保样式只作用于特定的组件,避免全局污染,本文整理了一些常用的方法,希望对大家有所帮助
    2024-11-11

最新评论