最近遇到一个需求：需要点击输入框后，出现下拉选项，且下拉选项的内容以树结构展示，如图
其中遇到一个棘手的问题，在输入框失去焦点时，下拉选项框需要隐藏，
这意味着当我准备点击树节点时，整个下拉选项框就被隐藏了，
所以虽然视觉效果上我点击了节点，但实际上我一直未曾真正点击到。
解决思路：
=> 在点击节点时，需要保证输入框不会失去焦点
=> 在下拉选项区域内做操作时，输入框不会失去焦点
=> 输入框的失焦是在鼠标onmousedown事件执行时浏览器的默认行为
=> 给下拉选项区域加上onmousedown事件，并阻止默认行为，代码如下
this.$refs.treeGroup.onmousedown = function (e) {
if (e && e.preventDefault) {
// 现代浏览器阻止默认事件
e.preventDefault()
} else {
// IE阻止默认事件
window.event.returnValue = false
}
return false
}完整代码，仅供学习参考
<!-- 基于 vue.js 2.0 + element-ui 2.14.x -->
<template>
<div class="select-tree">
<v-input
class="search"
v-model="filterText"
:placeholder="placeholder"
:width="width"
:suffix-icon="showTree ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
@focus="onFocus"
@blur="onBlur"
@clear="clear"
/>
<div class="tree-group" v-show="showTree" ref="treeGroup">
<div class="tree-group__box" v-show="treeData.length !== 0">
<button-tree
ref="buttonTree"
class="button-tree"
:key="key"
:data="treeData"
:defaultProps="treeProps"
:filterText="filterText"
:highlightCurrent="highlightCurrent"
:filterNodeMethod="filterNodeMethod"
:expand-on-click-node="false"
@nodeClick="nodeClick"
/>
</div>
<div v-show="treeData.length === 0" class="tree-group__box is-empty">暂无数据</div>
</div>
</div>
</template>
<script>
import { ButtonTree } from 'components/bussiness'
export default {
name: 'selectTree',
components: {
ButtonTree
},
props: {
// 选中项的值，支持`.sync`
value: {
type: String,
require: true
},
placeholder: {
type: String,
default: '请输入'
},
width: {
type: Number,
default: 182
},
treeData: {
type: Array,
default: () => {
return []
}
},
treeProps: {
type: Object,
default: () => {
return {}
}
},
expandOnClickNode: {
type: Boolean,
default: true
},
highlightCurrent: {
type: Boolean,
default: true
},
filterNodeMethod: {
type: Function
}
},
data () {
return {
showTree: false,
filterText: '',
result: '',
model: this.value,
key: 0
}
},
watch: {
model (newValue) {
console.log(newValue, 'newValue')
// 返回当前所选值的value数组
this.$emit('update:value', newValue)
},
showTree (val) {
if (val) { return }
// 树弹框隐藏时触发
if (this.model === '') {
this.filterText = ''
} else {
this.recursGetData(this.model, this.treeData)
this.filterText = this.result[this.treeProps.label]
this.result = null
}
}
},
mounted () {
this.$refs.treeGroup.onmousedown = function (e) {
if (e && e.preventDefault) {
// 现代浏览器阻止默认事件
e.preventDefault()
} else {
// IE阻止默认事件
window.event.returnValue = false
}
return false
}
},
methods: {
// input 输入框获取焦点
onFocus () {
this.filterText = ''
setTimeout(() => {
this.showTree = true
}, 100)
this.$emit('focus', event)
},
// input 输入框失去焦点
onBlur () {
this.showTree = false
this.$emit('blur', event)
},
clear () {
// this.form.orgId = ''
this.model = ''
this.key += 1
this.$emit('clear')
},
nodeClick (data, node, nodeVue) {
this.filterText = data[this.treeProps.label]
// this.form.orgId = data[this.treeProps.id]
this.model = data[this.treeProps.id]
this.$emit('nodeClick', data, node, nodeVue)
},
/* 计算 */
// 通过值递归获取数据
recursGetData (id, arr) {
console.log(id, arr, this.treeProps, 'id, arr')
arr.map((d, i) => {
if (id === d[this.treeProps.id]) {
this.result = d
} else {
if (d[this.treeProps.children].length !== 0) {
this.recursGetData(id, d[this.treeProps.children])
}
}
})
}
}
}
</script>
<style lang="scss" scoped>
.select-tree {
position: relative;
.search {
// ::v-deep .el-input__inner {
// border-radius:18px;
// background: rgba(144,166,186, 0.1);
// box-shadow: inset 4px 1px 8px 0px rgba(95,122,155,0.1);
// border: none;
// }
::v-deep .el-input__suffix {
line-height: 32px;
}
}
.tree-group {
&::before {
content: '';
border: 1px solid;
border-color: #E4E7ED transparent transparent #E4E7ED;
background-color: #fff;
width: 6px;
height: 6px;
position: absolute;
top: 2px;
left: 36px;
z-index: 4;
transform: rotateZ(45deg)
}
position: absolute;
left: 0;
top: 110%;
z-index: 2;
.tree-group__box {
&.is-empty {
height: auto;
color: #909399;
text-align: center;
padding: 4px 0;
font-size: 14px;
}
/** 不可使用定位,会破坏button-tree组件结构 */
width: 182px;
height: 204px;
border: 1px solid #E4E7ED;
border-radius: 4px;
background-color: #FFF;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
box-sizing: border-box;
margin: 5px 0;
padding: 5px 0 0;
}
}
}
</style>// button-tree 组件
<template>
<div class="tree-button-wrapper" id="treeButtonBox">
<div class="tree-button-box" id="treeButton">
<el-tree
ref="elTree"
:node-key="nodeKey"
:default-checked-keys="defaultCheckedKeys"
:data="data"
:props="defaultProps"
:filter-node-method="filterNodeMethod"
:empty-text="emptyText"
:lazy="lazy"
:load="loadData"
:default-expanded-keys="defaultExpandedKeys"
:default-expand-all="expandAll"
:expand-on-click-node="expandOnClickNode"
:accordion="accordion"
:highlight-current="highlightCurrent"
:show-checkbox="showCheckbox"
:check-on-click-node="checkOnClickNode"
:draggable="draggable"
:allow-drag="allowDrag"
:allow-drop="allowDrop"
:indent="indent"
@node-click="nodeClick"
@node-contextmenu="nodeContextMenu"
@check-change="checkChange"
@check="check"
@current-change="currentChange"
@node-expand="nodeExpand"
@node-collapse="nodeCollapse"
@node-drag-start="nodeDragStart"
@node-drag-enter="nodeDragEnter"
@node-drag-leave="nodeDragLeave"
@node-drag-over="nodeDragOver"
@node-drag-end="nodeDragEnd"
@node-drop="nodeDrop">
<template slot-scope="{ node, data }">
<div class="custom-tree-node">
<span class="icon" v-if="data.icon" :style="handleBG(data, node)"></span>
<div class="node-content" ref="nodeContent" @contextmenu.stop.prevent="contentContextMenu(data, node, $event)">
<!--传入html-->
<div style="display: inline-block;" v-if="data && data.html" v-html="data.value"></div>
<!--传入自定义组件-->
<component v-else-if="data && data.component" :is="data.componentName" :row="scope.row"></component>
<!--传入普通文本-->
<div style="display: inline-block;" v-else v-text="data[defaultProps.label]"></div>
</div>
<!-- 按钮列表 -->
<div class="node-button" v-if="showBtnAll(data)">
<div class="node-button-icon" @click.stop.prevent="buttonIconClick(data)"><i class="el-icon-more"></i></div>
<ul class="node-button-list" v-show="showList(data)">
<li
v-show="showBtn(data, item)"
v-for="item in btnFilterOps"
:key="item.value"
@click.stop.prevent="buttonClick(data, item)"
>
{{item.text}}
</li>
<!-- <li @click.stop="buttonClick(data, 'add')">添加部门</li> -->
<!-- <li>添加成员</li>
<li>编辑</li>
<li>删除</li>
<li>移动</li> -->
</ul>
</div>
</div>
</template>
</el-tree>
</div>
</div>
</template>
<script>
import { Tree } from 'element-ui'
import _ from 'lodash'
// @group 基础组件
// @title Tree 树形组件
export default {
name: 'button-tree',
components: {
'el-tree': Tree
},
props: {
// 是否开启防抖
isDebounce: {
type: Boolean,
default: true
},
// 用于显示弹框按钮的列表数据
btnOps: {
type: Array,
default: () => {
// [{ text: '添加部门', value: 'add' }] text 按钮名称 value 按钮编号
return []
}
},
// 用于树节点过滤
filterText: {
type: String,
default: ''
},
// 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的,建议业务方传入这个属性
nodeKey: {
type: String,
default: 'id'
},
// 默认勾选的节点的 key 的数组
defaultCheckedKeys: {
type: Array
},
// 与data配套使用,详情请参考element-ui的tree组件的props介绍:http://element-cn.eleme.io/#/zh-CN/component/tree
defaultProps: {
type: Object,
default: () => {
return {
// 必传，唯一性id
id: 'id',
// 必传，label 指定节点标签为节点对象的某个属性值 string, function(data, node)
label: 'label',
// 必传，children 指定子树为节点对象的某个属性值 string
children: 'children',
// disabled 指定节点选择框是否禁用为节点对象的某个属性值 boolean, function(data, node)
disabled: 'disabled',
// isLeaf 指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效 boolean, function(data, node)
isLeaf: 'isLeaf',
// btn 指定节点存在哪些功能按钮，Array<>
btn: 'btn'
}
}
},
// 展示数据
data: {
type: Array,
default: () => {
return []
}
},
// 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏
filterNodeMethod: {
type: Function
},
// 内容为空的时候展示的文本
emptyText: {
type: String,
default: '暂无数据'
},
// 是否懒加载子节点，需与 load 方法结合使用
lazy: {
type: Boolean,
default: false
},
// 默认展开的节点的 key 的数组
defaultExpandedKeys: {
type: Array
},
// 是否默认展开所有节点
expandAll: {
type: Boolean,
default: false
},
// 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
expandOnClickNode: {
type: Boolean,
default: true
},
// 是否每次只打开一个同级树节点展开
accordion: {
type: Boolean,
default: false
},
// 是否高亮当前选中节点，默认值是 false。
highlightCurrent: {
type: Boolean,
default: false
},
// 节点是否可被选择
showCheckbox: {
type: Boolean,
default: false
},
// 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。
checkOnClickNode: {
type: Boolean,
default: false
},
// 是否开启拖拽节点功能
draggable: {
type: Boolean,
default: false
},
// 判断节点能否被拖拽
allowDrag: {
type: Function
},
// 拖拽时判定目标节点能否被放置。type 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后
allowDrop: {
type: Function
},
// 相邻级节点间的水平缩进，单位为像素
indent: {
type: Number,
default: 16
},
// 自定义树节点的图标
iconClass: {
type: String,
default: 'el-icon-plus'
}
},
data () {
return {
// 选中节点的数据,此处选中为点击显示按钮的图标,不要修改该数据
currentData: {},
scrollAction: {
x: undefined,
y: undefined
},
// 当前展开的节点的vnode对象,再 loadData 方法中被使用
currentNode: null
}
},
computed: {
btnFilterOps () {
return this.btnOps.filter(d => {
// return this.$store.getters.getPermission(d.value)
/** 测试用代码 */
return true
/** end */
})
}
},
watch: {
data: {
handler () {
// 初始化一次div.node-button元素的位置
this.$nextTick(() => {
this.nodeButtonElementMove()
})
},
deep: true,
immediate: true
},
currentNode: {
handler (val) {
if (val && val.loading === false) {
this.$nextTick(() => {
this.nodeButtonElementMove(val)
})
this.currentNode = null
}
},
deep: true
},
filterText (val) {
if (this.isDebounce) {
this.filter(val)
} else {
this.$refs.elTree.filter(val)
}
}
},
mounted () {
// 操作dom必须再节点挂载之后,为treeButtonBox元素绑定滚动事件
this.treeButtonBoxElementBindEvent()
// 为过滤事件绑定this值
// this.filter.bind(this)
},
methods: {
// 不可以使用箭头函数，this指向会出现问题
filter: _.debounce(function (val) {
console.log('过滤节点触发')
this.$refs.elTree.filter(val)
}, 100),
// 是否显示所有与弹出按钮相关的内容
showBtnAll (data) {
return this.btnFilterOps.length !== 0 && data[this.defaultProps.btn] && data[this.defaultProps.btn].length !== 0
},
// 是否显示按钮列表
showList (data) {
const currentId = this.currentData[this.defaultProps.id]
const dataId = data[this.defaultProps.id]
// console.log(currentId, dataId, currentId === dataId)
return currentId !== undefined && dataId === currentId
},
// 是否显示按钮
showBtn (data, item) {
// const permission = this.$store.getters.getPermission(item.value)
// return this.defaultProps.btn && data[this.defaultProps.btn].includes(item.value) && permission
console.log('是否显示按钮')
/** 测试用代码 */
return data[this.defaultProps.btn].includes(item.value)
/** end */
},
// 按钮图标被点击时触发
buttonIconClick (data) {
const currentId = this.currentData[this.defaultProps.id]
const dataId = data[this.defaultProps.id]
// 若点击节点是当前存储节点,则清除存储节点数据
if (currentId !== undefined && dataId === currentId) {
this.currentData = {}
} else {
this.currentData = data
}
},
// 为treeButtonBox元素绑定滚动事件
treeButtonBoxElementBindEvent () {
const elTreeBox = document.getElementById('treeButtonBox')
elTreeBox.addEventListener('scroll', () => {
if (this.scrollAction.x !== undefined && this.scrollAction.x !== elTreeBox.scrollLeft) {
this.nodeButtonElementMove()
}
})
},
// 为div.node-button元素设置left值
nodeButtonElementMove (data) {
// 若按钮无需显示,避免运行下面的代码消耗性能
if (!this.btnFilterOps.length) {
return
}
if (data && data[this.defaultProps.btn] && data[this.defaultProps.btn].length === 0) {
return
}
const el = window.document.getElementById('treeButtonBox')
this.scrollAction.x = el.scrollLeft
el.querySelectorAll('.node-button').forEach(e => {
// 注意: 这里的21px是div.node-button元素的高度,因为旋转了90deg,高成了宽
e.style.left = `${el.scrollLeft + el.clientWidth - 22}px`
})
},
// 按钮被点击时触发
// @arg (data, value)接收两个参数 1.data 传递给 data 属性的数组中该节点所对应的对象
// @arg 2.item 按钮对应的对象
buttonClick (data, item) {
this.currentData = {}
this.$emit('buttonClick', data, item)
},
loadData (node, resolve) {
// 加载子树数据的方法，仅当 lazy 属性为true 时生效
// @arg (node, resolve) 接收两个参数，1. 当前节点 2. 渲染数据的方法
// console.log(node, resolve, 'reslove')
this.currentNode = node
this.$emit('loadData', node, resolve)
},
// @vuese
// 自定义树节点图标的方法
handleBG (data, node) {
let expanded = node.expanded
let bgUrl
if (!expanded) {
// 未打开
bgUrl = `url(${data.icon.iconOpen})`
} else {
// 已打开
bgUrl = `url(${data.icon.iconClose})`
}
return {
backgroundImage: bgUrl
}
},
// @vuese
// 若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点所组成的数组
// @arg (leafOnly, includeHalfChecked)接收两个参数 1.leafOnly 是否只是叶子节点，默认值为 false
// @arg 2.includeHalfChecked 是否包含半选节点，默认值为 false
getCheckedNodes (leafOnly, includeHalfChecked) {
return this.$refs.elTree.getCheckedNodes(leafOnly, includeHalfChecked)
},
// @vuese
// 设置目前勾选的节点，使用此方法必须设置 node-key 属性
// @arg (nodes)接收一个参数 1.nodes 接收勾选节点数据的数组
setCheckedNodes (nodes) {
this.$refs.elTree.setCheckedNodes(nodes)
},
// @vuese
// 若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组
// @arg (leafOnly)接收一个参数 1.leafOnly 若为 true 则仅返回被选中的叶子节点的 keys，默认值为 false
getCheckedKeys (leafOnly) {
return this.$refs.elTree.getCheckedKeys(leafOnly)
},
// @vuese
// 通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性
// @arg (keys, leafOnly)接收两个参数 1.keys 勾选节点的 key 的数组
// @arg 2.leafOnly 若为 true 则仅设置叶子节点的选中状态，默认值为 false
setCheckedKeys (keys, leafOnly) {
this.$refs.elTree.setCheckedKeys(keys, leafOnly)
},
// @vuese
// 获取当前被选中节点的 key，使用此方法必须设置 node-key 属性，若没有节点被选中则返回 null
getCurrentKey () {
return this.$refs.elTree.getCurrentKey()
},
// @vuese
// 获取当前被选中节点的 data，若没有节点被选中则返回 null
getCurrentNode () {
return this.$refs.elTree.getCurrentNode()
},
// @vuese
// 通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性
// @arg (key)接收一个参数 1.key 待被选节点的 key，若为 null 则取消当前高亮的节点
setCurrentKey (key) {
this.$refs.elTree.setCurrentKey(key)
},
// @vuese
// 通过 node 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性
// @arg (node)接收一个参数 1.node 待被选节点的 node
setCurrentNode (node) {
this.$refs.elTree.setCurrentNode(node)
},
// @vuese
// 根据 data 或者 key 拿到 Tree 组件中的 node
// @arg (data)接收一个参数 1.data 要获得 node 的 key 或者 data
getNode (data) {
return this.$refs.elTree.getNode(data)
},
// @vuese
// 删除 Tree 中的一个节点，使用此方法必须设置 node-key 属性
// @arg (data)接收一个参数 1.data 要删除的节点的 data 或者 node
remove (data) {
this.$refs.elTree.remove(data)
},
// @vuese
// 为 Tree 中的一个节点追加一个子节点
// @arg (data, parentNode)接收两个参数 1.data 要增加的节点的 data
// @arg 2.parentNode 要增加的节点的后一个节点的 data、key 或者 node
append (data, parentNode) {
this.$refs.elTree.append(data, parentNode)
},
// @vuese
// 为 Tree 的一个节点的前面增加一个节点
// @arg (data, refNode)接收两个参数 1.data 要增加的节点的 data
// @arg 2.refNode 要增加的节点的后一个节点的 data、key 或者 node
insertBefore (data, refNode) {
this.$refs.elTree.insertBefore(data, refNode)
},
// @vuese
// 为 Tree 的一个节点的后面增加一个节点
// @arg (data, refNode)接收两个参数 1.data 要增加的节点的 data
// @arg 2.refNode 要增加的节点的前一个节点的 data、key 或者 node
insertAfter (data, refNode) {
this.$refs.elTree.insertAfter(data, refNode)
},
nodeClick (data, node, nodeVue) {
// 节点被点击时的回调
// @arg (data, node, nodeVue)接收三个参数 1.data 传递给 data 属性的数组中该节点所对应的对象
// @arg 2.node 节点对应的 Node
// @arg 3.nodeVue 节点组件本身
console.log('节点被点击')
// 节点被点击后
this.$emit('nodeClick', data, node, nodeVue)
},
nodeContextMenu (event, data, node, nodeVue) {
// 当某一节点被鼠标右键点击时会触发该事件
// @arg (event, data, node, nodeVue)接收四个参数 1.event 事件对象
// @arg 2.data 传递给 data 属性的数组中该节点所对应的对象
// @arg 3.node 节点对应的 Node
// @arg 4.nodeVue 节点组件本身
this.$emit('nodeContextMenu', event, data, node, nodeVue)
},
contentContextMenu (data, node, event) {
// 当某一节点内容被鼠标右键点击时会触发该事件
// @arg (event, data, node)接收三个参数 1.event 事件对象
// @arg 2.data 传递给 data 属性的数组中该节点所对应的对象
// @arg 3.node 节点对应的 Node
this.$emit('contentContextMenu', event, data, node)
},
checkChange (data, checked, childrenChecked) {
// 节点选中状态发生变化时的回调
// @arg (data, checked, childrenChecked)接收三个参数 1.data 传递给 data 属性的数组中该节点所对应的对象
// @arg 2.checked 节点本身是否被选中
// @arg 3.childrenChecked 节点的子树中是否有被选中的节点
this.$emit('checkChange', data, checked, childrenChecked)
},
check (data, checkedObj) {
// 当复选框被点击的时候触发
// @arg (data, checkedObj)接收两个参数 1.data 传递给 data 属性的数组中该节点所对应的对象
// @arg 2.checkedObj 树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性
this.$emit('check', data, checkedObj)
},
currentChange (data, node) {
// 当前选中节点变化时触发的事件
// @arg (data, node)接收两个参数 1.data 当前节点的数据
// @arg 2.node 当前节点的 Node 对象
this.$emit('currentChange', data, node)
},
nodeExpand (data, node, nodeVue) {
// 节点被展开时触发的事件
// @arg (data, node, nodeVue)接收三个参数 1.data 传递给 data 属性的数组中该节点所对应的对象
// @arg 2.node 节点对应的 Node
// @arg 3.nodeVue 节点组件本身
// 当并非懒加载时,节点展开后,且dom挂载完成时,需要将div.node-button元素位置重新计算一次
if (!this.lazy) {
this.$nextTick(() => {
this.nodeButtonElementMove()
})
}
this.$emit('nodeExpand', data, node, nodeVue)
},
nodeCollapse (data, node, nodeVue) {
// 节点被关闭时触发的事件
// @arg (data, node, nodeVue)接收三个参数 1.data 传递给 data 属性的数组中该节点所对应的对象
// @arg 2.node 节点对应的 Node
// @arg 3.nodeVue 节点组件本身
this.$emit('nodeCollapse', data, node, nodeVue)
},
nodeDragStart (node, event) {
// 节点开始拖拽时触发的事件
// @arg (node, event)接收两个参数 1.node 被拖拽节点对应的 Node
// @arg 2.event 事件对象
this.$emit('nodeCollapse', node, event)
},
nodeDragEnter (node, enterNode, event) {
// 拖拽进入其他节点时触发的事件
// @arg (node, enterNode, event)接收三个参数 1.node 被拖拽节点对应的 Node
// @arg 2.enterNode 所进入节点对应的 Node
// @arg 3.event 事件对象
this.$emit('nodeDragEnter', node, enterNode, event)
},
nodeDragLeave (node, leaveNode, event) {
// 拖拽离开某个节点时触发的事件
// @arg (node, leaveNode, event)接收三个参数 1.node 被拖拽节点对应的 Node
// @arg 2.leaveNode 所离开节点对应的 Node
// @arg 3.event 事件对象
this.$emit('nodeDragLeave', node, leaveNode, event)
},
nodeDragOver (node, enterNode, event) {
// 在拖拽节点时触发的事件（类似浏览器的 mouseover 事件）
// @arg (node, enterNode, event)接收三个参数 1.node 被拖拽节点对应的 Node
// @arg 2.enterNode 当前进入节点对应的 Node
// @arg 3.event 事件对象
this.$emit('nodeDragOver', node, enterNode, event)
},
nodeDragEnd (node, overNode, pos, event) {
// 拖拽结束时（可能未成功）触发的事件
// @arg (node, overNode, pos, event)接收四个参数 1.node 被拖拽节点对应的 Node
// @arg 2.overNode 结束拖拽时最后进入的节点（可能为空）
// @arg 3.pos 被拖拽节点的放置位置（before、after、inner）
// @arg 4.event 事件对象
this.$emit('nodeDragEnd', node, overNode, pos, event)
},
nodeDrop (node, overNode, pos, event) {
// 拖拽成功完成时触发的事件
// @arg (node, overNode, pos, event)接收四个参数 1.node 被拖拽节点对应的 Node
// @arg 2.overNode 结束拖拽时最后进入的节点
// @arg 3.pos 被拖拽节点的放置位置（before、after、inner）
// @arg 4.event 事件对象
this.$emit('nodeDrop', node, overNode, pos, event)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.tree-button-wrapper {
position: relative; // 该属性不可删除
height: 100%;
overflow: auto;
.tree-button-box {
min-width: 100%;
display: inline-block;
// ::v-deep .el-tree{
// }
}
// .el-tree-node>.el-tree-node__children {
// overflow: auto;
// }
::v-deep .el-tree-node__content {
height: 24px;
position: relative;
&:hover{
z-index: 3;
.custom-tree-node {
.node-content {
opacity: 0.3;
}
.node-button {
.node-button-icon {
display: inline-block;
}
}
}
}
.custom-tree-node {
display: inline-block;
height: 24px;
line-height: 24px;
.icon {
margin: 0 4px 0 0;
width: 22px;
height: 22px;
display: inline-block;
vertical-align: top;
// vertical-align: ;
border: 0 none;
cursor: pointer;
outline: none;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: contain;
}
.node-content {
display: inline-block;
padding: 0;
}
.node-button {
// display: none;
position: absolute;
top: 0;
right: 8px;
width: 18px;
height: 100%;
font-size: 20px;
color: #909399;
text-align: center;
.node-button-icon {
display: none;
transform: rotateZ(-90deg);
}
.node-button-list {
user-select: none;
// display: none;
position: absolute;
top: 24px;
right: 8px;
list-style: none;
font-size: 14px;
color: #909399;
padding: 2px 0px;
border: 1px solid #e4e7ed;
border-radius: 4px;
background-color: #fff;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
z-index: 1;
> li {
padding: 0px 12px;
&:hover {
color: #1B8CF2;
background-color: #f5f7fa;
}
// text-decoration: underline;
// list-style: none;
}
}
}
}
}
::v-deep .el-tree-node__children {
overflow: inherit;
}
}
</style>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
