ky-floating-ball
v2.4.5
Published
一个可以拖拽且允许打开第三方应用页面的悬浮球插件
Downloads
8
Readme
ky-floating-ball
一个可以运行打开第三方应用的悬浮球
下载安装发布的包
npm install ky-floating-ball
注册组件
main.js中
// 引入组件
import kyFloatingBall from 'ky-floating-ball
// 引入组件样式
import 'ky-floating-ball/style.css';
// 注册组件到全局
app.use(kyFloatingBall);使用组件
<template>
<div>
<ky-floating-ball />
</div>
</template>
API
属性
| 属性名 | 描述 | 类型 | 默认值 | 备注 | | :--: | :--: | :--: | :--: | :--: | | list | 需要点击的数据数组对象 | Array | [] | 必填 | | right | 初始距右边距离 | Number | 20 | - | | bottom | 初始距底部距离 | Number | 20 | - | | pageWidth | 第三方页面的宽度 | Number,String | 400 | 设置的数据不可超过可视区的最大宽度减去工具栏的宽度，不支持calc函数 | | pageHeight | 第三方页面的高度 | Number,String | 100% | 设置的数据不可超过可视区的最大高度(100vh)；支持calc函数，请注意calc的写法 | | zIndex | 悬浮框的层级 | Number | 100 | - |
list数组项
| 属性名 | 描述 | 类型 | 默认值 | | :--: | :--: | :--: | :--: | | key | 需要数据通信的唯一识别值 | String | 必填 | | name | 鼠标指向显示的名称 | String | 必填 | | imgUrl | 图标图片地址 | String | - | | link | 第三方链接 | String | 必填 |
slots
| 名称 | 详情 | 备注 | | :--: | :--: | :--: | | default | 自定义默认内容 | - |
// 举例
<ky-floating-ball :list="list">
<template v-slot="{ data }">
<i class="item">{{ data.key }}</i>
</template>
</ky-floating-ball>自定义指令
| 指令名称 | 传参 | 说明 | | :--: | :--: | :--: | | v-ky-left-click | { key,name,link } | 允许左键点击之后打开link对应的页面，参数为固定格式 | v-ky-right-click | - ｜[{ key }] | 允许当前组件内，鼠标右键打开右键菜单，打开悬浮框的指定页面。传参可以为空，传参的参数为自定义的右键点击事件，参数为固定格式, key对应悬浮数据list的key。目前只允许提供图片地址，即imgUrl。
数据通信(可参考microApp官方文档)
主应用发送或者接受数据
// 发送数据,参数1是key,参数2根据key值传递数据，参数2为传递成功之后的回调函数
window.$kyFloatingBall.setKyMessage(key, data={}, callback)
// 获得子应用的消息数据
window.$kyFloatingBall.getKyMessage(key)
// 监听来自子应用的消息,参数1为key，参数2为回调函数，回调函数的传参为子应用传递的数据
window.$kyFloatingBall.listenerKyMessage(key,callback=(data)=>{})子应用向主应用发送数据
1、dispatch只接受对象作为参数，它发送的数据都会被缓存下来。发送时会遍历新旧值中的每个key判断值是否有变化，如果所有数据都相同则不会发送（注意：只会遍历第一层key），如果数据有变化则将新旧值进行合并后发送。dispatch是异步执行的，多个dispatch会在下一帧合并为一次执行
2、dispatch第二个参数为回调函数，它会在数据发送结束后执行
if(window.microApp) {
// 传递数据
window.microApp.dispatch({type: '子应用发送给主应用的数据'})
// 监听消息
window.microApp.addDataListener(data => {
console.log('来自主应用的数据', data);
});
}
//
注意事项
1、属性list最多只允许添加7个点击对象，超出的对象将不现实，对象需要按照指定数据格式
2、被嵌套的第三方项目必须要做跨域配置,允许被访问 比如：
// nginx.conf
server {
listen 0.0.0.0:8080;
root /app;
location / {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods "GET";
add_header Access-Control-Allow-Headers "Authorization, Content-Type";
index index.htm index.html;
try_files $uri $uri/ /index.html;
}
}
3、第三方的页面有绝对定位，fixed的话，需要在第三方页面body中添加translate，否则页面定位将会失效
<body style="transform: translate(0px, 0px)">
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>