main-map 优化了MainMap组建的map实例,增加了center、zoom参数
湖州驾驶舱公用组件插件开发,部分组件有64/32两个模式,注意组件参数
// 全局安装
import Dbc from 'hz-dbc-lib';
Vue.use(Dbc, { size: '32' }); // size: 64/32,默认32,大屏尺寸比例,会根据参数加载不同的样式文件
// 按需安装 参考各组件说明
组件 |
说明 |
app-title |
app大标题 |
card-frame |
带有出场动画的面板 |
radius-box |
圆角半透明容器 |
rect-box |
矩形半透明容器 |
roll-num |
数字滚动组件 |
self-inc |
数字自增滚动组件 |
view-title |
一级视图标题 |
both-sides |
两侧大标语动画 |
app-nav |
app导航 |
base-more |
统一的更多按钮 |
wave-circle |
水波纹动画组件 |
main-map |
高德地图实例化组件 |
video-play |
视频播放组件 |
app大标题
按需加载:
<script>
import AppTitle from 'hz-dbc-lib/packages/components/AppTitle';
export default {
components: { AppTitle },
}
</script>
参数:name 大标题内容[String] [name有值时,优先以name为大标题内容,否则显示router -> router.meta ->router.meta.title,当两者都不存在是,内容显示空]
eg:<app-title/>
<app-title name="大标题"/>
带有出场动画的面板
按需加载:
<script>
import CardFrame from 'hz-dbc-lib/packages/components/CardFrame';
export default {
components: { CardFrame },
}
</script>
参数:direction 面板在页面的方位[String] [left/right/center/middle-left/middle-right 默认:left]
事件:CardShow 面板动画结束时触发,一般用于组件内有依赖dom节点时,会在此事件触发时去加载依赖dom的逻辑
eg:<card-frame direction="right" @CardShow="handleCardShow">
...内容
</card-frame>
圆角半透明容器,继承组件 card-frame
按需加载:
<script>
import RadiusBox from 'hz-dbc-lib/packages/components/RadiusBox';
export default {
components: { RadiusBox },
}
</script>
参数:direction 面板在页面的方位[String] [left/right/center/middle-left/middle-right 默认:left]
事件:CardShow 面板动画结束时触发,一般用于组件内有依赖dom节点时,会在此事件触发时去加载依赖dom的逻辑
eg:<radius-box direction="right" @CardShow="handleCardShow">
...内容
</radius-box>
矩形半透明容器,继承组件 card-frame
按需加载:
<script>
import RectBox from 'hz-dbc-lib/packages/components/RectBox';
export default {
components: { RectBox },
}
</script>
参数:direction 面板在页面的方位[String] [left/right/center/middle-left/middle-right 默认:left]
事件:CardShow 面板动画结束时触发,一般用于组件内有依赖dom节点时,会在此事件触发时去加载依赖dom的逻辑
eg:<rect-box direction="right" @CardShow="handleCardShow">
...内容
</rect-box>
数字滚动组件
按需加载:
<script>
import RollNum from 'hz-dbc-lib/packages/components/RollNum';
export default {
components: { RollNum },
}
</script>
参数:number 数字[Number]
fixed 保留的小数位,默认是number的小数位[Number]
eg: <roll-num class="roll-num" :number="5678"/>
数字自增滚动组件
按需加载:
<script>
import SelfInc from 'hz-dbc-lib/packages/components/SelfInc';
export default {
components: { SelfInc },
}
</script>
参数:number 原始数字[Number]
firstRate 首先展示的数值是原始数据的百分比[Number] [必须小于1]
splint 自增次数,默认10次[Number]
time 自增间隔(ms),不能小于2000ms,默认5000ms[Number]
fixedBit 自增过程中强制数字精确到的小数位数[Number]
eg: <self-inc class="roll-num" :number="5678"/>
一级视图标题
按需加载:
<script>
import ViewTitle from 'hz-dbc-lib/packages/components/ViewTitle';
export default {
components: { ViewTitle },
}
</script>
参数:title 标题内容[String]
eg: <view-title title="一级视图标题"/>
两侧大标语动画
按需加载:
<script>
import BothSides from 'hz-dbc-lib/packages/components/BothSides';
export default {
components: { BothSides },
}
</script>
参数:text 大标语内容[String]
direction 左侧/右侧[String] [left/right,默认left]
eg: <both-sides text="数字湖州·医保专题" direction="right"/>
app导航
按需加载:
<script>
import AppNav from 'hz-dbc-lib/packages/components/AppNav';
export default {
components: { AppNav },
}
</script>
参数:routes 导航列表[Array]
isShow 是否显示导航[Boolean] [true/false,默认true]
size 适配的分辨率尺寸[Number, String] [32/64,默认32]
eg: <app-nav/>
统一的更多按钮
按需加载:
<script>
import BaseMore from 'hz-dbc-lib/packages/components/BaseMore';
export default {
components: { BaseMore },
}
</script>
事件:click 点击事件
eg: <base-more @click="handleMore"/>
水波纹动画组件
按需加载:
<script>
import WaveCircle from 'hz-dbc-lib/packages/components/WaveCircle';
export default {
components: { WaveCircle },
}
</script>
参数:color 颜色[String]
transform 变形操作[String]
width 宽度,默认100px[String]
height 宽度,默认100px[String]
gradient 是否渐变填充,默认false[Boolean]
scale 缩放倍数,默认1.8[Number]
opacity 不透明度,默认1[Number]
eg: <wave-circle color="#92c2cb" :scale="2" :opacity="0.6" width="100px" height="100px"/>
另外还有一种直接获取水波纹动画dom节点
eg:
<script>
import WaveCircleJs from 'hz-dbc-lib/packages/components/WaveCircle';
const waveCircleDom = new WaveCircleJs({ width: '50px', height: '50px', scale: 2.8, color: '#61D9F7' }).el();
const dom = document.createElement('div');
dom.innerHTML = waveCircleDom;
this.$el.appendChild(dom);
</script>
高德地图实例化组件,由于地图组件加载资源较多,切必须依赖高德api,所以此组件只支持按需加载
且需要事先在html中标签引入高德api
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=1b91f37cd863557b1ed9a01314b3cf89&plugin=AMap.MarkerClusterer,AMap.Heatmap,AMap.CustomLayer"
></script>
<script src="http://webapi.amap.com/loca?v=1.3.2&key=1b91f37cd863557b1ed9a01314b3cf89"></script>
<script type="text/javascript" src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
按需加载:
<script>
import MainMap from 'hz-dbc-lib/packages/components/MainMap';
export default {
components: { MainMap },
}
</script>
如果编译时提示 AMap 不存在,eslint报错,则在vue.config.js文件中添加配置
configureWebpack: {
externals: {
// 高德地图配置
AMap: 'AMap',
AMapUI: 'AMapUI',
Loca: 'Loca',
},
},
参数:size 适配的分辨率尺寸,32/64,默认32[Number, String]
mapStyle 地图主题 暗色dark/亮色light[String]
zoomLevel 地图的最小最大级别,默认[10, 18][Array]
isDistrict 是否显示地市边界,默认true[Boolean]
viewMode 可选'3D'/'2D',默认2D[String]
isControl 是否需要控制地图,默认true[Boolean]
maxZoom 显示地市的最大级别,默认12[Number]
pitch 俯仰角度,[0,83],2D地图下无效,默认0[Number]
showName 是否显示地名,默认false[Boolean]
isNewMap 是否展示南太湖新区,默认true[Boolean]
isTriggerClick 是否触发区域点击事件,默认true[Boolean]
center 地图中心点,不传则使用默认的中心[Array]
zoom 地图层级,不传则使用默认的层级[Number]
v-model: region 当前选中的地区,可能值[湖州市,吴兴区,南浔区,德清县,长兴县,安吉县],当参数isNewMap是true时,还可能是[南太湖新区],默认:湖州市 [String]
事件:mapCompleted 地图实例化完成事件,事件返回map实例
eg: <main-map view-mode="3D" v-model="region" @mapCompleted="handleMapCompleted"/>
<script>
export default {
data() {
return {
mapLoad: false, // 地图是否加载完成,用来判断其他依赖地图的组件的加载顺序
};
},
methods: {
handleMapCompleted(map) {
this.mapLoad = true;
this.map = map; // map对象不要放在data函数里绑定(原因:vue会对map对象所有属性进行劫持,增加内存开销)
}
}
}
</script>
map实例原型里自定义方法:
onRequestLocation 地图视图设置为默认的zoom和center
showDistrictExplorer 显示湖州区域边界
hideDistrictExplorer 隐藏湖州区域边界
map实例原型里自定义属性:
userZoom [Number]改变地图的默认zoom,取值范围【1-18】,当为undefined时,读取组件里事先定义好的值
userCenterGeo [Array]改变地图的默认中心点,取值[lng,lat],当为undefined时,读取组件里事先定义好的值
视频播放组件,可以播放hls流格式的直播,依赖第三方组件video.js
按需加载:
<script>
import VideoPlay from 'hz-dbc-lib/packages/components/VideoPlay';
export default {
components: { VideoPlay },
}
</script>
参数:videoPath 视频地址[String]
isMuted 是否静音,默认:true[Boolean]
eg: <video-play style="width: 400px; height: 200px;" video-path="videoPath"/>