diff --git a/src/components/dialog/Dialog.ts b/src/components/dialog/Dialog.ts index 6b27572..e2093b8 100644 --- a/src/components/dialog/Dialog.ts +++ b/src/components/dialog/Dialog.ts @@ -6,6 +6,7 @@ export interface IDialogData { label?: string; name: string; value?: string; + options?: { label: string; value: string; }[]; placeholder?: string; width?: number; height?: number; @@ -29,7 +30,7 @@ export class Dialog { private options: IDialogOptions private mask: HTMLDivElement | null private container: HTMLDivElement | null - private inputList: (HTMLInputElement | HTMLTextAreaElement)[] + private inputList: (HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement)[] constructor(options: IDialogOptions) { this.options = options @@ -85,8 +86,16 @@ export class Dialog { optionItemContainer.append(optionName) } // 选项输入框 - let optionInput: HTMLInputElement | HTMLTextAreaElement - if (option.type === 'textarea') { + 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') @@ -100,7 +109,9 @@ export class Dialog { } optionInput.name = option.name optionInput.value = option.value || '' - optionInput.placeholder = option.placeholder || '' + if (!(optionInput instanceof HTMLSelectElement)) { + optionInput.placeholder = option.placeholder || '' + } optionItemContainer.append(optionInput) optionContainer.append(optionItemContainer) this.inputList.push(optionInput) diff --git a/src/components/dialog/dialog.css b/src/components/dialog/dialog.css index 8fef1fe..5f63203 100644 --- a/src/components/dialog/dialog.css +++ b/src/components/dialog/dialog.css @@ -64,7 +64,8 @@ } .dialog-option__item input, -.dialog-option__item textarea { +.dialog-option__item textarea, +.dialog-option__item select { width: 276px; height: 30px; border-radius: 2px; diff --git a/src/editor/index.ts b/src/editor/index.ts index 49079ef..cd84525 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -27,6 +27,7 @@ import { INavigateInfo } from './core/draw/interactive/Search' import { Shortcut } from './core/shortcut/Shortcut' import { KeyMap } from './dataset/enum/KeyMap' import { BlockType } from './dataset/enum/Block' +import { IBlock } from './interface/Block' export default class Editor { @@ -138,5 +139,6 @@ export type { IContextMenuContext, IRegisterContextMenu, IWatermark, - INavigateInfo + INavigateInfo, + IBlock } \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index 8ef14cb..f151db3 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,7 +1,7 @@ import { data, options } from './mock' import './style.css' import prism from 'prismjs' -import Editor, { BlockType, Command, ControlType, EditorMode, ElementType, IElement, KeyMap, PageMode } from './editor' +import Editor, { BlockType, Command, ControlType, EditorMode, ElementType, IBlock, IElement, KeyMap, PageMode } from './editor' import { Dialog } from './components/dialog/Dialog' import { formatPrismToken } from './utils/prism' import { Signature } from './components/signature/Signature' @@ -618,6 +618,18 @@ window.onload = function () { new Dialog({ title: '内容块', data: [{ + type: 'select', + label: '类型', + name: 'type', + value: 'iframe', + options: [{ + label: '网址', + value: 'iframe' + }, { + label: '视频', + value: 'video' + }] + }, { type: 'number', label: '宽度', name: 'width', @@ -635,23 +647,32 @@ window.onload = function () { placeholder: '请输入地址' }], onConfirm: (payload) => { + const type = payload.find(p => p.name === 'type')?.value + if (!type) return const value = payload.find(p => p.name === 'value')?.value if (!value) return const width = payload.find(p => p.name === 'width')?.value if (!width) return const height = payload.find(p => p.name === 'height')?.value if (!height) return + const block: IBlock = { + type: type + } + if (block.type === BlockType.IFRAME) { + block.iframeBlock = { + src: value + } + } else if (block.type === BlockType.VIDEO) { + block.videoBlock = { + src: value + } + } instance.command.executeInsertElementList([{ type: ElementType.BLOCK, value: '', width: Number(width), height: Number(height), - block: { - type: BlockType.IFRAME, - iframeBlock: { - src: value - } - } + block }]) } })