介绍

Ido Modal 弹 出 层 解 决 方 案

🔶 document »

安装

使用 npm 下载。

npm i ido-modal

在 index.html 编写 ido-sdk 配置。

window.appHost = "http://221.12.100.58:29003"
window.tokenHost = "http://221.12.100.58:29003"
window.hashAuthHost = "/hash"
window.videoHost = "/gateway/map-server"

使用

我们提供 Bi 大屏的唤起。

<template>
  <button type="button" @click="openModal">打开大屏</button>
</template>

<script setup>
import { ref } from "vue";
import { idoModal } from "ido-modal";
import 'ido-modal/lib/index.css';

const openModal = function () {
  idoModal.open({
      title: "标题",
      type: "screen",
      area: ['500px','450px'],
      content: '4813301404468224'
  })
};
</script>

亦支持 iframe 链接网页。

<template>
  <button type="button" @click="openModal">链接网页</button>
</template>

<script setup>
import { ref } from "vue";
import { idoModal } from "ido-modal";
import 'ido-modal/lib/index.css';

const openModal = function () {
  idoModal.open({
      title: "标题",
      type: "iframe",
      area: ['500px','450px'],
      content: 'http://www.layui-vue.com'
  })
};
</script>

在 ido-modal 的 2.0.0 版本，我们集成了视频平台，来帮助你一键打开视频。

需要注意的是，你在使用前需要配置接口代理，内部会调用 api 来获取视频流，你需要通过代理来解决 axios 跨域的问题。

<template>
  <button type="button" @click="openModal">链接网页</button>
</template>

<script setup>
import { ref } from "vue";
import { idoModal } from "ido-modal";
import 'ido-modal/lib/index.css';

const openModal = function () {
    idoModal.open({
        title: "公司监控",
        type: "video",
        area: ['500px','450px'],
        content: '091c0075cef67fc0fe35a42744824d93'
    })
};
</script>