由一个计数器出发:关于vue使用独立js文件的问题
最近有个vue项目要用ztree。
然后,我想把一些逻辑提出来作为公共的方法,放到独立的js文件里。
ztreeTool.js
import $ from 'jquery' export default class ZtreeTools { static beforeDrag(treeId, treeNodes) { console.log("beforeDrag") for (var i=0,l=treeNodes.length; i<l; i++) { if (treeNodes[i].drag === false) { return false; } } return true; } static beforeDrop(treeId, treeNodes, targetNode, moveType) { console.log("beforeDrop") return targetNode ? targetNode.drop !== false : true; } static addHoverDom(treeId, treeNode) { console.log(n) console.log(treeId, treeNode) var sObj = $("#" + treeNode.tId + "_span"); if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return; var addStr = "<span class='button add' id='addBtn_" + treeNode.tId + "' title='新建节点' onfocus='this.blur();'></span>"; sObj.after(addStr); var btn = $("#addBtn_"+treeNode.tId); if (btn) btn.bind("click", function(){ var zTree = $.fn.zTree.getZTreeObj(treeId); zTree.addNodes( treeNode, {id:(100 + count), pId:treeNode.id, name:"新节点" + (count++)} ); return false; }); } static removeHoverDom(treeId, treeNode) { $("#addBtn_"+treeNode.tId).unbind().remove(); }; }
main.js
...
import ZtreeTools from './data/ztreeTools' Vue.prototype.$ZtreeTools = ZtreeTools;
...
那么问题来了:
ztree demo里有一个外部变量count,我们把ztree逻辑抽出来之后怎么处理这个变量?
我的办法是:
把count作为一个独立的计数器放到一个独立类里,在vue项目启动时实例化这个类。
---
number.js
export default class Number { constructor() { this.count = 1 } }
ztreeTool.js
import $ from 'jquery' import Number from './number.js' const n = new Number() export default class ZtreeTools { static beforeDrag(treeId, treeNodes) { console.log("beforeDrag") for (var i=0,l=treeNodes.length; i<l; i++) { if (treeNodes[i].drag === false) { return false; } } return true; } static beforeDrop(treeId, treeNodes, targetNode, moveType) { console.log("beforeDrop") return targetNode ? targetNode.drop !== false : true; } static addHoverDom(treeId, treeNode) { console.log(n) console.log(treeId, treeNode) var sObj = $("#" + treeNode.tId + "_span"); if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return; var addStr = "<span class='button add' id='addBtn_" + treeNode.tId + "' title='新建节点' onfocus='this.blur();'></span>"; sObj.after(addStr); var btn = $("#addBtn_"+treeNode.tId); if (btn) btn.bind("click", function(){ var zTree = $.fn.zTree.getZTreeObj(treeId); zTree.addNodes( treeNode, {id:(100 + n.count), pId:treeNode.id, name:"新节点" + (n.count++)} ); return false; }); } static removeHoverDom(treeId, treeNode) { $("#addBtn_"+treeNode.tId).unbind().remove(); }; static reloadNumber(){ n.count = 1 } }
红色的部分就是改过的部分。这里其实就已经实例化了。
某个页面.vue
... created(){ ... this.$ZtreeTools.reloadNumber() ... }, ...
每一个页面开始时把计数器重置一下。
以上。
posted on 2019-03-01 12:54 fox_charon 阅读(255) 评论(0) 编辑 收藏 举报