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
+
+
+
+ left
+
+
+ top
+
+
+ bottom
+
+
+ right
+
+
+ No Animation
+
+
+
+
+```
+
+:::
+
+### 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
+
+
+ MouseEnter delay 500ms
+
+
+
+ MouseEnter delay 1000ms
+
+
+```
+
+:::
+
+### 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