mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-02-23 13:31:06 +08:00
fix(tree): transition should be disabled when drop
This commit is contained in:
parent
9b4ca92d21
commit
6833c999a2
demo/components/treeDemo
packages
styles
@ -21,8 +21,6 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { setTimeout } from 'timers'
|
|
||||||
|
|
||||||
let key = 0
|
let key = 0
|
||||||
|
|
||||||
function genData (layer = 4, depth = 0, prefix = '') {
|
function genData (layer = 4, depth = 0, prefix = '') {
|
||||||
@ -44,20 +42,6 @@ export default {
|
|||||||
return {
|
return {
|
||||||
data: genData()
|
data: genData()
|
||||||
}
|
}
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleClick () {
|
|
||||||
this.$refs.tree.handleDragStart({
|
|
||||||
key: 0,
|
|
||||||
isLeaf: false
|
|
||||||
})
|
|
||||||
setTimeout(() => {
|
|
||||||
this.$refs.tree.handleDragEnter({
|
|
||||||
key: 85,
|
|
||||||
isLeaf: false
|
|
||||||
})
|
|
||||||
}, 100)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="n-doc-section">
|
<div class="n-doc-section">
|
||||||
<div class="n-doc-section__header">
|
<div class="n-doc-section__header">
|
||||||
Scaffold
|
Block Node
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="n-doc-section__view"
|
class="n-doc-section__view"
|
||||||
@ -11,13 +11,9 @@
|
|||||||
<n-tree
|
<n-tree
|
||||||
ref="tree"
|
ref="tree"
|
||||||
:data="data"
|
:data="data"
|
||||||
|
block-node
|
||||||
/> <!--EXAMPLE_END-->
|
/> <!--EXAMPLE_END-->
|
||||||
</div>
|
</div>
|
||||||
<div class="n-doc-section__inspect">
|
|
||||||
<n-button @click="handleClick">
|
|
||||||
dragEnter
|
|
||||||
</n-button>
|
|
||||||
</div>
|
|
||||||
<n-doc-source-block>
|
<n-doc-source-block>
|
||||||
<!--SOURCE-->
|
<!--SOURCE-->
|
||||||
</n-doc-source-block>
|
</n-doc-source-block>
|
||||||
@ -25,8 +21,6 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { setTimeout } from 'timers'
|
|
||||||
|
|
||||||
let key = 0
|
let key = 0
|
||||||
|
|
||||||
function genData (layer = 2, depth = 0, prefix = '') {
|
function genData (layer = 2, depth = 0, prefix = '') {
|
||||||
@ -48,20 +42,6 @@ export default {
|
|||||||
return {
|
return {
|
||||||
data: genData()
|
data: genData()
|
||||||
}
|
}
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleClick () {
|
|
||||||
this.$refs.tree.handleDragStart({
|
|
||||||
key: 0,
|
|
||||||
isLeaf: false
|
|
||||||
})
|
|
||||||
setTimeout(() => {
|
|
||||||
this.$refs.tree.handleDragEnter({
|
|
||||||
key: 85,
|
|
||||||
isLeaf: false
|
|
||||||
})
|
|
||||||
}, 100)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
@ -5,23 +5,23 @@
|
|||||||
>
|
>
|
||||||
<div class="n-doc-header">
|
<div class="n-doc-header">
|
||||||
<n-gradient-text :font-size="20">
|
<n-gradient-text :font-size="20">
|
||||||
scaffold
|
blockNode
|
||||||
</n-gradient-text>
|
</n-gradient-text>
|
||||||
</div>
|
</div>
|
||||||
<div class="n-doc-body">
|
<div class="n-doc-body">
|
||||||
<basic-usage />
|
<basic-usage />
|
||||||
<scaffold />
|
<block-node />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import basicUsage from './basicUsage.demo.vue'
|
import basicUsage from './basicUsage.demo.vue'
|
||||||
import scaffold from './scaffold.demo.vue'
|
import blockNode from './blockNode.demo.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
scaffold,
|
blockNode,
|
||||||
basicUsage
|
basicUsage
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
|
@ -1,4 +1,10 @@
|
|||||||
export default {
|
export default {
|
||||||
|
props: {
|
||||||
|
transitionDisabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleBeforeLeave () {
|
handleBeforeLeave () {
|
||||||
this.$el.style.maxHeight = this.$el.offsetHeight + 'px'
|
this.$el.style.maxHeight = this.$el.offsetHeight + 'px'
|
||||||
@ -6,6 +12,7 @@ export default {
|
|||||||
this.$el.getBoundingClientRect()
|
this.$el.getBoundingClientRect()
|
||||||
},
|
},
|
||||||
handleLeave () {
|
handleLeave () {
|
||||||
|
// debugger
|
||||||
this.$el.style.maxHeight = 0
|
this.$el.style.maxHeight = 0
|
||||||
this.$el.getBoundingClientRect()
|
this.$el.getBoundingClientRect()
|
||||||
},
|
},
|
||||||
@ -22,6 +29,15 @@ export default {
|
|||||||
this.$el.style.maxHeight = null
|
this.$el.style.maxHeight = null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
beforeDestroy () {
|
||||||
|
if (this.transitionDisabled) {
|
||||||
|
const parent = this.$el.parentElement
|
||||||
|
if (parent) parent.removeChild(this.$el)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
destroyed () {
|
||||||
|
console.log('destroyed')
|
||||||
|
},
|
||||||
render (h) {
|
render (h) {
|
||||||
return h('transition', {
|
return h('transition', {
|
||||||
props: {
|
props: {
|
||||||
|
@ -18,6 +18,7 @@
|
|||||||
@drop="handleContentDrop"
|
@drop="handleContentDrop"
|
||||||
@click="handleClick"
|
@click="handleClick"
|
||||||
>
|
>
|
||||||
|
<div class="n-tree-node-content__padding-box" />
|
||||||
<slot />
|
<slot />
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
|
@ -30,25 +30,27 @@ function genSingleNode (node, h, self) {
|
|||||||
blockNode: self.blockNode,
|
blockNode: self.blockNode,
|
||||||
checked: self.synthesizedCheckedKeys.includes(node.key)
|
checked: self.synthesizedCheckedKeys.includes(node.key)
|
||||||
}
|
}
|
||||||
if (node.isLeaf) {
|
return h(NTreeNode, {
|
||||||
return h(NTreeNode, {
|
props,
|
||||||
props,
|
on: listeners,
|
||||||
on: listeners,
|
key: node.key
|
||||||
key: node.key
|
},
|
||||||
})
|
[!node.isLeaf
|
||||||
} else if (node.children) {
|
? h(NTreeChildNodesExpandTransition, {
|
||||||
return h(NTreeNode, {
|
props: {
|
||||||
props,
|
transitionDisabled: self.transitionDisabled
|
||||||
on: listeners,
|
}
|
||||||
key: node.key
|
},
|
||||||
}, [h(NTreeChildNodesExpandTransition, {},
|
[
|
||||||
[ expanded
|
expanded
|
||||||
? h('ul', {
|
? h('ul', {
|
||||||
staticClass: 'n-tree-children-wrapper'
|
staticClass: 'n-tree-children-wrapper'
|
||||||
}, node.children.map(child => genSingleNode(child, h, self)))
|
}, node.children.map(child => genSingleNode(child, h, self)))
|
||||||
: null]
|
: null
|
||||||
)])
|
]
|
||||||
}
|
)
|
||||||
|
: null]
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function convertRootedOptionsToVNodeTree (root, h, self) {
|
function convertRootedOptionsToVNodeTree (root, h, self) {
|
||||||
@ -115,7 +117,8 @@ export default {
|
|||||||
draggingNodeKey: null,
|
draggingNodeKey: null,
|
||||||
draggingNode: null,
|
draggingNode: null,
|
||||||
dropNodeKey: null,
|
dropNodeKey: null,
|
||||||
expandTimerId: null
|
expandTimerId: null,
|
||||||
|
transitionDisabled: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
@ -165,6 +168,12 @@ export default {
|
|||||||
mounted () {
|
mounted () {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
disableTransition () {
|
||||||
|
this.transitionDisabled = true
|
||||||
|
},
|
||||||
|
enableTransition () {
|
||||||
|
this.transitionDisabled = false
|
||||||
|
},
|
||||||
handleCheck (node, checked) {
|
handleCheck (node, checked) {
|
||||||
if (!this.hasCheckedKeys) {
|
if (!this.hasCheckedKeys) {
|
||||||
if (checked) {
|
if (checked) {
|
||||||
@ -180,7 +189,13 @@ export default {
|
|||||||
handleDrop (node, dropType) {
|
handleDrop (node, dropType) {
|
||||||
const drop = [this.draggingNode, node, dropType]
|
const drop = [this.draggingNode, node, dropType]
|
||||||
if (dropIsValid(drop)) {
|
if (dropIsValid(drop)) {
|
||||||
applyDrop(drop)
|
this.disableTransition()
|
||||||
|
this.$nextTick().then(() => {
|
||||||
|
applyDrop(drop)
|
||||||
|
return this.$nextTick()
|
||||||
|
}).then(() => {
|
||||||
|
this.enableTransition()
|
||||||
|
})
|
||||||
}
|
}
|
||||||
this.draggingNodeKey = null
|
this.draggingNodeKey = null
|
||||||
this.draggingNode = null
|
this.draggingNode = null
|
||||||
@ -238,10 +253,8 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
render (h) {
|
render (h) {
|
||||||
console.log('render')
|
|
||||||
const lOptions = linkedCascaderOptions(this.treeData, 'multiple-all-options')
|
const lOptions = linkedCascaderOptions(this.treeData, 'multiple-all-options')
|
||||||
const mOptions = menuOptions(lOptions)[0]
|
const mOptions = menuOptions(lOptions)[0]
|
||||||
console.log(mOptions)
|
|
||||||
return h('div', {
|
return h('div', {
|
||||||
staticClass: 'n-tree'
|
staticClass: 'n-tree'
|
||||||
}, convertRootedOptionsToVNodeTree(mOptions, h, this))
|
}, convertRootedOptionsToVNodeTree(mOptions, h, this))
|
||||||
|
@ -139,32 +139,6 @@ function rootedOptions (options) {
|
|||||||
}])
|
}])
|
||||||
}
|
}
|
||||||
|
|
||||||
function patchedOptionsUsingProp (options, patches, prop = 'key') {
|
|
||||||
const patchesMap = new Map()
|
|
||||||
for (const [id, children] of patches) {
|
|
||||||
patchesMap.set(id, children)
|
|
||||||
}
|
|
||||||
function traverse (options) {
|
|
||||||
if (!Array.isArray(options)) return
|
|
||||||
for (let i = 0; i < options.length; ++i) {
|
|
||||||
const option = options[i]
|
|
||||||
const id = option[prop]
|
|
||||||
// console.log('iterate on option', id)
|
|
||||||
if (!hasChildren(option)) {
|
|
||||||
if (patches.has(id)) {
|
|
||||||
// console.log('patched on option', id)
|
|
||||||
option.children = patches.get(id)
|
|
||||||
option.loaded = true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
traverse(option.children)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
traverse(options)
|
|
||||||
// console.log('patchedOptions output', options)
|
|
||||||
return options
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @param {*} options
|
* @param {*} options
|
||||||
@ -229,7 +203,7 @@ function treedOptions (options) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function applyDrop ([sourceNode, targetNode, type]) {
|
function applyDrop ([sourceNode, targetNode, type]) {
|
||||||
if (type === 'append') {
|
if (type === 'append' || type === 'insertAfter') {
|
||||||
const parent = sourceNode.parent
|
const parent = sourceNode.parent
|
||||||
const index = parent.children.findIndex(child => child.key === sourceNode.key)
|
const index = parent.children.findIndex(child => child.key === sourceNode.key)
|
||||||
if (~index) {
|
if (~index) {
|
||||||
@ -242,13 +216,17 @@ function applyDrop ([sourceNode, targetNode, type]) {
|
|||||||
throw new Error('[n-tree]: switch error')
|
throw new Error('[n-tree]: switch error')
|
||||||
}
|
}
|
||||||
if (Array.isArray(targetNode.children)) {
|
if (Array.isArray(targetNode.children)) {
|
||||||
targetNode.children.push(sourceNode)
|
if (type === 'append') {
|
||||||
|
targetNode.children.push(sourceNode)
|
||||||
|
} else {
|
||||||
|
targetNode.children.unshift(sourceNode)
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
targetNode.isLeaf = false
|
targetNode.isLeaf = false
|
||||||
targetNode.children = [sourceNode]
|
targetNode.children = [sourceNode]
|
||||||
}
|
}
|
||||||
sourceNode.parent = targetNode
|
sourceNode.parent = targetNode
|
||||||
} else if (type === 'insertBefore' || type === 'insertAfter') {
|
} else if (type === 'insertBefore') {
|
||||||
let parent = sourceNode.parent
|
let parent = sourceNode.parent
|
||||||
const sourceIndex = parent.children.findIndex(child => child.key === sourceNode.key)
|
const sourceIndex = parent.children.findIndex(child => child.key === sourceNode.key)
|
||||||
if (~sourceIndex) {
|
if (~sourceIndex) {
|
||||||
@ -263,11 +241,7 @@ function applyDrop ([sourceNode, targetNode, type]) {
|
|||||||
parent = targetNode.parent
|
parent = targetNode.parent
|
||||||
const targetIndex = parent.children.findIndex(child => child.key === targetNode.key)
|
const targetIndex = parent.children.findIndex(child => child.key === targetNode.key)
|
||||||
if (~targetIndex) {
|
if (~targetIndex) {
|
||||||
if (type === 'insertBefore') {
|
parent.children.splice(targetIndex, 0, sourceNode)
|
||||||
parent.children.splice(targetIndex, 0, sourceNode)
|
|
||||||
} else {
|
|
||||||
parent.children.splice(targetIndex + 1, 0, sourceNode)
|
|
||||||
}
|
|
||||||
if (!parent.children.length) {
|
if (!parent.children.length) {
|
||||||
parent.children = null
|
parent.children = null
|
||||||
parent.isLeaf = true
|
parent.isLeaf = true
|
||||||
@ -473,7 +447,6 @@ export {
|
|||||||
firstOptionId,
|
firstOptionId,
|
||||||
rootedOptions,
|
rootedOptions,
|
||||||
patchedOptions,
|
patchedOptions,
|
||||||
patchedOptionsUsingProp,
|
|
||||||
dropIsValid,
|
dropIsValid,
|
||||||
applyDrop,
|
applyDrop,
|
||||||
treedOptions,
|
treedOptions,
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
@import './mixins/mixins.scss';
|
@import './mixins/mixins.scss';
|
||||||
@import './theme/default.scss';
|
@import './theme/default.scss';
|
||||||
|
|
||||||
|
// 0.55 * 0.7
|
||||||
$tree-content-hover-background-color: main-color-with-alpha(.45);
|
$tree-content-hover-background-color: main-color-with-alpha(.45);
|
||||||
$tree-content-active-background-color: main-color-with-alpha(.3);
|
$tree-content-active-background-color: main-color-with-alpha(.3);
|
||||||
$tree-content-selected-background-color: main-color-with-alpha(.3);
|
$tree-content-selected-background-color: main-color-with-alpha(.3);
|
||||||
@ -17,7 +18,10 @@ $tree-content-selected-background-color: main-color-with-alpha(.3);
|
|||||||
margin-left: 16px;
|
margin-left: 16px;
|
||||||
}
|
}
|
||||||
@include b(tree-node) {
|
@include b(tree-node) {
|
||||||
padding: 4px 0 4px 0;
|
padding: 3px 0 3px 0;
|
||||||
|
&:first-child {
|
||||||
|
padding-top: 6px;
|
||||||
|
}
|
||||||
&:last-child {
|
&:last-child {
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
@ -67,23 +71,33 @@ $tree-content-selected-background-color: main-color-with-alpha(.3);
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
transition: .2s background-color $default-cubic-bezier, .2s border-color $default-cubic-bezier;
|
transition: .2s background-color $default-cubic-bezier, .2s border-color $default-cubic-bezier;
|
||||||
// &:hover {
|
&:hover {
|
||||||
// background-color: $tree-content-hover-background-color;
|
background-color: $tree-content-hover-background-color;
|
||||||
// }
|
}
|
||||||
&:active {
|
&:active {
|
||||||
background-color: $tree-content-active-background-color;
|
background-color: $tree-content-active-background-color;
|
||||||
}
|
}
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
@include e(padding-box) {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
@include m(block) {
|
@include m(block) {
|
||||||
width: calc(100% - 24px);
|
width: calc(100% - 24px);
|
||||||
@include m(checkable) {
|
@include m(checkable) {
|
||||||
width: calc(100% - 48px);
|
width: calc(100% - 48px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@include m(selected) {
|
|
||||||
background-color: $tree-content-selected-background-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include m(pending) {
|
@include m(pending) {
|
||||||
|
&:hover {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
@include m(pending-bottom) {
|
@include m(pending-bottom) {
|
||||||
border-bottom: 3px solid $tree-content-hover-background-color;
|
border-bottom: 3px solid $tree-content-hover-background-color;
|
||||||
}
|
}
|
||||||
@ -94,5 +108,8 @@ $tree-content-selected-background-color: main-color-with-alpha(.3);
|
|||||||
background-color: $tree-content-hover-background-color;
|
background-color: $tree-content-hover-background-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@include m(selected) {
|
||||||
|
background-color: $tree-content-selected-background-color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user