hzb-ui

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