hz-dbc-lib v1.0.7

hz-dbc-lib

此次更新内容

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大标题

按需加载：
    <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="大标题"/>

card-frame

带有出场动画的面板

按需加载：
    <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>

radius-box

圆角半透明容器，继承组件 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>

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

roll-num

数字滚动组件

按需加载：
    <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"/>

self-inc

数字自增滚动组件

按需加载：
    <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"/>

view-title

一级视图标题

按需加载：
    <script>
      import ViewTitle from 'hz-dbc-lib/packages/components/ViewTitle';
      export default {
        components: { ViewTitle },
      }
    </script>
参数：title 标题内容[String]
eg: <view-title title="一级视图标题"/>

both-sides

两侧大标语动画

按需加载：
    <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-nav

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

base-more

统一的更多按钮

按需加载：
    <script>
      import BaseMore from 'hz-dbc-lib/packages/components/BaseMore';
      export default {
        components: { BaseMore },
      }
    </script>
事件：click 点击事件
eg: <base-more @click="handleMore"/>

wave-circle

水波纹动画组件

按需加载：
    <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>

main-map

高德地图实例化组件，由于地图组件加载资源较多，切必须依赖高德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时，读取组件里事先定义好的值

video-play

视频播放组件，可以播放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"/>