From 587a15c55830af7cd7d89db8793cb7976af874a5 Mon Sep 17 00:00:00 2001 From: xiaojiujiu <3507440900@qq.com> Date: Thu, 2 Dec 2021 00:31:37 +0800 Subject: [PATCH 1/2] =?UTF-8?q?docs:=20=E5=A2=9E=E5=8A=A0tooltip=E8=8B=B1?= =?UTF-8?q?=E6=96=87=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../docs/en-US/components/tooltip/index.md | 82 +++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 packages/devui-vue/docs/en-US/components/tooltip/index.md diff --git a/packages/devui-vue/docs/en-US/components/tooltip/index.md b/packages/devui-vue/docs/en-US/components/tooltip/index.md new file mode 100644 index 00000000..495cfc22 --- /dev/null +++ b/packages/devui-vue/docs/en-US/components/tooltip/index.md @@ -0,0 +1,82 @@ +# Tooltip + +Text notification. + +### When To Use +When users move the cursor to a text, they can see what should do next. + +### Basic Usage + +:::demo + +```vue + + +``` + +::: + +### Delay Trigger + +This event is triggered only when the mouse pointer is moved in for more than [mouseEnterDelay] milliseconds. The default value is 150 ms to prevent flashing caused by unintentional strokes. The toolTip component is hidden only after [mouseLeaveDelay] milliseconds after the cursor is moved out. The default value is 100 milliseconds. + +:::demo + +```vue + +``` + +::: + +### API + +Tooltip parameter + +| Parameter | Type | Default | Description | Jump to Demo | Global Config | +| :-------------: | :----------------------------: | :--------------------------------: | :------------------------------------------------ | --------------------- | ---------- | +| content | `string\|DOMString` | -- | Required. Tooltip display content | [Basic Usage](#basic-usage) | | +| position | `PositionType\|PositionType[]` | ['top', 'right', 'bottom', 'left'] | Optional. Tooltip display position | [Basic Usage](#basic-usage) | | +| showAnimation | `boolean` | true | Optional. Whether to display the drawing animation | | ✔ | +| mouseEnterDelay | `number` | 150 | Optional. Delay for displaying Tooltip after the mouse is enter. The unit is ms | [Delay Trigger](#delay-trigger) | +| mouseLeaveDelay | `number` | 100 | Optional. Delay for hiding Tooltip after the mouse is leave, The unit is ms | [Delay Trigger](#delay-trigger) | -- Gitee From 89982ce1b8f42acd50c2a92556e374241ec6e1fc Mon Sep 17 00:00:00 2001 From: xiaojiujiu <3507440900@qq.com> Date: Sun, 12 Dec 2021 23:42:35 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fixed:=20v-d-draggable=E3=80=81droppable?= =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E7=94=A8=E6=B3=95=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/dragdrop/index.ts | 4 +- .../devui/dragdrop/src/draggable-directive.ts | 32 ++++++++++++-- .../devui/dragdrop/src/droppable-directive.ts | 42 +++++++++++++++--- .../devui-vue/devui/dragdrop/src/utils.ts | 44 +++++++++++++++++++ .../docs/components/dragdrop/index.md | 4 ++ 5 files changed, 115 insertions(+), 11 deletions(-) create mode 100644 packages/devui-vue/devui/dragdrop/src/utils.ts diff --git a/packages/devui-vue/devui/dragdrop/index.ts b/packages/devui-vue/devui/dragdrop/index.ts index b203021a..d1953c49 100644 --- a/packages/devui-vue/devui/dragdrop/index.ts +++ b/packages/devui-vue/devui/dragdrop/index.ts @@ -1,8 +1,9 @@ import type { App } from 'vue' import DraggableDirective from './src/draggable-directive' import DroppableDirective from './src/droppable-directive' +import SortableDirective from './src/sortable-directive' -export { DraggableDirective, DroppableDirective } +export { DraggableDirective, DroppableDirective, SortableDirective } export default { title: 'Dragdrop 拖拽', @@ -11,5 +12,6 @@ export default { install(app: App): void { app.directive('DDraggable', DraggableDirective) app.directive('DDroppable', DroppableDirective) + app.directive('DSortable', SortableDirective) } } diff --git a/packages/devui-vue/devui/dragdrop/src/draggable-directive.ts b/packages/devui-vue/devui/dragdrop/src/draggable-directive.ts index c53e3342..87ef9885 100644 --- a/packages/devui-vue/devui/dragdrop/src/draggable-directive.ts +++ b/packages/devui-vue/devui/dragdrop/src/draggable-directive.ts @@ -1,11 +1,35 @@ +import { changeDragState } from './utils' + export default { - mounted(el: HTMLElement): void { + /** + * + * @param el + * @description + * 1、绑定该指令的element将会具备拖拽能力 + * 2、为各元素进行初始化配置 + * 2.1、dragFlag: 是否处于拖拽中 + * 2.2、dragOverFlag： 是否处于可放置区域 + * + * 1、整体思路 + * 1.1、为每个绑定drag指令的元素维护状态 + * 1.1.1、状态集合：dragStart、drag、dragover、drop、shouldCreateShadow + * + * 1.2、进入drop区域后，确保drop区域能够获取正在进行drag的元素 + */ + mounted(el: HTMLElement, binding: unknown): void { el.setAttribute('draggable', 'true') el.style.cursor = 'grab' // dragstart/drag/dragend - el.addEventListener('dragstart', (event: DragEvent) => { - event.dataTransfer.setData('originId', el.id) - }) + el.addEventListener('drag', () => { + changeDragState(el, el.id, 'true', 'true', 'false', 'false', 'false') + }, false) + + // dragStart事件为每个绑定元素进行初始化 + el.addEventListener('dragstart', ()=>{ + // el or binding.instance or vnode.context + changeDragState(el, el.id, 'true', 'true', 'false', 'false', 'false') + binding.instance.$root.identity = el.id + }, false) }, } diff --git a/packages/devui-vue/devui/dragdrop/src/droppable-directive.ts b/packages/devui-vue/devui/dragdrop/src/droppable-directive.ts index d6061886..c966b160 100644 --- a/packages/devui-vue/devui/dragdrop/src/droppable-directive.ts +++ b/packages/devui-vue/devui/dragdrop/src/droppable-directive.ts @@ -1,15 +1,45 @@ +import { changeDragState } from './utils' + export default { - mounted(el: HTMLElement): void { + /** + * + * @param el + * @description + * dragOver: + * 1、生成与清除阴影的时机 + * 1.1、生成时机（只生成一次）： dragFlag === true && dragOverFlag === true + * drop: + * 1、完成放的操作 + * 1.1、清除相应的阴影 + */ + mounted(el: HTMLElement, binding:unknown): void { // dragenter/dragover/dragend/drop el.addEventListener('dragover', (event: DragEvent) => { event.preventDefault() - }) + const dragId = binding.instance.$root.identity + changeDragState(document.getElementById(dragId), dragId, 'true', 'false', 'true', 'false', 'false') + }, false) el.addEventListener('drop', (event: DragEvent) => { - const originId = event.dataTransfer.getData('originId') - const originNodeCopy = document.getElementById(originId).cloneNode(true) - const targetNode: any = event.target - targetNode.append(originNodeCopy) + event.preventDefault() + const dragId = binding.instance.$root.identity + // const originNodeCopy = document.getElementById(originId).cloneNode(true) + // 如何定义可放置区域这个问题得商榷一下 + const childrenArr = [...Array.from(el.children)[1].children] + if (childrenArr.length > 0){ + for (let index = 0; index < childrenArr.length; index++){ + const childrenYRange = childrenArr[index].getBoundingClientRect().top + childrenArr[index].offsetHeight / 2 + if (parseFloat(event.clientY) < parseFloat(childrenYRange)){ + el.children[1].insertBefore(document.getElementById(dragId), childrenArr[index]) + break + } + if (index === childrenArr.length-1){ + el.children[1].appendChild(document.getElementById(dragId)) + } + } + }else { // 如果没有子节点，直接插入即可 + el.childNodes[1].appendChild(document.getElementById(dragId)) + } }) }, } diff --git a/packages/devui-vue/devui/dragdrop/src/utils.ts b/packages/devui-vue/devui/dragdrop/src/utils.ts new file mode 100644 index 00000000..3255f914 --- /dev/null +++ b/packages/devui-vue/devui/dragdrop/src/utils.ts @@ -0,0 +1,44 @@ +/** + * + * @param id + * @descriprion + * 根据id获取非内联样式元素的样式 + */ +function getElementStyle (id: string, styleName: string):string { + return document.getElementById(id).currentStyle ? document.getElementById(id).currentStyle[styleName] : window.getComputedStyle( + document.getElementById(id), + styleName + ) +} + +/** + * + * @param originId + * @description + * 根据拖拽的id生成相应的阴影 + * 如何生成shadow？ + * 情况一： dragable -> drop without sortable + * 情况二： anything -> drop without anything + */ +function createShadow (originId:string):HTMLElement { + const shadow = document.createElement('div') + shadow.id = 'shadow0611' + shadow.style.background = 'rgb(206, 215, 255)' + shadow.style.width = getElementStyle(originId, 'width') + shadow.style.height = '20px' + return shadow +} + +function changeDragState (el:string, originId:string, dragStart:string, drag:string, dragover:string, drop:string, shouldCreateShadow:string): void{ + el.dataset.originId = originId + el.dataset.dragStart = dragStart + el.dataset.dragover = dragover + el.dataset.drop = drop + el.dataset.shouldCreateShadow = shouldCreateShadow +} + + +export { + createShadow, + changeDragState +} \ No newline at end of file diff --git a/packages/devui-vue/docs/components/dragdrop/index.md b/packages/devui-vue/docs/components/dragdrop/index.md index f37a25bf..ccff9282 100644 --- a/packages/devui-vue/docs/components/dragdrop/index.md +++ b/packages/devui-vue/docs/components/dragdrop/index.md @@ -20,6 +20,10 @@ dragScope: 'default-css', dragData: { item: 'item', parent: 'list1' }, }">VSCode +
Sublime
-- Gitee