wh_components/package/Button/README.md

郭炜恒的vue组件库

### Button 按钮组件

#### 使用示例

```vue
<wh-button type="copy" copyContent="奥力给" style="margin: 0 4px;"><span>复制SVG代码</span></wh-button>
<wh-button type="simple" @click="handleClick" style="margin: 0 4px;">简单</wh-button>
<wh-button type="normal" style="margin: 0 4px;">普通</wh-button>
<wh-button type="attention" style="margin: 0 4px;">警告</wh-button>
<wh-button type="abort" style="margin: 0 4px;">舍弃</wh-button>
<wh-button type="text" color="#3949AB" style="margin: 0 4px;">删除</wh-button>
<div style="margin-top: 20px;">
  <wh-button type="special" style="margin: 0 4px;" :styleOwn="styleOwn" :isActive="0">
    <div style="width: 100px; height: 30px; line-height: 30px;">登录</div>
  </wh-button>
</div>

```

```javascript
styleOwn: {
   	// 'background': '#fff',
   	'border-radius': '99px',
   	'border':'1px solid #ccc',
   	// 'color':'#000',
    // '--bfColor':'#aaa',
    // '--afColor':'red'
},
isActive: 0
```



#### 参数介绍

```javascript
1. type 按钮类型，包括以下几种值
	copy 需要实现复制功能的按钮，copyContent 传入需要复制的内容
    simple 简单按钮 绿色，常规按钮
    normal 正常按钮 蓝色
    attention 警告按钮 红色
    abort 舍弃按钮 灰色
    text 文本按钮，color 传入文字的颜色
    special 特殊效果的按钮
    
2. color 仅在 type == text 时生效
3. copyContent 仅在 type == copy 时生效
4. loading 布尔值，true 时会显示等待效果  v-show 方式，可频繁使用
5. styleOwn 自定义样式 Object （样式不生效，可以添加 !important）
6. isActive 仅在 type == special 生效， 0 hover时显示效果  1 不显示效果  2 显示效果
```

#### 其他说明

```javascript
special 
[--bfColor,--afColor] 推荐色彩 
[006de3,1d89ff]、[f89001,feab3a]、[ff1424,ff5964]、[209271,28b78d]、[a20bdd,bd2df5]
```