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按钮默认选中状态内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue3.x最小原型系统讲解

    Vue3.x最小原型系统讲解

    这篇文章主要介绍了Vue3.x最小原型系统讲解。既然用Vue3.0构建最小原型系统,那么肯定要用尤大的最新构建工具Vite来进行项目的初始化,下文举例说明,需要的朋友可以参考一下
    2022-02-02
  • ElementUI表单验证validate和validateField的使用及区别

    ElementUI表单验证validate和validateField的使用及区别

    Element-UI作为前端框架,最常使用到的就是表单验证,下面这篇文章主要给大家介绍了关于ElementUI表单验证validate和validateField的使用及区别,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • vue实现图片切换效果

    vue实现图片切换效果

    这篇文章主要为大家详细介绍了vue实现图片切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • VueJS页面渲染之后如何调用函数

    VueJS页面渲染之后如何调用函数

    这篇文章主要介绍了VueJS页面渲染之后如何调用函数问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • vue LogicFlow更多配置选项示例详解

    vue LogicFlow更多配置选项示例详解

    这篇文章主要为大家介绍了vue LogicFlow更多配置选项详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • Vue3封装自定义指令的操作步骤

    Vue3封装自定义指令的操作步骤

    在 Vue 3 中,封装自定义指令可以帮助你更好地复用一些常见的DOM操作逻辑,自定义指令可以用于处理一些特定的用户交互行为,本文给大家介绍了Vue3封装自定义指令的示例,需要的朋友可以参考下
    2024-11-11
  • vue3.0封装轮播图组件的步骤

    vue3.0封装轮播图组件的步骤

    这篇文章主要介绍了vue3.0封装轮播图组件的步骤,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-03-03
  • vue使用websocket实现实时数据推送功能

    vue使用websocket实现实时数据推送功能

    这篇文章主要为大家详细介绍了vue如何使用websocket实现实时数据推送,发布订阅重连单点登录功能,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-12-12
  • Vue实现动态样式的多种方法汇总

    Vue实现动态样式的多种方法汇总

    本文要给大家介绍Vue实现动态样式的多种方法,下面给大家带来几个案列,需要的朋友可以借鉴研究一下。
    2021-06-06
  • vue3.0+vite2实现动态异步组件懒加载

    vue3.0+vite2实现动态异步组件懒加载

    学了vue写项目这么久,忽然发现路由懒加载的写法,节省了加载所有路由的时间。本文主要介绍了vue3.0+vite2实现动态异步组件懒加载,感兴趣的可以了解一下
    2021-06-06

最新评论