0.1.6 • Published 2 years ago
h-ui
安装
npm i hzb-ui
引入
全局引入
import HUi from 'hzb-ui';
import 'hzb-ui/lib/h-ui.css';
import Vue from 'vue';
Vue.use(HUi)
局部引入
import { HSelectTree } from 'hzb-ui';
import 'hzb-ui/lib/h-ui.css';
import Vue from 'vue';
Vue.use(HSelectTree)
使用
下拉树
<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 四个属性 |
轮播图
<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 |
密码框
<h-password><h-password/>
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| value / v-model | 绑定值 | string/number | -- | -- |
| size | 尺寸 | string | medium / small / mini | small |
| gutter | 密码框间距 | string / number | -- | -- |
| span | 密码框数量 | string / number | -- | 6 |
图片预览
<h-preview-image><h-preview-image/>
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| visible.sync | 预览显示 | boolean | -- | -- |
| srcList | 预览图片路劲 | array | -- | -- |
| current | 当前显示图片。当为number时,为srcList下标;当为string是,传入对应图片地址 | string / number | -- | -- |