Vue中Button按钮基础用法及参数属性

这篇具有很好参考价值的文章主要介绍了Vue中Button按钮基础用法及参数属性。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

根据颜色、形状、图标等等设计美观的按钮

vue中button属性,前端,javascript,vue.js

使用type、plain、round和circle属性来定义 Button 的样式。

vue中button属性,前端,javascript,vue.js

<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>

vue中button属性,前端,javascript,vue.js

<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>

vue中button属性,前端,javascript,vue.js 

<el-row>
  <el-button round>圆角按钮</el-button>
  <el-button type="primary" round>主要按钮</el-button>
  <el-button type="success" round>成功按钮</el-button>
  <el-button type="info" round>信息按钮</el-button>
  <el-button type="warning" round>警告按钮</el-button>
  <el-button type="danger" round>危险按钮</el-button>
</el-row>

图标按钮

带图标的按钮可增强辨识度(有文字)或节省空间(无文字)

vue中button属性,前端,javascript,vue.js 

<el-row>
  <el-button icon="el-icon-search" circle></el-button>
  <el-button type="primary" icon="el-icon-edit" circle></el-button>
  <el-button type="success" icon="el-icon-check" circle></el-button>
  <el-button type="info" icon="el-icon-message" circle></el-button>
  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>

其中,Icon 图标提供了一套常用的图标集合,直接通过设置类名为 el-icon-iconName 来使用即可。例如:

<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-search">搜索</el-button>

文字按钮

没有边框和背景色的按钮,可以使用disabled属性来定义按钮是否可用。

<el-button type="text">文字按钮</el-button>
<el-button type="text" disabled>文字按钮</el-button>

按钮组 

使用<el-button-group>标签来嵌套按钮

vue中button属性,前端,javascript,vue.js

<el-button-group>
  <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
  <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>
<el-button-group>
  <el-button type="primary" icon="el-icon-edit"></el-button>
  <el-button type="primary" icon="el-icon-share"></el-button>
  <el-button type="primary" icon="el-icon-delete"></el-button>
</el-button-group>

 文章来源地址https://www.toymoban.com/news/detail-560511.html

主要参数

参数 说明 类型 可选值 默认值
size 尺寸 string medium / small / mini
type 类型 string primary / success / warning / danger / info / text
plain 是否朴素按钮 boolean false
round 是否圆角按钮 boolean false
circle 是否圆形按钮 boolean false
loading 是否加载中状态 boolean false
disabled 是否禁用状态 boolean false
icon 图标类名 string
autofocus 是否默认聚焦 boolean false
native-type 原生 type 属性 string button / submit / reset button

到了这里,关于Vue中Button按钮基础用法及参数属性的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Python 图形化界面基础篇:添加按钮( Button )到 Tkinter 窗口

    欢迎来到 Python 图形化界面基础篇的新篇章!在本文中,我们将专注于 Tkinter 中如何添加按钮( Button ),这是创建交互性 GUI 应用程序的关键元素之一。按钮用于触发操作,让用户与应用程序进行互动。我们将详细解释如何在 Tkinter 窗口中添加按钮,以及如何为按钮定义响应

    2024年02月06日
    浏览(48)
  • C# Winform中在DataGridView中添加Button按钮,操作Button按钮

    .Net的DataGridView控件中,提供了一种列的类型,叫 DataGridViewButtonColumn ,这种列类型是展示为一个 按钮,可以给button赋予相应的text,并且,此button可以用来做处理事件的判断依据。 DataGridViewButtonColumn,虽然在UI展现上,是一个BUTTON的样子,但是,它的实际形态,并不是传统意

    2024年02月07日
    浏览(44)
  • Flutter组件--按钮(Button)组件

      属性  说明 onPressed 必填参数,按下按钮时触发的回调,接收一个方法,传null表示按钮禁用,会显示禁用相关样式 child 子组件 style 通过ButtonStyle装饰 ButtonStylee里面的常用的参数 属性名称 值类型  属性值 foregroundColor Color 文本颜色 backgroundColor Color 按钮的颜色 shadowColor Col

    2024年02月14日
    浏览(36)
  • Android 之 Button (按钮)与 ImageButton (图像按钮)

    今天给大家介绍的Android基本控件中的两个按钮控件,Button普通按钮和ImageButton图像按钮; 其实ImageButton和Button的用法基本类似,至于与图片相关的则和后面ImageView相同,所以本节 只对Button进行讲解,另外Button是TextView的子类,所以TextView上很多属性也可以应用到Button 上!我们

    2024年02月07日
    浏览(47)
  • Vue3组件库开发 之Button(2) 未完待续

    Vue3组件库开发 之Button(1) 中新建项目,但未安装成功ESLINT 安装ESLINT npm install eslint vite-plugin-eslint --save-dev 安装eslint后,组件文件出现错误提示 添加第三方macros  ,虽然不是官网但很多开发者都是vue3开发人员 安装macros 修改:tsconfig.json 修改types.ts 修改Button.vue 运行结果: typ

    2024年01月23日
    浏览(30)
  • Python GUI设计——Button功能按钮

    目录 1.简介 1.1定时程序设计 1.2颜色选择程序设计 2.使用Lambda表达式 3.建立含图像的功能按钮 4.简易计算器按钮设计 5.设计鼠标光标在功能按钮上的的形状 功能按钮也称为按钮,在窗口组件中可以设计在单击功能按钮时,执行某一个特定的动作,这个动作也称为callback方法,

    2024年02月09日
    浏览(30)
  • 微信小程序:修改按钮BUTTON尺寸

      微信小程序当中通过wxss来设置button的宽高值并不起效果,而size属性却只有两个合法值,当我们想要自定义大小时则: 在 标签中直接写 style即可: (当前为开发者模式无法进入会话,真机调试即可看到效果) 

    2024年02月11日
    浏览(85)
  • 微信小程序button按钮去除边框

    今天在小程序开发中想要去除按钮的边框,直接使用 border: none 不起作用,选择器后加一个::after伪元素才行。 例: button:: after{ border: none }

    2024年02月06日
    浏览(58)
  • 15. 【Android教程】按钮 Button/ImageButton

    在前面两章我们讲了 TextView,它是一个纯输出的控件;而 EditText 在 TextView 基础之上加入了简单的输入功能;今天要讲的 Button 是一个和用户互动感很强的控件,从今往后不再是单纯的文本展示,我们可以通过 TextView、EditText 再加上 Button 做出非常多有很意思的功能。ImageButt

    2024年04月14日
    浏览(32)
  • Android里面,button按钮怎么设置圆角?

    在Android中,可以通过创建一个自定义的Drawable XML文件来实现给Button设置圆角的效果。以下是创建圆角按钮的步骤: 在 res/drawable 文件夹下,创建一个新的XML文件,例如 rounded_button.xml 。 在 rounded_button.xml 文件中,添加以下代码: 在这里,你可以自定义圆角的半径、按钮的颜色

    2024年02月08日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包