11<template >
22 <div id =" app"
3- <Tree :tree-data =" demeData"
3+ <Tree
4+ :tree-data =" demeData"
45 expandedAll
56 show-checkbox
67 hasHalfelEction
@@ -35,6 +36,7 @@ export default {
3536 },
3637 data () {
3738 return {
39+ visible: true ,
3840 baseData: [],
3941 demeData: [
4042 {
@@ -48,7 +50,7 @@ export default {
4850 {
4951 name: " 三级 1-1-1"
5052 id: " 3"
51- selected : true ,
53+ checked : true ,
5254 children: [
5355 {
5456 name: " 四级 1-1-1-1"
@@ -128,10 +130,25 @@ export default {
128130]
129131 }
130132 },
133+ watch: {
134+ visible: {
135+ handler : function (val ) {
136+ if (! val) {
137+ this .genBaseData ()
138+ } else {
139+ this .genBaseData ()
140+ }
141+ }
142+ }
143+ },
131144 created () {
132145 this .genBaseData ()
146+ console .log (this .baseData )
133147 },
134148 methods: {
149+ toggleVisible () {
150+ this .visible = ! this .visible
151+ },
135152 genBaseData () {
136153 const start = Math .round (Math .random ())
137154 const end = start + Math .round (Math .random () * 4 )
@@ -173,16 +190,88 @@ export default {
173190</style >
174191<style lang="less">
175192@transition-time : .2s ;
193+ @primary-color : #409eff ;
194+ @background-color-base : #F1F3F5 ;
195+ @normal-color : #1F2E4D ;
196+ @unimportance-color : #b7beca ;
197+ @border-radius-small : 3px ;
198+
199+ .frame {
200+ // position: absolute;
201+ height : 300px ;
202+ background : #eee ;
203+
204+ }
176205
177206.icon {
178207 display : inline-block ;
179208 padding : 2px ;
180209 font-size : 12px ;
181- background : #eee ;
210+ // background: #eee;
182211 cursor : pointer ;
183212 margin-right : 4px ;
184213}
185214
215+ .motion-common () {
216+ animation-duration : .3s ;
217+ animation-fill-mode : both ;
218+ }
219+
220+ .move-motion (@className , @keyframeName ) {
221+ .make-motion (@className , @keyframeName );
222+ .@{className} -enter-active {
223+ animation-timing-function : ease-in-out ;
224+ }
225+ .@{className} -leave-active {
226+ animation-timing-function : ease-in-out ;
227+ }
228+ }
229+
230+ .make-motion (@className , @keyframeName ) {
231+ .@{className} -enter-active {
232+ .motion-common ();
233+ animation-play-state : paused ;
234+ }
235+ .@{className} -leave-active {
236+ .motion-common ();
237+ animation-play-state : paused ;
238+ }
239+ .@{className} -enter-active {
240+ animation-name : ~ " @{keyframeName} In"
241+ animation-play-state : running ;
242+ }
243+ .@{className} -leave-active {
244+ animation-name : ~ " @{keyframeName} Out"
245+ animation-play-state : running ;
246+ }
247+ }
248+
249+ .move-motion (transition- drop, shTransitionDrop);
250+
251+ @keyframes shTransitionDropIn {
252+ 0% {
253+ opacity : 0 ;
254+ transform : scaleY (0.8 );
255+ }
256+ 100% {
257+ opacity : 1 ;
258+ transform : scaleY (1 );
259+ }
260+ }
261+
262+ @keyframes shTransitionDropOut {
263+ 0% {
264+ opacity : 1 ;
265+ transform : scaleY (1 );
266+ }
267+ 100% {
268+ opacity : 0 ;
269+ transform : scaleY (0.8 );
270+ }
271+ }
272+
273+
274+
186275.rotate-motion (@className , @deg ) {
187276 .transform {
188277 transform-origin : center ;
@@ -222,4 +311,69 @@ export default {
222311 color : #fff ;
223312 }
224313}
314+
315+ .vue-tree {
316+ user-select : none ;
317+ position : relative ;
318+ .drop-indicator {
319+ position : absolute ;
320+ left : 0 ;
321+ right : 0 ;
322+ height : 1px ;
323+ background-color : @primary-color ;
324+ }
325+ .child-node {
326+ padding-left : 22px ;
327+ line-height : 28px ;
328+ cursor : pointer ;
329+ .node-content {
330+ width : 100% ;
331+ position : relative ;
332+ display : inline-block ;
333+ padding-left : 22px ;
334+ .icon {
335+ position : absolute ;
336+ display : inline-block ;
337+ left : 0px ;
338+ &-expand {
339+ color : @normal-color ;
340+ }
341+ &-unexpand {
342+ color : @unimportance-color ;
343+ }
344+ }
345+ .inner-wrap {
346+ padding-left : 2px ;
347+ display : flex ;
348+ align-items : center ;
349+ border-radius : @border-radius-small ;
350+ border : 1px solid transparent ;
351+ }
352+ .drop-wrap {
353+ border-color : @primary-color ;
354+ }
355+ .drop-inner {
356+ border-bottom : 1px solid @primary-color ;
357+ }
358+ }
359+ .active-li {
360+ .inner-wrap {
361+ background : @background-color-base ;
362+ }
363+ }
364+ .inset {
365+ cursor : move ;
366+ }
367+ .disabled {
368+ cursor : no-drop ;
369+ }
370+ }
371+ .add-node {
372+ cursor : pointer ;
373+ }
374+ .is-drop-inner > .node-content > .inner-wrap > .node-name {
375+ background-color : @primary-color ;
376+ color : #fff ;
377+ }
378+ }
225379</style >
0 commit comments