Vzi-element NPM

vzi-element

A Vue.js component for Vzenith

Build Setup

npm install
npm run serve
npm run build

lib Setup:打包组件

1.修改版本号：package.json 
2.打包：npm run lib 
3.发布：npm publish

安装

推荐使用 npm 的方式

npm i vzi-element -S

在 main.js 中写入以下内容：

import VziElement from 'vzi-element';

Vue.use(VziElement);

在页面使用组件：

<vzi-img-viewer />

组件

1.vziImg 图片

<vzi-img src="" :width="600"/>

Attributes

参数	说明	类型	可选值	默认值
alt	同原生	string	—	""
src	同原生	string	—	""
fit	同原生 object-fit	string	fill / contain / cover / none / scale-down	—
width	宽度	Number	—	600
height	高度	string	—	auto
draw-line	是否开启坐标画线,一般用于车载项目	boolean	true/false	false
down-load	是否触摸显示下载按钮	boolean	true/false	false
draw-list	画线坐标数据	Object	—	{ berth_pos:"泊位坐标", car_pos:"车身坐标",parking_pos:"车牌坐标",resolution:"原始图片的宽高",img:"图片地址" }
img-viewer	点击图片预览	boolean	true/false	false
trigger-tip	显示图片信息	string	hover/fixed	fixed

1.图片开启draw-line时，必须同时传入width,height
2.eg:draw-list:{
berth_pos: "{\"point\":[{\"x\":544,\"y\":469},{\"x\":1018,\"y\":363},{\"x\":1018,\"y\":1746},{\"x\":151,\"y\":1636}],\"point_num\":4,\"reco_zone_size_factor\":{\"factor_h\":2048,\"factor_w\":2048}}",
car_pos: "{\"bottom\":266,\"left\":404,\"right\":1008,\"top\":3}",
img: "http://qiniu-test.vzicar.com/imgs/98e099eb-772d070f/20220303/1646271804_-939437491_98e099eb-772d070f_0_48262853_T1089_full.jpg",
resolution: "{\"height\":1080,\"width\":1920}",
parking_pos: "{\"point\":[{\"x\":1069,\"y\":458},{\"x\":1506,\"y\":528},{\"x\":1830,\"y\":1135},{\"x\":2009,\"y\":1854},{\"x\":1092,\"y\":1906}],\"point_num\":5,\"reco_zone_size_factor\":{\"factor_h\":2048,\"factor_w\":2048}}"
}

Events

事件名称	说明	回调参数
on-click	图片点击事件	—

Slot

参数	说明
tooltip	触发 triggerTip 显示的自定义HTML元素，与triggerTip搭配使用

2.vziImgViewer 图片预览

<vzi-img-viewer :url-list="[{url:''}]" />

Attributes

参数	说明	类型	可选值	默认值
initial-index	初始展示图序列号	Number	—	0
url-list	预览图列表	Array	—	{url:'',...}
z-index	图片预览的 z-index	Number	—	20000
close-on-press-escape	是否可以通过按下 ESC 关闭 Dialog	boolean	true/false	true
draw-line	是否开启坐标画线,一般用于车载项目	boolean	true/false	false

Events

事件名称	说明	回调参数
on-close	关闭全屏预览按钮	—
on-switch	切换图片	index

1.图片开启draw-line时，必须同时传入width,height
2.eg:url-list:[{
    img:'',//必须
}]

3.vzi-dialog 弹框

<vzi-dialog/>

Attributes

参数	说明	类型	可选值	默认值
drag	弹框是否可拖拽	boolean	true/false	false
direction	弹框打开方向	String	left/right/center/bottom/top	center
z-index	图片预览的 z-index	Number	—	20000
close-on-press-escape	是否可以通过按下 ESC 关闭 Dialog	boolean	true/false	true
width	弹框宽度	String	—	60%

Events

事件名称	说明	回调参数
on-close	关闭全屏预览按钮	—

4.vzi-video 实时视频

目前公司采用Jessibuca（纯H5直播流播放器），即本组件是基于Vue版本的Jessibuca播放器，加以自定义UI的二次封装
<vzi-video/>
Attributes
参数说明类型可选值默认值
play boolean true/false false
Events
事件名称说明回调参数
on-close 关闭播放 —