ky-floating-ball-v3

v1.2.2

Published

10 days ago

一个可以运行打开第三方应用的悬浮球

Downloads

0High
0Medium
0Low

chen07

ky-floating-ball

一个可以运行打开第三方应用的悬浮球

下载安装发布的包

npm install ky-floating-ball-v3 npm install --save @micro-zoe/micro-app

注册组件

main.js中

// 引入组件
import kyFloatingBall from 'ky-floating-ball-v3

// 引入组件样式
import 'ky-floating-ball-v3/lib/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, value } | 允左键点击之后打key为对应悬浮款数据key的页面，value为传递的数据，参数为固定格式 | | 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>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme