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 | 关闭播放 | —