window

介绍：

窗口控制插件，控制窗口放大缩小，隐藏等一系列操作。

• window
  • Method
    • setBounds
    • getDisplay
    • focusWindow
    • blurWindow
    • maximize
    • unMaximize
    • visible
    • close
    • alert
    • createBottomSheets
  • Parameter
    • $AlertOptions
    • $DisplayState
  • Example
    • Usage Plugins
    • Usage WebComponent

Method

setBounds

设置窗口大小

import { windowPlugin } from "@plaoc/plugins";
await windowPlugin.setBounds(false, 500, 750);

getDisplay

获取屏幕信息

import { windowPlugin, $DisplayState } from "@plaoc/plugins";
const displayInfo: $DisplayState = await windowPlugin.getDisplay();

• $DisplayState

focusWindow

窗口聚焦

import { windowPlugin } from "@plaoc/plugins";
await windowPlugin.focusWindow();

blurWindow

窗口失焦

import { windowPlugin } from "@plaoc/plugins";
await windowPlugin.blurWindow();

maximize

最大化窗口

import { windowPlugin } from "@plaoc/plugins";
await windowPlugin.maximize();

unMaximize

取消最大化窗口

import { windowPlugin } from "@plaoc/plugins";
await windowPlugin.unMaximize();

visible

隐藏或者显示窗口

import { windowPlugin } from "@plaoc/plugins";
await windowPlugin.visible();

close

关闭窗口

import { windowPlugin } from "@plaoc/plugins";
await windowPlugin.close();

alert

弹出模态框

import { windowPlugin, $AlertOptions } from "@plaoc/plugins";
const options: $AlertOptions = {
  title: "提示信息",
  message: "登陆成功！",
};
await windowPlugin.alert(options);

• $AlertOptions

createBottomSheets

创建 BottomSheets 界面

import { windowPlugin } from "@plaoc/plugins";
const contentUrl = "http://dweb.中国";
await windowPlugin.createBottomSheets(contentUrl);

Parameter

$AlertOptions

弹出参数

export interface $AlertOptions {
  title: string;
  message: string;
  iconUrl?: string;
  iconAlt?: string;
  confirmText?: string;
  dismissText?: string;
}

$DisplayState

屏幕状态

import { $Rect } from "@plaoc/plugins";
export type $DisplayState = {
  /**
   * 屏幕高度
   */
  height: number;
  /**
   * 屏幕宽度
   */
  width: number;
  /**
   * 键盘外边界位置大小
   */
  imeBoundingRect: $Rect;
};

Example

Usage Plugins

<script setup lang="ts">
import { reactive } from "vue";
import { windowPlugin } from "@plaoc/plugins";

const boardData = reactive({
  width: 500,
  height: 750,
  resizeable: false,
});
const setBounds = () => {
  windowPlugin.setBounds(
    boardData.resizeable,
    boardData.width,
    boardData.height
  );
};
</script>

Usage WebComponent

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { HTMLDwebWindowElement, $WindowState } from "@plaoc/plugins";

const $window = ref<HTMLDwebWindowElement>();
let windowComponent: HTMLDwebWindowElement;
onMounted(async () => {
  windowComponent = $window.value!;
  onStatusBarChange(await windowComponent.getState(), "init");
});
// 监听窗口状态
const onStatusBarChange = (info: $WindowState, type: string) => {
  console.log(
    info.topBarContentColor,
    info.topBarBackgroundColor,
    info.topBarOverlay
  );
};

const focus = () => {
  return windowComponent.focusWindow();
};
const blur = () => {
  return windowComponent.blurWindow();
};
const maximize = () => {
  return windowComponent.maximize();
};
const unMaximize = () => {
  return windowComponent.unMaximize();
};
const visible = () => {
  return windowComponent.visible();
};
const getDisplayInfo = async () => {
  const info = await windowComponent.getDisplay();
  console.log("当前屏幕信息：", JSON.stringify(info));
};
</script>
<template>
  <dweb-window
    ref="$window"
    @statechange="onStatusBarChange($event.detail, 'change')"
  ></dweb-window>
</template>