# cButton按钮组件

# 使用教程

点击查看教程

# 使用文档

# 导入

main.js中:

import { cButton } from 'cpm-ui'
Vue.use(cButton)
1
2

# 调用

<cButton type="primary" size="large">primary</cButton>
1

# 属性props

参数 说明 类型 可选值 默认值
type 按钮类型 String defaultprimarydanger default
size 按钮大小,除large外其他均为行内 String smallersmallnormallarge normal
circle 是否开启圆角 Boolean truefalse false
btnStyle 按钮样式,也可以通过css重置 Object {}
plain 是否为幽灵按钮,即有边框无背景色 Boolean truefalse false
disabled 是否为禁用按钮,0.6不透明度 Boolean truefalse false

# 事件Event

方法 说明
onClick 点击icon

如:

<cButton type="primary" size="large" @onClick="onClick">primary</cButton>
1

# 插槽slot

按钮内容放置在插槽中,可设置icon等

<cButton>
  <cIcon class="icon-left" type="search" size="1rem" style="margin-right:0.26rem;"></cIcon>搜索
</cButton>
1
2
3

或:

<cButton type="primary" size="large">
  <img src="../assets/img/arrow-left.png" style="width:1.4rem;">上一页
</cButton>
1
2
3

# 特别提示

Last Updated: 12/12/2019, 7:37:32 PM

注:因PC端浏览存在最小12px字号的原因,部分视图下文字会显示比较大,手机端访问正常。