vikingowl/vue3-tree-list
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor style

Browse Source
This commit is contained in:
youxingzhi
2018-11-28 11:28:04 +08:00
parent 162c911f3b
commit c3019872c5
3 changed files with 77 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
dev/App.vue
View File

@@ -36,7 +36,7 @@
name: 'Node 2',
id: 3,
pid: 0,
dragDisabled: true
disabled: true
},
{
name: 'Node 3',
@@ -82,3 +82,16 @@
}
}
</script>
<style lang="less" rel="stylesheet/less">
.vtl {
.vtl-drag-disabled {
background-color: #d0cfcf;
&:hover {
background-color: #d0cfcf;
}
}
.vtl-disabled {
background-color: #d0cfcf;
}
}
</style>

49
src/Tree.js
View File

@@ -1,6 +1,3 @@
// used to record treenode's change
// let Record = {}
// treenode's id
let nodeId = 1
/**
@@ -11,6 +8,7 @@ let nodeId = 1
* isLeaf: treenode is leaf node or not
* id: id
* dragDisabled: decide if it can be dragged
* disabled: desabled all operation
*/
const TreeNode = function (data) {
const { id, isLeaf } = data
@@ -29,22 +27,8 @@ const TreeNode = function (data) {
}
}
// TreeNode.prototype.updateRecordProperty = function () {
// if (!Record[this.id]) {
// Record[this.id] = {}
// }
//
// Record[this.id].name = this.name
// Record[this.id].id = this.id
// Record[this.id].pid = this.pid
// Record[this.id].isLeaf = this.isLeaf
// }
TreeNode.prototype.changeName = function (name) {
this.name = name
// this.updateRecordProperty()
// Record[this.id].modify = true
}
TreeNode.prototype.addChildren = function (children, isNew) {
@@ -57,11 +41,6 @@ TreeNode.prototype.addChildren = function (children, isNew) {
const child = children[i]
child.parent = this
child.pid = this.id
// if (isNew) {
// child.updateRecordProperty()
// Record[child.id].add = true
// }
}
this.children.concat(children)
} else {
@@ -69,11 +48,6 @@ TreeNode.prototype.addChildren = function (children, isNew) {
child.parent = this
child.pid = this.id
this.children.push(child)
// if (isNew) {
// child.updateRecordProperty()
// Record[child.id].add = true
// }
}
}
@@ -82,9 +56,6 @@ TreeNode.prototype.remove = function () {
const parent = this.parent
const index = parent.findChildIndex(this)
parent.children.splice(index, 1)
// this.updateRecordProperty()
// Record[this.id].remove = true
}
// remove child
@@ -130,11 +101,6 @@ TreeNode.prototype.moveInto = function (target) {
target.children = []
}
target.children.unshift(this)
// this.updateRecordProperty()
// Record[this.id].targetId = target.id
// Record[this.id].move = true
// Record[this.id].moveType = 'inside'
}
TreeNode.prototype.findChildIndex = function (child) {
@@ -169,11 +135,6 @@ TreeNode.prototype.insertBefore = function (target) {
const pos = target.parent.findChildIndex(target)
target.parent.children.splice(pos, 0, this)
// this.updateRecordProperty()
// Record[this.id].targetId = target.id
// Record[this.id].move = true
// Record[this.id].moveType = 'before'
}
TreeNode.prototype.insertAfter = function (target) {
@@ -181,14 +142,9 @@ TreeNode.prototype.insertAfter = function (target) {
const pos = target.parent.findChildIndex(target)
target.parent.children.splice(pos + 1, 0, this)
// this.updateRecordProperty()
// Record[this.id].targetId = target.id
// Record[this.id].move = true
// Record[this.id].moveType = 'after'
}
function Tree(data) {
function Tree (data) {
this.root = new TreeNode({ name: 'root', isLeaf: false, id: 0 })
this.initNode(this.root, data)
return this.root
@@ -208,4 +164,3 @@ Tree.prototype.initNode = function (node, data) {
exports.Tree = Tree
exports.TreeNode = TreeNode
// exports.Record = Record

104
src/VueTreeList.vue
View File

@@ -1,12 +1,12 @@
<template>
<div>
<div class='vtl'>
<div v-if="model.name !== 'root'">
<div class="border up" :class="{'active': isDragEnterUp}"
<div class="vtl-border vtl-up" :class="{'vtl-active': isDragEnterUp}"
@drop="dropUp"
@dragenter="dragEnterUp"
@dragover='dragOverUp'
@dragleave="dragLeaveUp"></div>
<div class='tree-node' :id='model.id' :class="{'active': isDragEnterNode}"
<div :id='model.id' :class="treeNodeClass"
:draggable="!model.dragDisabled"
@dragstart='dragStart'
@dragover='dragOver'
@@ -17,59 +17,59 @@
@mouseover='mouseOver'
@mouseout='mouseOut'
@click.stop='click'>
<span class="caret icon is-small" v-if="model.children && model.children.length > 0">
<i class="vue-tree-icon" :class="caretClass" @click.prevent.stop="toggle"></i>
<span class="vtl-caret vtl-is-small" v-if="model.children && model.children.length > 0">
<i class="vtl-icon" :class="caretClass" @click.prevent.stop="toggle"></i>
</span>
<span v-if="model.isLeaf">
<slot name="leafNodeIcon">
<i class="vue-tree-icon item-icon icon-file"></i>
<i class="vtl-icon vtl-menu-icon vtl-icon-file"></i>
</slot>
</span>
<span v-else>
<slot name="treeNodeIcon">
<i class="vue-tree-icon item-icon icon-folder"></i>
<i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i>
</slot>
</span>
<div class="node-content" v-if="!editable">
<div class="vtl-node-content" v-if="!editable">
{{model.name}}
</div>
<input v-else class="vue-tree-input" type="text" ref="nodeInput" :value="model.name" @input="updateName" @blur="setUnEditable">
<div class="operation" v-show="isHover">
<input v-else class="vtl-input" type="text" ref="nodeInput" :value="model.name" @input="updateName" @blur="setUnEditable">
<div class="vtl-operation" v-show="isHover">
<span title="add tree node" @click.stop.prevent="addChild(false)" v-if="!model.isLeaf">
<slot name="addTreeNode">
<i class="vue-tree-icon icon-folder-plus-e"></i>
<i class="vtl-icon vtl-icon-folder-plus-e"></i>
</slot>
</span>
<span title="add tree node" @click.stop.prevent="addChild(true)" v-if="!model.isLeaf">
<slot name="addLeafNode">
<i class="vue-tree-icon icon-plus"></i>
<i class="vtl-icon vtl-icon-plus"></i>
</slot>
</span>
<span title="edit" @click.stop.prevent="setEditable">
<slot name="edit">
<i class="vue-tree-icon icon-edit"></i>
<i class="vtl-icon vtl-icon-edit"></i>
</slot>
</span>
<span title="delete" @click.stop.prevent="delNode">
<slot name="edit">
<i class="vue-tree-icon icon-trash"></i>
<i class="vtl-icon vtl-icon-trash"></i>
</slot>
</span>
</div>
</div>
<div v-if="model.children && model.children.length > 0 && expanded"
class="border bottom"
:class="{'active': isDragEnterBottom}"
class="vtl-border vtl-bottom"
:class="{'vtl-active': isDragEnterBottom}"
@drop="dropBottom"
@dragenter="dragEnterBottom"
@dragover='dragOverBottom'
@dragleave="dragLeaveBottom"></div>
</div>
<div :class="{'tree-margin': model.name !== 'root'}" v-show="expanded" v-if="isFolder">
<div :class="{'vtl-tree-margin': model.name !== 'root'}" v-show="expanded" v-if="isFolder">
<item v-for="model in model.children"
:default-tree-node-name="defaultTreeNodeName"
:default-leaf-node-name="defaultLeafNodeName"
@@ -112,16 +112,33 @@
},
computed: {
itemIconClass () {
return this.model.isLeaf ? 'icon-file' : 'icon-folder'
return this.model.isLeaf ? 'vtl-icon-file' : 'vtl-icon-folder'
},
caretClass () {
return this.expanded ? 'icon-caret-down' : 'icon-caret-right'
return this.expanded ? 'vtl-icon-caret-down' : 'vtl-icon-caret-right'
},
isFolder() {
isFolder () {
return this.model.children &&
this.model.children.length
},
treeNodeClass () {
const {
model: {
dragDisabled,
disabled
},
isDragEnterNode
} = this
return {
'vtl-tree-node': true,
'vtl-active': isDragEnterNode,
'vtl-drag-disabled': dragDisabled,
'vtl-disabled': disabled
}
}
},
mounted () {
@@ -167,6 +184,7 @@
},
mouseOver(e) {
if (this.model.disabled) return
this.isHover = true
},
@@ -191,7 +209,7 @@
},
dragStart(e) {
if (!this.model.dragDisabled) {
if (!(this.model.dragDisabled || this.model.disabled)) {
fromComp = this
// for firefox
e.dataTransfer.setData("data","data");
@@ -263,7 +281,7 @@
}
</script>
<style lang="less" rel="stylesheet/less" scoped>
<style lang="less" rel="stylesheet/less">
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?ui1hbx');
@@ -275,7 +293,7 @@
font-style: normal;
}
.vue-tree-icon {
.vtl-icon {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
@@ -288,7 +306,7 @@
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
&.item-icon {
&.vtl-menu-icon {
margin-right: 4px;
&:hover {
color: inherit;
@@ -299,52 +317,52 @@
}
}
.icon-file:before {
.vtl-icon-file:before {
content: "\e906";
}
.icon-folder:before {
.vtl-icon-folder:before {
content: "\e907";
}
.icon-caret-down:before {
.vtl-icon-caret-down:before {
content: "\e901";
}
.icon-caret-right:before {
.vtl-icon-caret-right:before {
content: "\e900";
}
.icon-edit:before {
.vtl-icon-edit:before {
content: "\e902";
}
.icon-folder-plus-e:before {
.vtl-icon-folder-plus-e:before {
content: "\e903";
}
.icon-plus:before {
.vtl-icon-plus:before {
content: "\e904";
}
.icon-trash:before {
.vtl-icon-trash:before {
content: "\e905";
}
.border {
.vtl-border {
height: 5px;
&.up {
&.vtl-up {
margin-top: -5px;
background-color: transparent;
}
&.bottom {
&.vtl-bottom {
background-color: transparent;
}
&.active {
&.vtl-active {
border-bottom: 3px dashed blue;
/*background-color: blue;*/
}
}
.tree-node {
.vtl-tree-node {
display: flex;
align-items: center;
padding: 5px 0 5px 1rem;
.input {
.vtl-input {
border: none;
max-width: 150px;
border-bottom: 1px solid blue;
@@ -352,23 +370,23 @@
&:hover {
background-color: #f0f0f0;
}
&.active {
&.vtl-active {
outline: 2px dashed pink;
}
.caret {
.vtl-caret {
margin-left: -1rem;
}
.operation {
.vtl-operation {
margin-left: 2rem;
letter-spacing: 1px;
}
}
.item {
.vtl-item {
cursor: pointer;
}
.tree-margin {
.vtl-tree-margin {
margin-left: 2em;
}
</style>