# 组件

## 按钮

> 型号：大、中(默认)、小<br />
> 功能：直角、圆角、手型<br />
> 类型：默认、主要、成功、信息、警告、危险<br/>
> 扩展：自定义背景色、自定义文字颜色

### 基础用法

---

<lv-button>默认</lv-button>
<lv-button type="primary">主要</lv-button>
<lv-button type="success">成功</lv-button>
<lv-button type="info">信息</lv-button>
<lv-button type="warning">警告</lv-button>
<lv-button type="danger">危险</lv-button>

---

<lv-button round>默认</lv-button>
<lv-button round type="primary">主要</lv-button>
<lv-button round type="success">成功</lv-button>
<lv-button round type="info">信息</lv-button>
<lv-button round type="warning">警告</lv-button>
<lv-button round type="danger">危险</lv-button>

---

<lv-button round hand>手型</lv-button>
<lv-button round type="primary" disabled>禁用</lv-button>
<lv-button round bgColor="#20214F" fontColor="#fff">自定义颜色</lv-button>

```vue
<lv-button>默认</lv-button>
<lv-button type="primary">主要</lv-button>
<lv-button type="success">成功</lv-button>
<lv-button type="info">信息</lv-button>
<lv-button type="warning">警告</lv-button>
<lv-button type="danger">危险</lv-button>

<lv-button round>圆角</lv-button>

<lv-button round hand>手型</lv-button>
<lv-button round type="primary" disabled>禁用</lv-button>
<lv-button round bgColor="#20214F" fontColor="#fff">自定义颜色</lv-button>
```

|  参数   | 说明  |  类型  |  可选值  |  默认值 |
|  ----  | ----  | ----  | ------  | -----  |
| size  | 尺寸 | String | big / medium / small | medium |
| type  | 类型 | String | primary / success / info / warning / danger | default |
| round  | 是否圆角 | Boolean | - | false |
| hand  | 是否手型 | Boolean | - | false |
| disabled  | 是否禁用 | Boolean | - | false |
| bgColor  | 背景颜色 | String | - | - |
| fontColor  | 文字颜色 | String | - | - |

## 图标

> 功能：任意大小、任意颜色<br />
> 扩展：矢量图

<lv-button @click="small">变小</lv-button>
<lv-button @click="big">变大</lv-button>
<lv-button @click="setRed">变红</lv-button>
<lv-button @click="setYellow">变黄</lv-button>
<lv-button @click="setBlue">变蓝</lv-button>
<lv-button @click="setGreen">变绿</lv-button>
<lv-button @click="setOrigin">还原</lv-button>

----

<div class="icon">
    <lv-icon type="add" :fontSize="fontSize" :color="fontColor"></lv-icon>
    <div class="unicode">&amp;#xe600;</div>
</div>
<div class="icon">
    <lv-icon type="weChat" :fontSize="fontSize" :color="fontColor"></lv-icon>
    <div class="unicode">&amp;#xe609;</div>
</div>
<div class="icon">
    <lv-icon type="friend" :fontSize="fontSize" :color="fontColor"></lv-icon>
    <div class="unicode">&amp;#xe60b;</div>
</div>
<div class="icon">
    <lv-icon type="addRound" :fontSize="fontSize" :color="fontColor"></lv-icon>
    <div class="unicode">&amp;#xe608;</div>
</div>
<div class="icon">
    <lv-icon type="share" :fontSize="fontSize" :color="fontColor"></lv-icon>
    <div class="unicode">&amp;#xe610;</div>
</div>
<div class="icon">
    <lv-icon type="thumbs" :fontSize="fontSize" :color="fontColor"></lv-icon>
    <div class="unicode">&amp;#xe611;</div>
</div>
<div class="icon">
    <lv-icon type="message" :fontSize="fontSize" :color="fontColor"></lv-icon>
    <div class="unicode">&amp;#xe612;</div>
</div>
<div class="icon">
    <lv-icon type="arrow" :fontSize="fontSize" :color="fontColor"></lv-icon>
    <div class="unicode">&amp;#xe613;</div>
</div>

```vue
<lv-icon type="add" fontSize="60"></lv-icon>
<lv-icon type="wechat" fontSize="60"></lv-icon>
<lv-icon type="friend" fontSize="60"></lv-icon>
<lv-icon type="addRound" fontSize="60"></lv-icon>
```

|  参数   | 说明  |  类型  |  可选值  |  默认值 |
|  ----  | ----  | ----  | ------  | -----  |
| type  | 类型 | String | - | - |
| color  | 字体颜色 | String | - | - |
| fontSize  | 字体大小 | String | - | - |
| fontUnit  | 字体单位 | String | - | px |

## 弹出层

> 功能：弹出层(直角、圆角)<br />
> 扩展：自定义宽高
### 基础用法

---

<lv-button @click="showDefaultDialog = true">点我弹出</lv-button>
<lv-dialog v-model="showDefaultDialog" title="授权"></lv-dialog>

```vue
<lv-dialog
    title="授权"
    v-model="var">
</lv-dialog>
```

|  参数   | 说明  |  类型  |  可选值  |  默认值 |
|  ----  | ----  | ----  | ------  | -----  |
| title  | 标题 | String | - | 提示 |

<script>
    export default {
        data () {
            return {
                fontSize: 60,
                fontColor: '#333',
                showDefaultDialog: false,
            }
        },
        methods: {
            small () {
                this.fontSize = this.fontSize - 10;
            },
            big () {
                this.fontSize = this.fontSize + 10;
            },
            setRed () {
                this.fontColor = 'red';
            },
            setYellow () {
                this.fontColor = 'yellow';
            },
            setBlue () {
                this.fontColor = 'blue';
            },
            setGreen () {
                this.fontColor = 'green';
            },
            setOrigin () {
                this.fontSize = 60;
                this.fontColor = '#000';
            }
        }
    }
</script>

<style>
table {
    width: 100%;
    display: table;
    text-align: center;
}
th {
    color: #000;
    background-color: #eee;
}
.icon {
    margin: 0 10px;
    text-align: center;
    display: inline-block;
}
.icon .unicode {
    color: #666;
    font-size: 14px;
    margin-top: 6px;
}
</style>