bcx-common-component
v1.0.26
Published
公共组件包
Downloads
10
Readme
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>