哈尔滨最好的网站建设公司,广东省网页制作,如何做京东优惠券网站,陕西多地最新通知[mind-elixir]Mind-Elixir 的交互增强#xff1a;单击、双击与鼠标 Hover 功能实现
功能简述
通过防抖#xff0c;实现单击双击区分通过mousemove事件#xff0c;实现hover效果
实现思路
#xff08;一#xff09;单击与双击事件
功能描述
单击节点时#xff0c;可以触发…[mind-elixir]Mind-Elixir 的交互增强单击、双击与鼠标 Hover 功能实现
功能简述
通过防抖实现单击双击区分通过mousemove事件实现hover效果
实现思路
一单击与双击事件
功能描述
单击节点时可以触发单击事件用于执行一些简单操作如显示节点详情、切换样式等。双击节点时可以触发双击事件用于执行更复杂的操作如编辑节点内容、展开/折叠子节点等。通过防抖处理能够准确区分单击和双击事件避免误判。
实现思路
使用 clickTimer 和 clickCount 来记录点击事件的时间和次数。当节点被选中时通过 handleNodeSelect 方法判断是单击还是双击。如果是同一个节点在短时间内多次点击则视为双击否则视为单击。
代码实现handleNodeSelect(nodeData) {// 如果是同一个节点if (this.lastClickedNode this.lastClickedNode.id nodeData.id) {this.clickCount} else {// 不同节点重置计数this.clickCount 1this.lastClickedNode nodeData}// 清除之前的定时器if (this.clickTimer) {clearTimeout(this.clickTimer)}// 设置新的定时器this.clickTimer setTimeout(() {if (this.clickCount 1) {// 单击console.log(触发点击, nodeData)} else if (this.clickCount 2) {// 双击或多击都当作双击处理console.log(触发双击, nodeData)}// 重置计数this.clickCount 0this.lastClickedNode null}, 200) // 200ms内的多次点击判断为双击
}二鼠标 Hover 事件
功能描述
当鼠标悬停在某个节点上时可以获取该节点的 ID用于高亮显示、提示信息等操作。通过监听 mousemove 事件实时获取鼠标位置和对应的节点信息。
实现思路
在 handleMouseMove 方法中通过事件目标e.target获取节点的 ID。判断当前鼠标所在位置是否包含特定的节点元素如 me-tpc从而确定是否触发 Hover 事件。
代码实现// 鼠标移动事件handleMouseMove(e) {if (e?.target?.tagName ME-TPC) {const nodeId e.target.getAttribute(data-nodeid)if (nodeId ! this.hoverId) {console.log(鼠标移入, nodeId)this.hoverId nodeId}} else {if (this.hoverId) {console.log(鼠标移出, this.hoverId)this.hoverId }}}具体代码实现
templatediv classboxdiv idmap mousemovehandleMouseMove/divdiv stylemargin-top: 20pxbutton clicktest1测试1/button/div/div
/templatescript
import MindElixir from mind-elixir
import example from mind-elixir/exampleconst mock {id: root,topic: 中心主题,children: [{id: child1,topic: 子主题1,children: []},{id: child2,topic: 子主题2,children: []}]
}export default {name: MindElixir,data() {return {ME: null,// 单击双击防抖处理clickTimer: null,clickCount: 0,lastClickedNode: null,// 鼠标移入idhoverId: }},mounted() {const generateMainBranch ({ pT, pL, pW, pH, cT, cL, cW, cH, direction }) {console.log(111, pT, pL, pW, pH)console.log(222, cT, cL, cW, cH)console.log(direction, direction)const x1 pWconst y1 pT pH / 2const c1 pW (cL - pW) / 2const c2 cT cH / 2return M ${x1} ${y1} H ${c1} V ${c2} H ${cL}}console.log(example, example)const theme MindElixir.THEMEtheme.cssVar[--root-bgcolor] #2499f2theme.cssVar[--root-radius] 5pxtheme.cssVar[--main-radius] 5pxtheme.palette [#27f25a]this.ME new MindElixir({el: #map,locale: zh_CN,draggable: true, // 启用节点拖拽editable: true, // 启用编辑功能contextMenu: true, // 启用右键菜单toolBar: true, // 启用工具栏nodeMenu: true, // 启用节点菜单keypress: true, // 启用快捷键// before: {},generateMainBranch})this.ME.bus.addListener(operation, operation {console.log(operation, operation)})this.ME.init({nodeData: mock,theme})// 监听节点选择事件需要防抖处理单击/双击this.ME.bus.addListener(selectNode, this.handleNodeSelect)},methods: {test1() {const mock2 {id: root,topic: 中心主题222,style: {color: yellow},children: [{id: child3,topic: 子主题3,children: []},{id: child4,topic: 子主题4,children: []}]}this.ME.refresh({nodeData: mock2})},// 单击双击事件handleNodeSelect(nodeData) {// 如果是同一个节点if (this.lastClickedNode this.lastClickedNode.id nodeData.id) {this.clickCount} else {// 不同节点重置计数this.clickCount 1this.lastClickedNode nodeData}// 清除之前的定时器if (this.clickTimer) {clearTimeout(this.clickTimer)}// 设置新的定时器this.clickTimer setTimeout(() {if (this.clickCount 1) {// 单击console.log(触发点击, nodeData)} else if (this.clickCount 2) {// 双击或多击都当作双击处理console.log(触发双击, nodeData)}// 重置计数this.clickCount 0this.lastClickedNode null}, 200) // 200ms内的多次点击判断为双击},// 鼠标移动事件handleMouseMove(e) {if (e?.target?.tagName ME-TPC) {const nodeId e.target.getAttribute(data-nodeid)if (nodeId ! this.hoverId) {console.log(鼠标移入, nodeId)this.hoverId nodeId}} else {if (this.hoverId) {console.log(鼠标移出, this.hoverId)this.hoverId }}}}
}
/scriptstyle langless scoped
.box {text-align: center;
}
#map {width: 100%;height: 800px;overflow: auto;
}
/style
