Frames 浮动窗口 #

<template>
  <div class="test-win-page">
    <Input v-model="the.frameId" style="width:5rem" />
    <ButtonGroup>
      <Button type="info" @click="btnFramed('close')"> 关闭指定id窗口 </Button>
      <Button type="error" @click="btnFramed('clear')"> 关闭所有窗口 </Button>

      <Button type="primary" @click="btnWin"> 弹窗 </Button>
    </ButtonGroup>
    <Button type="primary" @click="btnWin('pull')"> 全屏弹窗 </Button>

    <Button @click="btnWin('model')"> 组件窗口 </Button>

    <Button @click="btnWin('render')"> 多彩函数窗口 </Button>

    <Button @click="btnWin('html')"> Html窗口 </Button>

    <Button @click="btnWin('size')"> Html窗口 指定大小 </Button>
  </div>
</template>

<script>
export default {
  setup() {
    // 使用外挂方式引入，具体查看demo
    const $plus = window.$plus;
    const { reactive, markRaw, h } = $plus.vue;

    const the = reactive({
      frameId: ''
    });

    // 窗口总数
    let framed_count = 0;

    const btnWin = (type) => {
      let _val = {};
      switch (type) {
        case 'model':
          //  console.log('model', List)
          _val = {
            title: '组件窗口',
            //body: '<h5>body</h5',
            model: {
              // 进行非全局组件需标记
              //  component: markRaw(TextPage),
              props: {
                modelValue: { d: 1 }
              },
              component: 'TextJson'
            },
            /** 监听窗口回调 */
            onEvent: (_resp) => {
              console.log('win.on', _resp);
            },
            onClose: (_resp) => {
              // console.log('win.model.close', _resp);
              // 自定义关闭方法
              _resp.close();
            }
          };

          break;

        case 'render':
          _val = {
            title: '函数组件窗口',
            css: 'test-win-skin',
            move: {
              width: 200,
              height: 300
            },
            show: {
              // 隐藏头部
              // head: false,
              close: false
            },
            model: {
              props: {
                title: '测试组件传参数'
              },

              // 函数组件
              component: (props, { emit }) => {
                /**
                 * named 组件原生命名进行回调触发，
                 * 由于是多窗口模式，需要表面来源的窗口命名
                 * 需要加入 byNamed:当前窗口命名，才能接收
                 *
                 * */
                let _resp = { cmd: 'init', named: 'render', data: props.title };
                // 来源窗口组件命名
                _resp.byNamed = win.named;

                const btn = () => {
                  emit('onEvent', _resp);
                };

                const btnClose = () => {
                  emit('onEvent', { cmd: 'close', byNamed: win.named });
                };

                const btnTop = () => {
                  emit('onEvent', { cmd: 'top', byNamed: win.named });
                };

                return h('div', [
                  h('Button', { onClick: btn }, `${props.title}`),
                  h('Button', { onClick: btnClose }, '调用窗口事件关闭'),
                  h('Button', { onClick: btnTop }, '调用窗口置定')
                ]);
                // return () => (
                //   <div>
                //     <span>Hello</span> jsx
                //   </div>
                // )
              }
            },
            /** 监听组件回调 */
            onEvent: (resp) => {
              console.log('win.render', resp);
            }
          };
          break;
        case 'html':
          _val = {
            body: '<h2>默认窗口尺寸</h2>',
            title: 'html窗口'
          };
          break;

        case 'size':
          _val = {
            title: '指定大小',
            body: '<h2>body</h2>',
            move: {
              width: 300,
              height: 300,
              left: framed_count * 10,
              top: framed_count * 10
            }
          };
          break;

        case 'pull':
          _val = {
            body: '<h2>body</h2>',
            title: '<b>html</b>全屏窗口',
            max: true,
            show: {
              /** 显示头部栏 */
              //  head: true,
              /** 显示工具栏按钮 */
              //  btn: true,
              /** max 按钮 */
              max: false
              /** 最小化按钮 */
              // min: false,
            },
            move: {
              width: 300,
              height: 200
            }
          };
          break;

        default:
          $plus.frame.open(
            `网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth`,
            'JS获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度',
            {
              onClose: (opts) => {
                console.log(JSON.stringify(opts));
                // $plus.message.info('点击关闭')
                // 返回当前对话框对象
                confirm({
                  title: '全局订阅事件对话框',
                  body: '<p>是否关闭当前窗口？</p>',
                  // 按钮事件
                  onEvent: (val) => {
                    console.log('JSON.stringify(opts)', val);
                    switch (val.cmd) {
                      case 'ok':
                        // 关闭当前窗口
                        opts.close && opts.close();
                        //对话框确认
                        setTimeout(function () {
                          // $plus.confirm({ show: false })
                          // 异步强制关闭指定窗口，不触发onClose 事件
                          //$plus.frame.close(resp.data.named, true)

                          // 关闭对话框
                          val.close && val.close();
                        }, 2000);

                        break;
                      case 'close':
                      case 'cancel':
                        // 对话框取消
                        // 关闭对话框
                        val.close && val.close();
                        break;
                    }

                    message.info('点击：' + val.cmd);

                    // console.log('ModalEvent', val)
                  }
                });
              }
            }
          );
          break;
      }

      /** 创建一个窗口 */
      const win = $plus.frame.open(_val);

      // 窗体创建完成
      if (win && win.finish) {
        // 返回当前窗口id,用于更新管理
        the.frameId = win.named;
        framed_count = win.data.count;
        console.log(the.frameId);
      }
    };

    /**
     * 弹窗事件
     */
    const btnFramed = (cmd) => {
      let resp;
      switch (cmd) {
        case 'close':
          if (the.frameId) {
            console.log(the.frameId);
            resp = $plus.frame.close(the.frameId);
            console.log('btnFramed:' + cmd, JSON.stringify(resp));
          }
          break;

        case 'clear':
          resp = $plus.frame.clear();
          console.log(JSON.stringify(resp));
          break;
      }
    };

    return { the, btnWin, btnFramed };
  }
};
</script>