Skip to content

window

NPM version

Platform Support

Platform Support

Platform Support

Platform Support

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>

Released under the MIT License.