zhouhaibin
1 week ago
|
After Width: | Height: | Size: 209 B |
|
After Width: | Height: | Size: 127 B |
|
After Width: | Height: | Size: 127 B |
|
After Width: | Height: | Size: 568 B |
|
After Width: | Height: | Size: 411 B |
|
After Width: | Height: | Size: 337 B |
|
After Width: | Height: | Size: 207 B |
|
After Width: | Height: | Size: 428 B |
|
After Width: | Height: | Size: 276 B |
|
After Width: | Height: | Size: 326 B |
|
After Width: | Height: | Size: 221 B |
|
After Width: | Height: | Size: 399 B |
|
After Width: | Height: | Size: 276 B |
|
After Width: | Height: | Size: 191 B |
|
After Width: | Height: | Size: 394 B |
|
After Width: | Height: | Size: 725 B |
|
After Width: | Height: | Size: 349 B |
|
After Width: | Height: | Size: 613 B |
|
After Width: | Height: | Size: 167 B |
|
After Width: | Height: | Size: 385 B |
|
After Width: | Height: | Size: 393 B |
|
After Width: | Height: | Size: 195 B |
|
After Width: | Height: | Size: 390 B |
|
After Width: | Height: | Size: 294 B |
|
After Width: | Height: | Size: 282 B |
|
After Width: | Height: | Size: 389 B |
|
After Width: | Height: | Size: 885 B |
|
After Width: | Height: | Size: 109 B |
|
After Width: | Height: | Size: 116 B |
|
After Width: | Height: | Size: 336 B |
|
After Width: | Height: | Size: 398 B |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 635 B |
|
After Width: | Height: | Size: 413 B |
|
After Width: | Height: | Size: 165 B |
|
After Width: | Height: | Size: 148 B |
|
After Width: | Height: | Size: 532 B |
|
After Width: | Height: | Size: 599 B |
|
After Width: | Height: | Size: 321 B |
|
After Width: | Height: | Size: 453 B |
|
After Width: | Height: | Size: 369 B |
|
After Width: | Height: | Size: 240 B |
|
After Width: | Height: | Size: 190 B |
|
After Width: | Height: | Size: 217 B |
|
After Width: | Height: | Size: 207 B |
|
After Width: | Height: | Size: 216 B |
|
After Width: | Height: | Size: 367 B |
|
After Width: | Height: | Size: 334 B |
|
After Width: | Height: | Size: 168 B |
|
After Width: | Height: | Size: 370 B |
|
After Width: | Height: | Size: 319 B |
|
After Width: | Height: | Size: 299 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 637 B |
|
After Width: | Height: | Size: 627 B |
|
After Width: | Height: | Size: 345 B |
|
After Width: | Height: | Size: 336 B |
|
After Width: | Height: | Size: 242 B |
|
After Width: | Height: | Size: 170 B |
|
After Width: | Height: | Size: 188 B |
|
After Width: | Height: | Size: 602 B |
|
After Width: | Height: | Size: 281 B |
|
After Width: | Height: | Size: 104 KiB |
|
After Width: | Height: | Size: 106 KiB |
|
After Width: | Height: | Size: 162 KiB |
|
After Width: | Height: | Size: 158 KiB |
|
After Width: | Height: | Size: 162 KiB |
|
After Width: | Height: | Size: 177 KiB |
|
After Width: | Height: | Size: 166 KiB |
|
After Width: | Height: | Size: 164 KiB |
|
After Width: | Height: | Size: 170 KiB |
|
After Width: | Height: | Size: 174 KiB |
|
After Width: | Height: | Size: 178 KiB |
|
After Width: | Height: | Size: 237 KiB |
|
After Width: | Height: | Size: 236 KiB |
|
After Width: | Height: | Size: 235 KiB |
|
After Width: | Height: | Size: 237 KiB |
|
After Width: | Height: | Size: 239 KiB |
|
After Width: | Height: | Size: 242 KiB |
|
After Width: | Height: | Size: 246 KiB |
|
After Width: | Height: | Size: 248 KiB |
|
After Width: | Height: | Size: 248 KiB |
|
After Width: | Height: | Size: 197 KiB |
|
After Width: | Height: | Size: 245 KiB |
|
After Width: | Height: | Size: 246 KiB |
|
After Width: | Height: | Size: 334 KiB |
|
After Width: | Height: | Size: 340 KiB |
|
After Width: | Height: | Size: 327 KiB |
|
After Width: | Height: | Size: 250 KiB |
|
After Width: | Height: | Size: 815 KiB |
|
After Width: | Height: | Size: 331 KiB |
|
After Width: | Height: | Size: 330 KiB |
|
After Width: | Height: | Size: 252 KiB |
|
After Width: | Height: | Size: 253 KiB |
|
After Width: | Height: | Size: 248 KiB |
|
After Width: | Height: | Size: 253 KiB |
@ -0,0 +1,171 @@ |
|||||
|
import { EditorComponent, EDITOR_COMPONENT } from '../../editor' |
||||
|
import './dialog.css' |
||||
|
|
||||
|
export interface IDialogData { |
||||
|
type: string |
||||
|
label?: string |
||||
|
name: string |
||||
|
value?: string |
||||
|
options?: { label: string; value: string }[] |
||||
|
placeholder?: string |
||||
|
width?: number |
||||
|
height?: number |
||||
|
required?: boolean |
||||
|
} |
||||
|
|
||||
|
export interface IDialogConfirm { |
||||
|
name: string |
||||
|
value: string |
||||
|
} |
||||
|
|
||||
|
export interface IDialogOptions { |
||||
|
onClose?: () => void |
||||
|
onCancel?: () => void |
||||
|
onConfirm?: (payload: IDialogConfirm[]) => void |
||||
|
title: string |
||||
|
data: IDialogData[] |
||||
|
} |
||||
|
|
||||
|
export class Dialog { |
||||
|
private options: IDialogOptions |
||||
|
private mask: HTMLDivElement | null |
||||
|
private container: HTMLDivElement | null |
||||
|
private inputList: ( |
||||
|
| HTMLInputElement |
||||
|
| HTMLTextAreaElement |
||||
|
| HTMLSelectElement |
||||
|
)[] |
||||
|
|
||||
|
constructor(options: IDialogOptions) { |
||||
|
this.options = options |
||||
|
this.mask = null |
||||
|
this.container = null |
||||
|
this.inputList = [] |
||||
|
this._render() |
||||
|
} |
||||
|
|
||||
|
private _render() { |
||||
|
const { title, data, onClose, onCancel, onConfirm } = this.options |
||||
|
// 渲染遮罩层
|
||||
|
const mask = document.createElement('div') |
||||
|
mask.classList.add('dialog-mask') |
||||
|
mask.setAttribute(EDITOR_COMPONENT, EditorComponent.COMPONENT) |
||||
|
document.body.append(mask) |
||||
|
// 渲染容器
|
||||
|
const container = document.createElement('div') |
||||
|
container.classList.add('dialog-container') |
||||
|
container.setAttribute(EDITOR_COMPONENT, EditorComponent.COMPONENT) |
||||
|
// 弹窗
|
||||
|
const dialogContainer = document.createElement('div') |
||||
|
dialogContainer.classList.add('dialog') |
||||
|
container.append(dialogContainer) |
||||
|
// 标题容器
|
||||
|
const titleContainer = document.createElement('div') |
||||
|
titleContainer.classList.add('dialog-title') |
||||
|
// 标题&关闭按钮
|
||||
|
const titleSpan = document.createElement('span') |
||||
|
titleSpan.append(document.createTextNode(title)) |
||||
|
const titleClose = document.createElement('i') |
||||
|
titleClose.onclick = () => { |
||||
|
if (onClose) { |
||||
|
onClose() |
||||
|
} |
||||
|
this._dispose() |
||||
|
} |
||||
|
titleContainer.append(titleSpan) |
||||
|
titleContainer.append(titleClose) |
||||
|
dialogContainer.append(titleContainer) |
||||
|
// 选项容器
|
||||
|
const optionContainer = document.createElement('div') |
||||
|
optionContainer.classList.add('dialog-option') |
||||
|
// 选项
|
||||
|
for (let i = 0; i < data.length; i++) { |
||||
|
const option = data[i] |
||||
|
const optionItemContainer = document.createElement('div') |
||||
|
optionItemContainer.classList.add('dialog-option__item') |
||||
|
// 选项名称
|
||||
|
if (option.label) { |
||||
|
const optionName = document.createElement('span') |
||||
|
optionName.append(document.createTextNode(option.label)) |
||||
|
optionItemContainer.append(optionName) |
||||
|
if (option.required) { |
||||
|
optionName.classList.add('dialog-option__item--require') |
||||
|
} |
||||
|
} |
||||
|
// 选项输入框
|
||||
|
let optionInput: |
||||
|
| HTMLInputElement |
||||
|
| HTMLTextAreaElement |
||||
|
| HTMLSelectElement |
||||
|
if (option.type === 'select') { |
||||
|
optionInput = document.createElement('select') |
||||
|
option.options?.forEach(item => { |
||||
|
const optionItem = document.createElement('option') |
||||
|
optionItem.value = item.value |
||||
|
optionItem.label = item.label |
||||
|
optionInput.append(optionItem) |
||||
|
}) |
||||
|
} else if (option.type === 'textarea') { |
||||
|
optionInput = document.createElement('textarea') |
||||
|
} else { |
||||
|
optionInput = document.createElement('input') |
||||
|
optionInput.type = option.type |
||||
|
} |
||||
|
if (option.width) { |
||||
|
optionInput.style.width = `${option.width}px` |
||||
|
} |
||||
|
if (option.height) { |
||||
|
optionInput.style.height = `${option.height}px` |
||||
|
} |
||||
|
optionInput.name = option.name |
||||
|
optionInput.value = option.value || '' |
||||
|
if (!(optionInput instanceof HTMLSelectElement)) { |
||||
|
optionInput.placeholder = option.placeholder || '' |
||||
|
} |
||||
|
optionItemContainer.append(optionInput) |
||||
|
optionContainer.append(optionItemContainer) |
||||
|
this.inputList.push(optionInput) |
||||
|
} |
||||
|
dialogContainer.append(optionContainer) |
||||
|
// 按钮容器
|
||||
|
const menuContainer = document.createElement('div') |
||||
|
menuContainer.classList.add('dialog-menu') |
||||
|
// 取消按钮
|
||||
|
const cancelBtn = document.createElement('button') |
||||
|
cancelBtn.classList.add('dialog-menu__cancel') |
||||
|
cancelBtn.append(document.createTextNode('取消')) |
||||
|
cancelBtn.type = 'button' |
||||
|
cancelBtn.onclick = () => { |
||||
|
if (onCancel) { |
||||
|
onCancel() |
||||
|
} |
||||
|
this._dispose() |
||||
|
} |
||||
|
menuContainer.append(cancelBtn) |
||||
|
// 确认按钮
|
||||
|
const confirmBtn = document.createElement('button') |
||||
|
confirmBtn.append(document.createTextNode('确定')) |
||||
|
confirmBtn.type = 'submit' |
||||
|
confirmBtn.onclick = () => { |
||||
|
if (onConfirm) { |
||||
|
const payload = this.inputList.map<IDialogConfirm>(input => ({ |
||||
|
name: input.name, |
||||
|
value: input.value |
||||
|
})) |
||||
|
onConfirm(payload) |
||||
|
} |
||||
|
this._dispose() |
||||
|
} |
||||
|
menuContainer.append(confirmBtn) |
||||
|
dialogContainer.append(menuContainer) |
||||
|
// 渲染
|
||||
|
document.body.append(container) |
||||
|
this.container = container |
||||
|
this.mask = mask |
||||
|
} |
||||
|
|
||||
|
private _dispose() { |
||||
|
this.mask?.remove() |
||||
|
this.container?.remove() |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,131 @@ |
|||||
|
.dialog-mask { |
||||
|
position: fixed; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
opacity: .5; |
||||
|
background: #000000; |
||||
|
z-index: 99; |
||||
|
} |
||||
|
|
||||
|
.dialog-container { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
overflow: auto; |
||||
|
z-index: 999; |
||||
|
margin: 0; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.dialog { |
||||
|
position: absolute; |
||||
|
padding: 0 30px 30px; |
||||
|
background: #ffffff; |
||||
|
box-shadow: 0 2px 12px 0 rgb(56 56 56 / 20%); |
||||
|
border: 1px solid #e2e6ed; |
||||
|
border-radius: 2px; |
||||
|
} |
||||
|
|
||||
|
.dialog-title { |
||||
|
position: relative; |
||||
|
border-bottom: 1px solid #e2e6ed; |
||||
|
margin-bottom: 30px; |
||||
|
height: 60px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.dialog-title i { |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
cursor: pointer; |
||||
|
display: inline-block; |
||||
|
background: url(../../assets/images/close.svg); |
||||
|
} |
||||
|
|
||||
|
.dialog-option__item { |
||||
|
margin-bottom: 18px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.dialog-option__item span { |
||||
|
margin-right: 12px; |
||||
|
font-size: 14px; |
||||
|
color: #3d4757; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.dialog-option__item input, |
||||
|
.dialog-option__item textarea, |
||||
|
.dialog-option__item select { |
||||
|
width: 276px; |
||||
|
height: 30px; |
||||
|
border-radius: 2px; |
||||
|
border: 1px solid #d3d3d3; |
||||
|
min-height: 30px; |
||||
|
padding: 5px; |
||||
|
box-sizing: border-box; |
||||
|
outline: none; |
||||
|
appearance: none; |
||||
|
user-select: none; |
||||
|
font-family: inherit; |
||||
|
} |
||||
|
|
||||
|
.dialog-option__item input:focus, |
||||
|
.dialog-option__item textarea:focus { |
||||
|
border-color: #4991f2; |
||||
|
} |
||||
|
|
||||
|
.dialog-option__item--require::before { |
||||
|
content: "*"; |
||||
|
color: #f56c6c; |
||||
|
margin-right: 4px; |
||||
|
position: absolute; |
||||
|
left: -8px; |
||||
|
} |
||||
|
|
||||
|
.dialog-menu { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: flex-end; |
||||
|
} |
||||
|
|
||||
|
.dialog-menu button { |
||||
|
position: relative; |
||||
|
display: inline-block; |
||||
|
border: 1px solid #e2e6ed; |
||||
|
border-radius: 2px; |
||||
|
background: #ffffff; |
||||
|
line-height: 22px; |
||||
|
padding: 0 16px; |
||||
|
white-space: nowrap; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.dialog-menu button:hover { |
||||
|
background: rgba(25, 55, 88, .04); |
||||
|
} |
||||
|
|
||||
|
.dialog-menu__cancel { |
||||
|
margin-right: 16px; |
||||
|
} |
||||
|
|
||||
|
.dialog-menu button[type='submit'] { |
||||
|
color: #ffffff; |
||||
|
background: #4991f2; |
||||
|
border-color: #4991f2; |
||||
|
} |
||||
|
|
||||
|
.dialog-menu button[type='submit']:hover { |
||||
|
background: #5b9cf3; |
||||
|
border-color: #5b9cf3; |
||||
|
} |
||||