Merge branch 'master' into feature-component-digicipher
This commit is contained in:
wangchangqi
commit
95f46ab5f3
|
|
@ -3,28 +3,43 @@
|
||||||
## 介绍
|
## 介绍
|
||||||
|
|
||||||
### overflowmenu：溢出菜单。
|
### overflowmenu：溢出菜单。
|
||||||
|
现有overflowmenu包含一个绑定点击事件的star-button按钮，通过在响应函数closeoverflowmenu控制溢出菜单内容的显示与隐藏。
|
||||||
|
|
||||||
## 新需求（主页面要求——罗 9.5）
|
后续改进：结合active-overlay组件，通过调用overlay-stack类控制溢出菜单的显示与隐藏
|
||||||
|
|
||||||
1. 外部颜色控制（思路：使用自定义 css 样式，如： --test-color：XXX p{color： --test-color}，通过修改自定义 css 样式的值达到从外部修改组件颜色）
|
```typescript
|
||||||
2. 弹出菜单时的越界判断，包括主、副屏切换时的图标定位以及旋转屏幕时的定位
|
//现有方案
|
||||||
思路：
|
closeoverflowmenu(e: any) {
|
||||||
（1）首先获取 button 在屏幕显示的 left、right、top 和 bottom 值以及 menu 的 width 和 height
|
// 获取点击事件所在的标签名字
|
||||||
（2）对于右侧边界：right >= width ? true 则 menu 的 left = button 的 left : false 则 menu 的 right = button 的 right
|
const tagName = e.target.tagName.toLowerCase()
|
||||||
（3）对于下边界：bottom >= height ? true 则 menu 的 top = button 的 bottom ： false 则 menu 的 bottom = button 的 top
|
// 判断是否点击的star-overflowmenu标签
|
||||||
3. 外部控制接口，事件还是属性（暂定）
|
if (tagName == 'star-overflowmenu') {
|
||||||
4. 弹出的菜单绑定在父节点上以供调用，减少重复使用（思路：后续通过 overlay 组件实现）
|
this.state++
|
||||||
|
}
|
||||||
## 问题(9.6)
|
// 如果点在空白处则关闭菜单
|
||||||
|
if (tagName != 'star-overflowmenu') {
|
||||||
1. 首次点击最右侧的按钮是获取到的菜单宽度和高度与实际不符：（该问题已消失，但不知道为何消失）
|
// 获取所有的star-overflowmenu
|
||||||
2. 点击空白处无法关闭菜单栏（解决方法：将点击事件绑定在父容器中）
|
var menulist = this.shadowRoot!.querySelectorAll('star-overflowmenu')
|
||||||
|
for (var i = 0; i < menulist.length; i++) {
|
||||||
## 新要求：(9.7)
|
menulist[i].open = true
|
||||||
|
var menu = menulist[i].renderRoot.querySelector(
|
||||||
（1）将不需要修改的“var”变量声明变成“const”(已修改)
|
'#menuitem'
|
||||||
（2）变量命名要直观且有解释（已修改变量命名规范并添加对应注释）
|
) as HTMLElement
|
||||||
（3）点击一个按钮后其余按钮应关闭（方法同（1））
|
menu.style.display = 'none'
|
||||||
（4）可以将 slot 增加名称从而将 div 以删除
|
this.state = 0
|
||||||
（5）定位方式修改为相对定位，将将 fixed 改为 relative，达到适应效果
|
}
|
||||||
（6）控制菜单栏宽度，菜单栏中 star-ul 中的 ul 标签负责扩充大小，修改其 width 值
|
}
|
||||||
|
// 通过state判断是否已有展开的菜单，若已有则关闭菜单
|
||||||
|
if (this.state > 1) {
|
||||||
|
var menulist = this.shadowRoot!.querySelectorAll('star-overflowmenu')
|
||||||
|
for (var i = 0; i < menulist.length; i++) {
|
||||||
|
menulist[i].open = true
|
||||||
|
var menu = menulist[i].renderRoot.querySelector(
|
||||||
|
'#menuitem'
|
||||||
|
) as HTMLElement
|
||||||
|
menu.style.display = 'none'
|
||||||
|
this.state = 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
@ -1,5 +1,76 @@
|
||||||
# 全局 overlay
|
# Adobe SP组件库——overlay
|
||||||
|
|
||||||
## 类型包括：
|
介绍：Adobe的overlay组件是一个可以用于全局调用的叠加层。
|
||||||
|
|
||||||
- 置于底部的 overlay，内可填充 ul
|
## 交互类型
|
||||||
|
|
||||||
|
- type TriggerInteractions =
|
||||||
|
| 'click'
|
||||||
|
| 'custom',
|
||||||
|
| 'hover'
|
||||||
|
| 'modal'
|
||||||
|
|
||||||
|
overlay可有多种触发类型，各类型对应情况如下
|
||||||
|
|
||||||
|
>click将打开一个overlay，该overlay将在下一次单击时立即关闭，该overlay不在overlay内的元素上。
|
||||||
|
|
||||||
|
>custom允许从外部对显示流程进行定制。
|
||||||
|
|
||||||
|
>hover一旦指针离开overlay层所连接的触发器，就会关闭overlay层。
|
||||||
|
|
||||||
|
>modal模态形式，将仅在其内容中捕获标签顺序。
|
||||||
|
|
||||||
|
## overlay中主要用到的方法
|
||||||
|
```typescript
|
||||||
|
Overlay.open(
|
||||||
|
(owner: HTMLElement),
|
||||||
|
(interaction: TriggerInteractions),
|
||||||
|
(overlayElement: HTMLElement),
|
||||||
|
(options: OverlayOptions) //
|
||||||
|
);
|
||||||
|
```
|
||||||
|
Overlay.open() 是一个异步方法，它返回一个用于关闭overlay的函数。
|
||||||
|
>owner:HTMLElement 代表要打开叠加层的元素
|
||||||
|
|
||||||
|
>interaction:TriggerInteractions overlay的触发交互类型
|
||||||
|
|
||||||
|
>overlayElement:HTMLElement 将要放入overlay中的element元素
|
||||||
|
|
||||||
|
>options:OverlayOptions overlay定制选项
|
||||||
|
|
||||||
|
## 作用
|
||||||
|
- 置于底部的overlay，内可填充ul,其他组件可通过调用overlay显示信息
|
||||||
|
# 组件交互
|
||||||
|
- 可与button、menu、popover、picker等联合使用
|
||||||
|
|
||||||
|
# overlay场景、应有接口
|
||||||
|
- 弹出框、溢出菜单、picker、警告框、主页面应用图标长按显示信息框等
|
||||||
|
- 接口：position显示位置（top、right、left、bottom）、interaction type交互方式（click、custom、hover、modal、replace）、overlayoptions显示配置（delay：延迟出现overlay；placement：自定义位置；offset：偏移量）
|
||||||
|
|
||||||
|
# overlay包含内容
|
||||||
|
> overlay.ts工厂类包含异步函数open()，其通过调用open()和close()函数实现overlay的打开和关闭
|
||||||
|
>> open(OverlayOptions)，其中OverlayOptions为overlay的一些配置参数，open应有方法两个主要方法：updatePosition()和reparentChildren()
|
||||||
|
>>> updatePosition()方法实现open过程的overlay显示位置定位
|
||||||
|
>>> reparentChildren()方法实现组件中content和overlay显示位置的转换
|
||||||
|
|
||||||
|
>> close()，关闭overlay，主要分为两步：关闭overlay，将overlay的content替换回原位置
|
||||||
|
>>> 移除overlay，removeoverlay节点
|
||||||
|
>>> reparentChildren，替换元素
|
||||||
|
|
||||||
|
# overlay使用
|
||||||
|
- 首先获取响应点击事件的节点元素：
|
||||||
|
```typescript
|
||||||
|
const targetNode = e.target as HTMLElement
|
||||||
|
```
|
||||||
|
- 获取被点击节点父节点：
|
||||||
|
```typescript
|
||||||
|
const originalNode = targetNode?.parentElement as HTMLElement
|
||||||
|
```
|
||||||
|
- 获取要显示在overlay中的内容：
|
||||||
|
```typescript
|
||||||
|
const content = targetNode?.nextElementSibling as HTMLElement
|
||||||
|
```
|
||||||
|
- 构造响应函数时通过调用overlayStack中的openOverlay方法创建activeoverlauy：
|
||||||
|
```typescript
|
||||||
|
this.overlayStack.openOverlay(originalNode, targetNode, content)
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,119 @@
|
||||||
|
import {LitElement, html, TemplateResult} from 'lit'
|
||||||
|
import {customElement, property} from 'lit/decorators.js'
|
||||||
|
import {OverlayOpenDetail, TriggerInteractions} from './overlay-types'
|
||||||
|
|
||||||
|
@customElement('star-activeoverlay')
|
||||||
|
export class ActiveOverlay extends LitElement {
|
||||||
|
|
||||||
|
// 根节点（占位符所表示的元素的父节点）
|
||||||
|
public root?: HTMLElement
|
||||||
|
// 被点击的节点
|
||||||
|
public targetNode?: HTMLElement
|
||||||
|
// 被替换后用以保存要复原的节点集合
|
||||||
|
public restoreContent?: HTMLElement
|
||||||
|
// 显示位置策略
|
||||||
|
@property({reflect: true})
|
||||||
|
public placement?: String
|
||||||
|
|
||||||
|
public constructor() {
|
||||||
|
super()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 调用初始化函数
|
||||||
|
private open(openDetail: OverlayOpenDetail): void {
|
||||||
|
this.extractDetail(openDetail)
|
||||||
|
}
|
||||||
|
// 初始化函数
|
||||||
|
private extractDetail(detail: OverlayOpenDetail): void {
|
||||||
|
this.placement = detail.placement
|
||||||
|
this.offset = detail.offset
|
||||||
|
this.skidding = detail.skidding || 0
|
||||||
|
this.root = detail.root
|
||||||
|
}
|
||||||
|
|
||||||
|
private stealOverlayContent(element: HTMLElement) {}
|
||||||
|
// 位置更新函数
|
||||||
|
public updatePosition = () => {
|
||||||
|
// 设置最大显示宽度和高度
|
||||||
|
const availableWidth = 200
|
||||||
|
const availableHeight = 200
|
||||||
|
// 显示内容content宽度和高度——用于越界后的定位计算（右下、右、下）
|
||||||
|
const contentwidth = this.restoreContent?.offsetWidth as number
|
||||||
|
const contentheight = this.restoreContent?.offsetHeight as number
|
||||||
|
// 获取网页宽度——用于越界判断
|
||||||
|
const bodywidth = document.documentElement.clientWidth
|
||||||
|
const bodyheight = document.documentElement.clientHeight
|
||||||
|
// 被点击的节点
|
||||||
|
const targetnode = this.targetNode as HTMLElement
|
||||||
|
// 获取被点击节点位置——用于越界判断和定位
|
||||||
|
const targetNodePosition = targetnode.getBoundingClientRect()
|
||||||
|
const targettop = Number(targetNodePosition?.top)
|
||||||
|
const targetbottom = Number(targetNodePosition?.bottom)
|
||||||
|
const targetleft = Number(targetNodePosition?.left)
|
||||||
|
const targetright = Number(targetNodePosition?.right)
|
||||||
|
// 设置样式
|
||||||
|
this.style.position = 'relative'
|
||||||
|
this.style.zIndex = '1'
|
||||||
|
this.style.maxWidth = availableWidth + 'px'
|
||||||
|
this.style.maxHeight = availableHeight + 'px'
|
||||||
|
// 边界判断
|
||||||
|
const rightline = targetright + contentwidth > bodywidth ? true : false // 右侧越界条件
|
||||||
|
const bottomline =
|
||||||
|
targetbottom + availableHeight > bodyheight ? true : false //下方越界条件
|
||||||
|
// 右下角边界
|
||||||
|
if (rightline && bottomline) {
|
||||||
|
this.style.left = targetleft - (contentwidth - targetnode.offsetWidth) + 'px'
|
||||||
|
this.style.top = targettop - targetnode.offsetHeight + 'px'
|
||||||
|
return
|
||||||
|
} else if (rightline) {
|
||||||
|
// 右侧边界
|
||||||
|
this.style.left = targetleft - (contentwidth - targetnode.offsetWidth) + 'px'
|
||||||
|
this.style.top = targettop + targetnode.offsetHeight + 'px'
|
||||||
|
return
|
||||||
|
} else if (bottomline) {
|
||||||
|
// 下侧边界
|
||||||
|
this.style.left = targetleft + 'px'
|
||||||
|
this.style.top = targettop - contentheight + 'px'
|
||||||
|
return
|
||||||
|
} else {
|
||||||
|
// 正常情况
|
||||||
|
this.style.left = targetleft + 'px'
|
||||||
|
this.style.top = targettop + targetnode.offsetHeight + 'px'
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private onSlotChange(): void {
|
||||||
|
this.updatePosition()
|
||||||
|
}
|
||||||
|
|
||||||
|
public render(): TemplateResult {
|
||||||
|
const content = html`
|
||||||
|
<div>
|
||||||
|
<slot @slotchange=${this.onSlotChange}></slot>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
return content
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建overlay
|
||||||
|
public static create(
|
||||||
|
root?: HTMLElement,
|
||||||
|
targetnode?: HTMLElement,
|
||||||
|
content?: HTMLElement
|
||||||
|
): ActiveOverlay {
|
||||||
|
const activeoverlay = new ActiveOverlay()
|
||||||
|
// 初始化参数
|
||||||
|
activeoverlay.root = root
|
||||||
|
activeoverlay.targetNode = targetnode
|
||||||
|
activeoverlay.restoreContent = content
|
||||||
|
|
||||||
|
return activeoverlay
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
'star-activeoverlay': ActiveOverlay
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
import {ActiveOverlay} from './active-overlay'
|
||||||
|
|
||||||
|
export class OverlayStack {
|
||||||
|
public overlays: ActiveOverlay[] = []
|
||||||
|
public isOpen: Boolean = false
|
||||||
|
|
||||||
|
public openOverlay(root?: HTMLElement, targetnode?: HTMLElement, content?: HTMLElement) {
|
||||||
|
// 创建activeoverlay对象
|
||||||
|
const activeOverlay = ActiveOverlay.create(root, targetnode, content)
|
||||||
|
// 开启状态
|
||||||
|
this.isOpen = true
|
||||||
|
// 为overlay添加显示内容
|
||||||
|
activeOverlay.appendChild(content as HTMLElement)
|
||||||
|
// 创建注释节点模板——用于替换要展示在overlay中的元素
|
||||||
|
const placeholderTemplate: Comment = document.createComment(
|
||||||
|
'placeholder for reparented element'
|
||||||
|
)
|
||||||
|
// 占位
|
||||||
|
activeOverlay.root?.appendChild(placeholderTemplate)
|
||||||
|
// 将activeoverlay添加到body底部
|
||||||
|
document.body.append(activeOverlay)
|
||||||
|
// 将activeoverlay添加到已打开overlay数组中
|
||||||
|
this.overlays.push(activeOverlay)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* closeOverlay
|
||||||
|
*/
|
||||||
|
public closeOverlay(): void {
|
||||||
|
// 提取要关闭的overlay
|
||||||
|
const closeactiveoverlay = this.overlays.pop() as unknown as ActiveOverlay
|
||||||
|
// 获取根节点
|
||||||
|
const srcroot = closeactiveoverlay.root
|
||||||
|
// 获取注释节点
|
||||||
|
const placeholder = srcroot?.lastChild as Node
|
||||||
|
// 获取overlay中的内容
|
||||||
|
const content = closeactiveoverlay.restoreContent as HTMLElement
|
||||||
|
// 替换子节点
|
||||||
|
srcroot?.replaceChild(content, placeholder)
|
||||||
|
// 从body中移除activeoverlay节点
|
||||||
|
document.body.removeChild(closeactiveoverlay)
|
||||||
|
this.isOpen = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
// 定义overlay各种参数类型、接口
|
||||||
|
|
||||||
|
// click用于普通弹窗；longpress可用于主界面图标长按显示详情页；hover可用于解释框的显示；
|
||||||
|
// custom、inline、replace和modal尚未理解用途，暂定
|
||||||
|
export type TriggerInteractions =
|
||||||
|
| 'click'
|
||||||
|
| 'longpress'
|
||||||
|
| 'hover'
|
||||||
|
| 'custom'
|
||||||
|
| 'replace'
|
||||||
|
| 'inline'
|
||||||
|
| 'modal'
|
||||||
|
|
||||||
|
export type thememode ='light' | 'dark'
|
||||||
|
|
||||||
|
// overlay配置信息
|
||||||
|
export type OverlayOptions = {
|
||||||
|
root?: HTMLElement
|
||||||
|
mode?: String
|
||||||
|
// delayed?: boolean
|
||||||
|
// placement：adobe通过轻量前段工具包floating-ui中的FloatingUIPlacement进行动态定位浮动元素
|
||||||
|
// 出现位置
|
||||||
|
placement?: String
|
||||||
|
offset?: number
|
||||||
|
// receivesFocus?: 'auto'
|
||||||
|
// notImmediatelyClosable?: boolean
|
||||||
|
// abortPromise?: Promise<boolean>
|
||||||
|
// 为没有元素触发的覆盖提供一个虚拟触发
|
||||||
|
// virtualTrigger?: VirtualTrigger
|
||||||
|
}
|
||||||
|
|
||||||
|
// export interface OverlayOpenDetail {
|
||||||
|
// content: HTMLElement;
|
||||||
|
// contentTip?: HTMLElement;
|
||||||
|
// delayed: boolean;
|
||||||
|
// offset: number;
|
||||||
|
// skidding?: number;
|
||||||
|
// placement?: Placement;
|
||||||
|
// receivesFocus?: 'auto';
|
||||||
|
// virtualTrigger?: VirtualTrigger;
|
||||||
|
// trigger: HTMLElement;
|
||||||
|
// root?: HTMLElement;
|
||||||
|
// interaction: TriggerInteractions;
|
||||||
|
// theme: ThemeData;
|
||||||
|
// notImmediatelyClosable?: boolean;
|
||||||
|
// abortPromise?: Promise<boolean>;
|
||||||
|
// }
|
||||||
|
|
||||||
|
export interface OverlayOpenDetail {
|
||||||
|
content: HTMLElement // 显示内容
|
||||||
|
offset: number // 偏移
|
||||||
|
skidding?: number // 滑动
|
||||||
|
placement?: String //显示位置
|
||||||
|
// virtualTrigger?: VirtualTrigger // 虚拟触发
|
||||||
|
trigger: HTMLElement // 触发
|
||||||
|
root?: HTMLElement // 根节点
|
||||||
|
interaction: TriggerInteractions // 交互
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
import { OverlayStack } from './overlay-stack'
|
||||||
|
import { OverlayOptions, TriggerInteractions } from './overlay-types'
|
||||||
|
|
||||||
|
export interface OverlayDisplayQueryDetail {
|
||||||
|
overlayRootName?: string
|
||||||
|
overlayRootElement?: HTMLElement
|
||||||
|
overlayContentTipElement?: HTMLElement
|
||||||
|
}
|
||||||
|
|
||||||
|
export class Overlay {
|
||||||
|
// 基础属性
|
||||||
|
private isOpen = false
|
||||||
|
private overlayElement: HTMLElement
|
||||||
|
private owner: HTMLElement
|
||||||
|
private interaction: TriggerInteractions
|
||||||
|
|
||||||
|
private static overlayStack = new OverlayStack()
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 初始化构造参数
|
||||||
|
* @param owner 用于定位overlay显示位置的父元素节点
|
||||||
|
* @param interaction 引起overlay显示的交互类型
|
||||||
|
* @param overlayElement 用于显示overlay的节点
|
||||||
|
*/
|
||||||
|
constructor(
|
||||||
|
owner: HTMLElement,
|
||||||
|
interaction: TriggerInteractions,
|
||||||
|
overlayElement: HTMLElement
|
||||||
|
) {
|
||||||
|
this.owner = owner
|
||||||
|
this.overlayElement = overlayElement
|
||||||
|
this.interaction = interaction
|
||||||
|
}
|
||||||
|
|
||||||
|
public static async open(
|
||||||
|
owner: HTMLElement,
|
||||||
|
interaction: TriggerInteractions,
|
||||||
|
overlayElement: HTMLElement,
|
||||||
|
options: OverlayOptions
|
||||||
|
): Promise<() => void> {
|
||||||
|
const overlay = new Overlay(owner, interaction, overlayElement)
|
||||||
|
await overlay.open(options)
|
||||||
|
return (): void => {
|
||||||
|
overlay.close()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public static update(): void {
|
||||||
|
// 自定义事件
|
||||||
|
const overlayUpdateEvent = new CustomEvent('star-update-overlays', {
|
||||||
|
bubbles: true,
|
||||||
|
composed: true,
|
||||||
|
cancelable: true,
|
||||||
|
})
|
||||||
|
// 触发事件
|
||||||
|
document.dispatchEvent(overlayUpdateEvent)
|
||||||
|
}
|
||||||
|
|
||||||
|
public async open({
|
||||||
|
offset = 0,
|
||||||
|
placement = 'top',
|
||||||
|
root,
|
||||||
|
}: OverlayOptions): Promise<boolean> {
|
||||||
|
/* c8 ignore next */
|
||||||
|
if (this.isOpen) return true
|
||||||
|
|
||||||
|
await Overlay.overlayStack.openOverlay({
|
||||||
|
content: this.overlayElement,
|
||||||
|
offset: offset,
|
||||||
|
placement: placement,
|
||||||
|
trigger: this.owner,
|
||||||
|
interaction: this.interaction,
|
||||||
|
root,
|
||||||
|
})
|
||||||
|
this.isOpen = true
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 关闭overlay
|
||||||
|
public close(): void {
|
||||||
|
Overlay.overlayStack.closeOverlay(this.overlayElement)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -16,9 +16,9 @@ import './components/picker/picker'
|
||||||
import './components/overflowmenu/overflowmenu'
|
import './components/overflowmenu/overflowmenu'
|
||||||
import './components/slider/slider'
|
import './components/slider/slider'
|
||||||
import './components/prompt/prompt'
|
import './components/prompt/prompt'
|
||||||
import './components/prompt/prompt'
|
|
||||||
import './components/digicipher/digicipher'
|
import './components/digicipher/digicipher'
|
||||||
import './components/pattern-view/pattern-view'
|
import './components/pattern-view/pattern-view'
|
||||||
|
import './components/overlay/active-overlay'
|
||||||
|
|
||||||
@customElement('settings-app')
|
@customElement('settings-app')
|
||||||
export class SettingsApp extends LitElement {
|
export class SettingsApp extends LitElement {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,78 @@
|
||||||
|
import {html, LitElement, css} from 'lit'
|
||||||
|
import {customElement, property} from 'lit/decorators.js'
|
||||||
|
import '../../../components/button/button'
|
||||||
|
import '../../../components/overlay/active-overlay'
|
||||||
|
import {OverlayStack} from '../../../components/overlay/overlay-stack'
|
||||||
|
|
||||||
|
@customElement('panel-activeoverlay')
|
||||||
|
export class PanelActiveOverlay extends LitElement {
|
||||||
|
constructor() {
|
||||||
|
super()
|
||||||
|
}
|
||||||
|
|
||||||
|
public overlayStack = new OverlayStack()
|
||||||
|
|
||||||
|
public test(e: Event) {
|
||||||
|
if (this.overlayStack.isOpen == false) {
|
||||||
|
// 获取被点击节点
|
||||||
|
const targetNode = e.target as HTMLElement
|
||||||
|
// 获取被点击节点父节点
|
||||||
|
const originalNode = targetNode?.parentElement as HTMLElement
|
||||||
|
// 获取要显示在overlay中的内容
|
||||||
|
const content = targetNode?.nextElementSibling as HTMLElement
|
||||||
|
if(!content) return
|
||||||
|
// 调用overlayStack中的openOverlay方法创建节点
|
||||||
|
this.overlayStack.openOverlay(originalNode, targetNode, content)
|
||||||
|
} else {
|
||||||
|
this.overlayStack.closeOverlay()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return html`
|
||||||
|
<div>
|
||||||
|
<button id="open" @click="${this.test}">点击显示overlay层</button>
|
||||||
|
<button>这是要显示的内容</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="position: fixed; top: 50%; left: 50%;">
|
||||||
|
<button id="open" @click="${this.test}">点击显示overlay层</button>
|
||||||
|
<button>这是要显示的内容</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="position: fixed; top: 98%;">
|
||||||
|
<button id="open" @click="${this.test}">点击显示overlay层</button>
|
||||||
|
<button>这是要显示的内容</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="position: fixed; top: 50%; left: 90%;">
|
||||||
|
<button id="open" @click="${this.test}">点击显示overlay层</button>
|
||||||
|
<button>这是要显示的内容</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="position: fixed; top: 98%; left: 90%;">
|
||||||
|
<button id="open" @click="${this.test}">点击显示overlay层</button>
|
||||||
|
<button>这是要显示的内容</button>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
static styles = css`
|
||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
display: block;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
'panel-activeoverlay': PanelActiveOverlay
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -25,7 +25,8 @@ import './pattern-view/pattern-view'
|
||||||
import './container/homescreen-container'
|
import './container/homescreen-container'
|
||||||
import './toast/toast'
|
import './toast/toast'
|
||||||
import './picker/picker'
|
import './picker/picker'
|
||||||
import './prompt/prompt'
|
import './switch/switch'
|
||||||
|
import './activeoverlay/activeoverlay'
|
||||||
type SEID = string
|
type SEID = string
|
||||||
|
|
||||||
@customElement('panel-root')
|
@customElement('panel-root')
|
||||||
|
|
@ -186,6 +187,14 @@ export class PanelRoot extends LitElement {
|
||||||
href="#overflowmenu"
|
href="#overflowmenu"
|
||||||
></star-li>
|
></star-li>
|
||||||
<hr />
|
<hr />
|
||||||
|
<star-li
|
||||||
|
type=${LiType.ICON_LABEL}
|
||||||
|
label="overlay"
|
||||||
|
icon="menu"
|
||||||
|
iconcolor="yellow"
|
||||||
|
href="#activeoverlay"
|
||||||
|
></star-li>
|
||||||
|
<hr />
|
||||||
<star-li
|
<star-li
|
||||||
type=${LiType.ICON_LABEL}
|
type=${LiType.ICON_LABEL}
|
||||||
label="关于"
|
label="关于"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue