# hzb-ui

> h组件

Latest version **0.1.6** (published 2022-04-22) · 0 weekly downloads

## Install

```sh
npm install hzb-ui
pnpm add hzb-ui
yarn add hzb-ui
bun add hzb-ui
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.6 |
| Published | 2022-04-22 |
| First published | 2022-03-30 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 1 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | hzhibinw |
| Keywords | h-ui, h组件, vue, 前端组件 |

## Links

- npm: https://www.npmjs.com/package/hzb-ui
- npm.io page: https://npm.io/package/hzb-ui

## Dependencies (8)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [vuex](https://npm.io/package/vuex.md) ^3.4.0
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [element-ui](https://npm.io/package/element-ui.md) ^2.15.6
- [vue-router](https://npm.io/package/vue-router.md) ^3.2.0
- [highlight.js](https://npm.io/package/highlight.js.md) ^11.5.1
- [vue-markdown](https://npm.io/package/vue-markdown.md) ^2.2.4
- [github-markdown-css](https://npm.io/package/github-markdown-css.md) ^5.1.0

## Recent versions

- 0.1.6 (latest) — 2022-04-22
- 0.1.5 — 2022-04-13
- 0.1.4 — 2022-04-12
- 0.1.3 — 2022-04-01
- 0.1.2 — 2022-03-31
- 0.1.1 — 2022-03-30
- 0.1.0 — 2022-03-30

## README

# 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|--|--

---
_Source: https://npm.io/package/hzb-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._