35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
import { css, html, LitElement, unsafeCSS } from 'lit'
|
|
import { customElement } from 'lit/decorators.js'
|
|
import desktopStyle from './css/desktop.scss?inline'
|
|
|
|
@customElement('desktop-element')
|
|
export class DesktopElement extends LitElement {
|
|
static override styles = css`
|
|
${unsafeCSS(desktopStyle)}
|
|
`
|
|
|
|
private onContextMenu = (e: MouseEvent) => {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
console.log('contextmenu')
|
|
}
|
|
|
|
override render() {
|
|
return html`
|
|
<div class="desktop-root" @contextmenu=${this.onContextMenu}>
|
|
<div class="desktop-container">
|
|
<div class="desktop-icons-container"
|
|
:style="gridStyle">
|
|
<AppIcon v-for="(appIcon, i) in appIconsRef" :key="i"
|
|
:iconInfo="appIcon" :gridTemplate="gridTemplate"
|
|
@dblclick="runApp(appIcon)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="task-bar">
|
|
<div id="taskbar" class="w-[80px] h-full flex justify-center items-center bg-blue">测试</div>
|
|
</div>
|
|
</div>
|
|
`
|
|
}
|
|
} |