window
Introduction:
Window control plug-in, control window zooming, hiding and other operations.
Method
setBounds
Set window size
ts
import { windowPlugin } from "@plaoc/plugins";
await windowPlugin.setBounds(false, 500, 750);
getDisplay
Get screen information
ts
import { windowPlugin, $DisplayState } from "@plaoc/plugins";
const displayInfo: $DisplayState = await windowPlugin.getDisplay();
focusWindow
Window focus
ts
import { windowPlugin } from "@plaoc/plugins";
await windowPlugin.focusWindow();
blurWindow
Window out of focus
ts
import { windowPlugin } from "@plaoc/plugins";
await windowPlugin.blurWindow();
maximize
Maximize window
ts
import { windowPlugin } from "@plaoc/plugins";
await windowPlugin.maximize();
unMaximize
Unmaximize window
ts
import { windowPlugin } from "@plaoc/plugins";
await windowPlugin.unMaximize();
visible
Hide or show window
ts
import { windowPlugin } from "@plaoc/plugins";
await windowPlugin.visible();
close
Close window
ts
import { windowPlugin } from "@plaoc/plugins";
await windowPlugin.close();
alert
Popup modal box
ts
import { windowPlugin, $AlertOptions } from "@plaoc/plugins";
const options: $AlertOptions = {
title: "Prompt information",
message: "Login successful! ",
};
await windowPlugin.alert(options);
createBottomSheets
Create BottomSheets interface
ts
import { windowPlugin } from "@plaoc/plugins";
const contentUrl = "http://dweb.中国";
await windowPlugin.createBottomSheets(contentUrl);
Parameter
$AlertOptions
Popup parameters
ts
export interface $AlertOptions {
title: string;
message: string;
iconUrl?: string;
iconAlt?: string;
confirmText?: string;
dismissText?: string;
}
$DisplayState
Screen state
ts
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
vue
<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
vue
<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>