ChangLu-UI

Button 组件

常用的操作按钮

基础用法&代码示例

基础的按钮用法

使用type来选择 Button 的样式
<template>
  
  <cl-button >默认按钮 </cl-button> 
  <cl-button type='default' >默认按钮 </cl-button> 
  <cl-button type='streamer'>流光按钮</cl-button>
  <cl-button  >其他按钮</cl-button>
</template>

禁用状态

禁用的时候就不要点击啦，反正点了也不会有效果的！

使用 disabled 属性定义按钮是否被禁用 接收一个Boolean值
<template>
  <cl-button disabled>默认按钮 </cl-button> 
  <cl-button type='streamer' disabled>流光按钮</cl-button>
  <cl-button  disabled>其他按钮</cl-button>
</template>

图标按钮

恰到好处的图标可以提升产品体验

设置 icon 属性即可 组件库采用阿里图标库，也可使用项目本身引入的图标, 接收一个String
<template>
  <cl-button icon='iconfont icon-iconsearch-copy'></cl-button> 
  <cl-button type='streamer'  icon='iconfont icon-setting'>设置</cl-button>
  <cl-button  icon='iconfont icon-fenxiang'></cl-button>
</template>

加载状态

憋催了 在做了.jpg

设置 loading 属性即可， 接收一个Boolean值, 为true时将会处于禁用状态，不会响应事件
<template>
  <cl-button loading>加载中</cl-button> 
  <cl-button type='streamer' :loading='true' >操作中</cl-button>
  <cl-button  :loading='false'>加载完成</cl-button>
</template>

Attributes

参数说明类型是否必要默认值
type按钮类型Stringfalsedefault
disabled是否禁用状态Booleanfalsefalse
loading是否加载状态Booleanfalsefalse
icon图标类名Stringfalse-