Button按钮

基础用法

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


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



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



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



  
  
  
  
  
  

效果图如下所示:

Button按钮_第1张图片

禁用状态

使用disabled属性来定义按钮是否可用,它接收一个boolean值。


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



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

效果图如下所示:

Button按钮_第2张图片文字按钮

没有边框和背景色

文字按钮
文字按钮

效果图如下所示:

 

图标按钮

通过设置icon属性即可,icon的列表可以参考Element的icon组件,也可以设置在文字右边的icon,只要使用i标签即可,可以使用自定义标签。




搜索
上传

效果图如下所示:

Button按钮_第3张图片

 

 

按钮组

使用标签来嵌套你的按钮。


  上一页
  下一页


  
  
  

效果图如下所示:

 

 

加载中

点击按钮后进行数据加载操作,在按钮上显示加载状态。

要设置为loading状态,只要设置loading属性为true即可。

加载中

效果图如下所示:

 

 

不同尺寸

额外尺寸:medium、small、mini,通过设置size属性来配置他们。


  默认按钮
  中等按钮
  小型按钮
  超小按钮


  默认按钮
  中等按钮
  小型按钮
  超小按钮

效果图如下所示:

Button按钮_第4张图片

 

 

 

Attributes

参数 说明 类型 可选值 默认值
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
disable 是否禁用状态 boolean —— false
icon 图标类型 string ——

——

autofocus 是否默认聚焦 boolean —— false
native-type 原生type属性 string button/submit/reset buttom

 

你可能感兴趣的:(Element-UI,vue.js)