bcx-common-component v1.0.26

bcx-common-component

功能

1.$JsBridge
概述: h5 to app 通信机制
demo:
   挂载： import { JsBridge } from "@/utils/JsBridge.js";
          Vue.prototype.$JsBridge = new JsBridge([]); // 这里的参数 是 回调的 集合， 用于app to h5 调用， 在初始化 会注册到类
   调用： this.$JsBridge.postToApp("webviewRrefresh");

2.$Loadding
概述: loadding弹窗
demo:
   挂载：window.loaddingImpl = new Loadding(this.loaddingImg);
   打开: window.loaddingImpl.handleOpen();
   关闭： window.loaddingImpl.handleClose();

3.$Debounce
概述: 防抖
demo: new Debounce().init(() => (
    cb()
))

4.$TouchUpRefresh
概述： 移动端下滑更新
demo:  <TouchUpRefresh @touchUpCallBack="handleTouchUpCallBack">
        <div slot="scrollTarget">
            <CardComponent
              v-for="(item, index) in searchList"
              :card-data="item"
              :key="index"
              @clickCb="handleToDetail(item)"
            />
        </div>
      </TouchUpRefresh>

5.$WsClass
概述： ws连接类
demo:  let wsImpl = new $WsClass(url, cb)
       wsImpl.wsSend(msg) 心跳机制ping内部已经写好

6.$AppBridge
概述： app to h5 通信机制
demo:  
    挂载：   import { AppBridge } from "@/utils/AppBridge";
            Vue.prototype.$AppBridge = new AppBridge();
    调用（解析器，这里只负责解析  如果是web-view, 这里的触发机制是 titleUpdate的回调）：   
            this.$AppBridge.protocolAnalysis(e.title, "share", (res) => {

            });
    动态注册方法（h5 to app 调用）：register(methodName, methodFun)

7.$DeepClone
概述： 深拷贝，解决序列化 无法 序列 map symbol function 等缺陷
demo:  
    let result = new DeepClone(obj).result

8.$VirtualList
概述： 虚拟列表
demo:  
    <VirtualList :name="VirtualListId" :remain="remain" :size="size" :items="items" :unit="unit">
      <VirtualItem slot="virtual_item" slot-scope="{ item }" :item="item"/>
    </VirtualList>

    props: {
      remain: 8,  //可视个数
      size: 0.4,  // 每格高度
      items,     //全量数据
      VirtualListId: 'gavin', //盒子标识
      unit: 'rem', // 单位
      unitVal: 0   // 单位转px 进制
    }

8.$DragDirective
概述： 虚拟列表
demo:  
  new $DragDirective(Vue)

  <div class="drag-demo" style="position: relative;">
    <div v-drag class="drag-target" style="position: absolute;"></div>
  </div>