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

• 前端

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

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

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

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


  默认按钮
  主要按钮
  成功按钮
  信息按钮
  警告按钮
  危险按钮

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


  朴素按钮
  主要按钮
  成功按钮
  信息按钮
  警告按钮
  危险按钮

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


  圆角按钮
  主要按钮
  成功按钮
  信息按钮
  警告按钮
  危险按钮

图标按钮

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

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

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




搜索

文字按钮

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

文字按钮
文字按钮

按钮组 

使用标签来嵌套按钮

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


  上一页
  下一页

 

主要参数

参数 说明 类型 可选值 默认值
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

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/526e929833.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐