# h-ui

## 安装
```
npm i hzb-ui
```

## 引入
### 全局引入
```js
import HUi from 'hzb-ui';
import 'hzb-ui/lib/h-ui.css';
import Vue from 'vue';
Vue.use(HUi)
```
### 局部引入
```js
import { HSelectTree } from 'hzb-ui';
import 'hzb-ui/lib/h-ui.css';
import Vue from 'vue';
Vue.use(HSelectTree)
```

## 使用
### 下拉树 
```html
<h-select-tree><h-select-tree/>
```
#### Attributes
 参数| 说明| 类型|   可选值|	默认值
-|-|-|-|-|
data|数据源|array|--|--
value / v-model|绑定值,单选返回数据本生，多选返回以英文逗号(,)拼接的字符串|string
props|配置选项，具体看下表|object|--|--
width|下拉款宽度，支持px,%|string|--|300px
multiple|是否支持多选|boolean|--|false
lazy|是否懒加载子节点，需与 load 方法结合使用|boolean|--|false
filterable|是否支持搜索|boolean|--|false
default-expand-all|树节点是否全部展开|boolean|--|false
size|尺寸|string|medium / small / mini|small
placeholder|下拉框占位文本|string|--|--
checks-trictly|在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 true |boolean|--|true
###### Props
 参数| 说明| 类型|   可选值|	默认值
 -|-|-|-|-|
label|指定节点标签为节点对象的某个属性值，用于显示文本|string|-|-|
children|指定子树为节点对象的某个属性值|string|-|-|
value|每个节点的唯一标识|string|-|-|
disabled|指定节点选择框是否禁用为节点对象的某个属性值|boolean, function(data, node)|-|-|
isLeaf|指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效|boolean, function(data, node)|-|-|

#### Events
事件名称	|说明	|回调参数
-|-|-|
load|加载子树数据的方法，仅当 lazy 属性为true 时生效|function(node, resolve)
node-click|节点被点击时的回调|该节点所对应的对象
check|当复选框被点击的时候触发|	共两个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性


### 轮播图
```html
<h-swiper>
    <h-swiper-item></h-swiper-item>
<h-swiper/>
```
#### Attributes
 参数| 说明| 类型|   可选值|	默认值
-|-|-|-|-|
height|轮播图高度|string|--|--
trigger|指示器触发方式|string|click|--
autoplay|是否自动切换|boolean|--|true
interval|自动切换的时间间隔，单位为毫秒 |number|--|3000
arrow|切换箭头的显示时机 |string|always/hover/never|hover
direction|轮播图方向 |string|horizontal/vertical|horizontal

### 密码框
```html
<h-password><h-password/>
```
#### Attributes
 参数| 说明| 类型|   可选值|	默认值
-|-|-|-|-|
value / v-model|绑定值|string/number|--|--
size|尺寸|string|medium / small / mini|small
gutter|密码框间距|string / number|--|--
span|密码框数量 |string / number|--|6

### 图片预览
```html
<h-preview-image><h-preview-image/>
```
#### Attributes
 参数| 说明| 类型|   可选值|	默认值
-|-|-|-|-|
visible.sync|预览显示|boolean|--|--
srcList|预览图片路劲|array|--|--
current|当前显示图片。当为number时,为srcList下标;当为string是,传入对应图片地址|string / number|--|--