嘟嘟云A sass ui框架

# 按钮大小

按钮有特大（extraLarge）大（large）、正常（normal）、小（small）通过size属性决定默认正常 三种尺寸使用时根据页面按钮权重，视情况而定

  • extraLarge按钮使用谨慎，仅在少量需强调页面使用，eg：登录管理界面

  • 2.6.7新增ban，可以设置阻止按钮点击

  • 2.8.9新增loading,设置后也会阻止按钮点击 也可以通过slotname值loading来设置自定义加载图标

巨大按钮 
<template>
  <db-button size="extraLarge">
    巨大按钮
  </db-button>
</template>
Expand Copy
  • large按钮
大按钮 
<template>
  <db-button size="large">
    大按钮
  </db-button>
</template>
Expand Copy
  • normal按钮作为最常用的按钮尺寸，大多数情况下使用
正常按钮 
<template>
  <db-button >
    正常按钮
  </db-button>
</template>
Expand Copy
  • small按钮在布局紧凑场景下使用，eg：表单填写、列表管理
小按钮 
<template>
  <db-button size="small">
    小按钮
  </db-button>
</template>
Expand Copy

# 按钮类型

primary

  • 高度强调按钮-主要按钮单纯的使用纯色填充
  • 在同一个操作区域主要按钮仅会出现一次
主要按钮 
<template>
  <db-button >
    主要按钮
  </db-button>
</template>
Expand Copy

low

  • 单纯的常采用基本平面形状，没有填充只有简
  • 它常常与主要按钮组合使用，视觉重量和操作
次级按钮 
<template>
  <db-button type="low" >
    次级按钮
  </db-button>
</template>
Expand Copy

dashed

  • 低强调，只有简单的虚线边框
  • 它具有按钮的功能性，在系统页面中一般用作新增板块内容或低频操作
虚线按钮 
<template>
  <db-button type="dashed">
    虚线按钮
  </db-button>
</template>
Expand Copy

text

  • 文字按钮通常用于最基础权限的重复操作
  • 由于文本按钮没有容器，它们不会分散附近内容的注意力，视觉感受较弱
文字按钮 
<template>
  <db-button type="text">
    文字按钮
  </db-button>
</template>
Expand Copy

# 颜色

  • 3.6.7 之后颜色按钮通过color来改变text的颜色。目前有success error primary warning
文字按钮 成功按钮 失败按钮 警告按钮 普通按钮 成功按钮 失败按钮 警告按钮 
<db-row class="grid__block">
  <db-button type="text" >
    文字按钮
  </db-button>
  <db-button type="text" color="success" >
    成功按钮
  </db-button>
  <db-button type="text" color="error" >
    失败按钮
  </db-button>
  <db-button type="text" color="warning" >
    警告按钮
  </db-button>
</db-row>
<db-row class="grid__block">
  <db-button  >
    普通按钮
  </db-button>
  <db-button  color="success" >
    成功按钮
  </db-button>
  <db-button  color="error" >
    失败按钮
  </db-button>
  <db-button color="warning">
    警告按钮
  </db-button>
</db-row>
Expand Copy

# 按钮禁止

  • 通过disabled改变其填充颜色的灰度和亮度按钮表达不同的状态.
主要按钮 次级按钮 虚线按钮 文字按钮 
<template>
  <div>
    <db-button disabled>
      主要按钮
    </db-button>
    <db-button type="low" disabled>
      次级按钮
    </db-button>
    <db-button type="dashed" disabled>
      虚线按钮
    </db-button>
    <db-button type="text" disabled>
      文字按钮
    </db-button>
  </div>
</template>
Expand Copy

# 图标按钮

  • 通过icon改变使用的图标.
查询 
<template>
  <div>
    <db-button icon="DBBASEsearch" >
      查询
    </db-button>
    <db-button icon="DBBASEsearch" round> 
    </db-button>
    <db-button icon="DBBASEsearch" type="dashed" round> 
    </db-button>
  </div>
</template>
Expand Copy

# 动态加载

  • 携带icon的按钮在查询的时候会隐藏icon图标
  • 在loading过程中ban属性会一同生效，也就是loading状态下无法进行点击
巨大按钮 大按钮 正常按钮 小按钮 次级按钮 查询 
<template>
  <div>
    <db-button size="extraLarge" loading>
      巨大按钮
    </db-button>
    <db-button size="large" loading>
      大按钮
    </db-button>
    <db-button loading>
      正常按钮
    </db-button>
    <db-button size="small" loading>
      小按钮
    </db-button>
    <db-button type="low" loading>
      次级按钮
    </db-button>
    <db-button icon="DBBASEsearch" @click="click" :loading="loading">
      查询
    </db-button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        loading: false
      }
    },
    methods: {
      click(){
        console.log('触发了')
        this.loading = true
        setTimeout(() => this.loading = false, 5000)
      }
    }
  }
</script>
Expand Copy

# 属性

属性 说明 类型 可选值 默认值 版本
size 尺寸 String large normal small normal 1.0.0
type 类型 Sting primary low dashed primary 1.0.0
icon 图标类名 Sting 1.0.0
round 图标类名 Boolean false 1.0.0
loading 加载状态 Boolean false 2.8.9
ban 禁止点击 Boolean false 2.6.7
color 颜色 String - 3.6.7

# 事件

  • 所有dom事件都将可以监听
事件名称 说明 回调参数 版本
click 点击按钮触发 $event 1.0.0

← 折叠面板 cascader →