window

Introduction:

Window control plug-in, control window zooming, hiding and other operations.

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

Method

setBounds

Set window size

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

getDisplay

Get screen information

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

• $DisplayState

focusWindow

Window focus

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

blurWindow

Window out of focus

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

maximize

Maximize window

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

unMaximize

Unmaximize window

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

visible

Hide or show window

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

close

Close window

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

alert

Popup modal box

import { windowPlugin, $AlertOptions } from "@plaoc/plugins";
const options: $AlertOptions = {
  title: "Prompt information",
  message: "Login successful! ",
};
await windowPlugin.alert(options);

• $AlertOptions

createBottomSheets

Create BottomSheets interface

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

Parameter

$AlertOptions

Popup parameters

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

$DisplayState

Screen state

import { $Rect } from "@plaoc/plugins";
export type $DisplayState = {
  /**
   * Screen height
   */
  height: number;
  /**
   * Screen width
   */
  width: number;
  /**
   * Keyboard outer border position size
   */
  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");
});
// Listening window status
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("Current screen information:", JSON.stringify(info));
};
</script>
<template>
  <dweb-window
    ref="$window"
    @statechange="onStatusBarChange($event.detail, 'change')"
  ></dweb-window>
</template>