Merge remote-tracking branch 'origin/master'

# Conflicts:
#	readme.md

.npmignore

@@ -9,4 +9,4 @@ test
 .babelrc
 .travis.yml
 karma.conf.js
-webpack.config.js
+build

build/webpack.base.conf.js

@@ -1,14 +1,9 @@
 var webpack = require('webpack');
 var path = require('path');
 
+var projectRoot = path.resolve(__dirname, '../')
+
 module.exports = {
-  entry: './src/index.js',
-  output: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: 'vue-tree-list.min.js',
-    library: 'VueTreeList',
-    libraryTarget: 'umd'
-  },
   module: {
     loaders: [
       {
@@ -18,7 +13,7 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel',
-        include: [path.join(__dirname, 'src')],
+        include: [path.join(projectRoot, 'src'), path.join(projectRoot, 'dev')],
         exclude: /node_modules/
       },
       {
@@ -40,12 +35,5 @@ module.exports = {
         browsers: ['iOS >= 7', 'Android >= 4.1']
       })
     ]
-  },
+  }
-  plugins: [
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      }
-    })
-  ]
 }

build/webpack.build.conf.js

@@ -0,0 +1,16 @@
+var webpack = require('webpack')
+var merge = require('webpack-merge')
+var baseConfig = require('./webpack.base.conf')
+var path = require('path')
+
+var projectRoot = path.resolve(__dirname, '../')
+
+module.exports = merge(baseConfig, {
+  entry: './src/index.js',
+  output: {
+    path: path.resolve(projectRoot, 'dist'),
+    filename: 'vue-tree-list.min.js',
+    library: 'VueTreeList',
+    libraryTarget: 'umd'
+  }
+})

build/webpack.dev.conf.js

@@ -0,0 +1,28 @@
+var webpack = require('webpack')
+var merge = require('webpack-merge')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var baseConfig = require('./webpack.base.conf')
+var path = require('path')
+
+var projectRoot = path.resolve(__dirname, '../')
+
+module.exports = merge(baseConfig, {
+  entry: './dev/index.js',
+  devServer: {
+    historyApiFallback: true,
+    noInfo: true,
+    overlay: true,
+    open: true,
+    hot: true,
+    inline: true
+  },
+  devtool: '#eval-source-map',
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './dev/index.html',
+      filename: 'index.html',
+      inject: true
+    }),
+    new webpack.HotModuleReplacementPlugin()
+  ]
+})

dev/App.vue

@@ -0,0 +1,84 @@
+<template>
+    <div>
+        <button @click="addNode">Add Node</button>
+        <vue-tree-list @click="onClick" :model="data" default-tree-node-name="new node" default-leaf-node-name="new leaf"></vue-tree-list>
+        <button @click="getNewTree">Get new tree</button>
+        <pre>
+          {{newTree}}
+        </pre>
+    </div>
+</template>
+<script>
+  import { VueTreeList, Tree, TreeNode } from '../src'
+  export default {
+    components: {
+      VueTreeList
+    },
+    data () {
+      return {
+        newTree: {},
+        data: new Tree([
+          {
+            name: 'Node 1',
+            id: 1,
+            pid: 0,
+            dragDisabled: true,
+            children: [
+              {
+                name: 'Node 1-2',
+                id: 2,
+                isLeaf: true,
+                pid: 1
+              }
+            ]
+          },
+          {
+            name: 'Node 2',
+            id: 3,
+            pid: 0,
+            dragDisabled: true
+          },
+          {
+            name: 'Node 3',
+            id: 4,
+            pid: 0
+          }
+        ])
+      }
+    },
+    methods: {
+      addNode: function () {
+        var node = new TreeNode({ name: 'new node', isLeaf: false })
+        if (!this.data.children) this.data.children = []
+        this.data.addChildren(node)
+      },
+
+      getNewTree: function () {
+        var vm = this
+        function _dfs (oldNode) {
+          var newNode = {}
+
+          for (var k in oldNode) {
+            if (k !== 'children' && k !== 'parent') {
+              newNode[k] = oldNode[k]
+            }
+          }
+
+          if (oldNode.children && oldNode.children.length > 0) {
+            newNode.children = []
+            for (var i = 0, len = oldNode.children.length; i < len; i++) {
+              newNode.children.push(_dfs(oldNode.children[i]))
+            }
+          }
+          return newNode
+        }
+
+        vm.newTree = _dfs(vm.data)
+      },
+
+      onClick(model) {
+        console.log(model)
+      }
+    }
+  }
+</script>

dev/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta name="viewport" content="with=device-width,initial-scale=1.0,
+      maximum-scale=1.0,minimum-scale=1.0,uses-scalable=no">
+    <title>vue-date-range</title>
+</head>
+<body>
+<div id="app"></div>
+</body>
+</html>

dev/index.js

@@ -0,0 +1,9 @@
+/**
+ * Created by ayou on 18/3/7.
+ */
+import Vue from 'vue'
+import App from './App.vue'
+
+new Vue({
+  render: h => h(App)
+}).$mount('#app')

examples/demo1.html

@@ -78,7 +78,7 @@
             </span>
             New Treenode
         </button>
-        <vue-tree-list :model="data" default-tree-node-name="new node" default-leaf-node-name="new leaf"></vue-tree-list>
+        <vue-tree-list @click="onClick" :model="data" default-tree-node-name="new node" default-leaf-node-name="new leaf"></vue-tree-list>
     </div>
 
     <div class="container">
@@ -127,6 +127,7 @@
             name: 'Node 1',
             id: 1,
             pid: 0,
+            dragDisabled: true,
             children: [
               {
                 name: 'Node 1-2',
@@ -139,7 +140,8 @@
           {
             name: 'Node 2',
             id: 3,
-            pid: 0
+            pid: 0,
+            dragDisabled: true
           },
           {
             name: 'Node 3',
@@ -155,24 +157,25 @@
       },
 
       addNode: function () {
-        var node = new VueTreeList.TreeNode('new node', false)
+        var node = new VueTreeList.TreeNode({ name: 'new node', isLeaf: false })
         if (!this.data.children) this.data.children = []
         this.data.addChildren(node)
       },
 
       getNewTree: function () {
-        const vm = this
+        var vm = this
         function _dfs (oldNode) {
-          let newNode = {}
+          var newNode = {}
 
-          newNode.name = oldNode.name
+          for (var k in oldNode) {
-          newNode.pid = oldNode.pid
+            if (k !== 'children' && k !== 'parent') {
-          newNode.isLeaf = oldNode.isLeaf
+              newNode[k] = oldNode[k]
-          newNode.id = oldNode.id
+            }
+          }
 
           if (oldNode.children && oldNode.children.length > 0) {
             newNode.children = []
-            for (let i = 0, len = oldNode.children.length; i < len; i++) {
+            for (var i = 0, len = oldNode.children.length; i < len; i++) {
               newNode.children.push(_dfs(oldNode.children[i]))
             }
           }
@@ -180,6 +183,10 @@
         }
 
         vm.newTree = _dfs(vm.data)
+      },
+
+      onClick(model) {
+        console.log(model)
       }
     }
   })

package.json

@@ -1,13 +1,14 @@
 {
   "name": "vue-tree-list",
-  "version": "1.0.0",
+  "version": "1.0.6",
-  "description": "A vue component for tree structure.",
+  "description": "A vue component for tree structure. Support adding treenode/leafnode, editing node's name and dragging.",
   "main": "dist/vue-tree-list.min.js",
   "scripts": {
     "test": "karma start --single-run",
     "unit": "karma start --watch",
     "coveralls": "npm run test -- --report lcovonly && cat ./coverage/lcov.info | coveralls",
-    "build": "webpack"
+    "build": "webpack --config build/webpack.build.conf.js",
+    "dev": "webpack-dev-server --config build/webpack.dev.conf.js"
   },
   "repository": {
     "type": "git",
@@ -23,9 +24,6 @@
     "url": "https://github.com/ParadeTo/vue-tree-list/issues"
   },
   "homepage": "https://github.com/ParadeTo/vue-tree-list#readme",
-  "dependencies": {
-    "jquery": "^3.2.1"
-  },
   "devDependencies": {
     "autoprefixer": "^6.4.0",
     "babel-core": "^6.0.0",
@@ -42,17 +40,8 @@
     "file-loader": "^0.10.1",
     "isparta": "^4.0.0",
     "isparta-loader": "^2.0.0",
-    "karma": "^1.7.0",
-    "karma-coverage": "^1.1.1",
-    "karma-coveralls": "^1.1.2",
-    "karma-mocha": "^1.3.0",
-    "karma-phantomjs-launcher": "^1.0.4",
-    "karma-sinon-chai": "^1.3.1",
-    "karma-webpack": "^2.0.3",
     "less": "^2.7.2",
     "less-loader": "^2.2.3",
-    "mocha": "^3.4.2",
-    "phantomjs-prebuilt": "^2.1.14",
     "sinon": "^2.3.5",
     "sinon-chai": "^2.11.0",
     "sourcemap": "^0.1.0",
@@ -61,6 +50,9 @@
     "vue-loader": "^11.1.3",
     "vue-style-loader": "^2.0.3",
     "vue-template-compiler": "^2.2.0",
-    "webpack": "^1.13.2"
+    "webpack": "^1.13.2",
+    "webpack-dev-server": "1.14.0",
+    "webpack-merge": "^0.14.1",
+    "html-webpack-plugin": "^2.8.1"
   }
 }

readme.md

@@ -10,79 +10,116 @@ A vue component for tree structure. Support adding treenode/leafnode, editing no
 
 ```javascript
 <button @click="addNode">Add Node</button>
-<vue-tree-list :model="data" default-tree-node-name="new node" default-leaf-node-name="new leaf"></vue-tree-list>
+<vue-tree-list @click="onClick" :model="data" default-tree-node-name="new node" default-leaf-node-name="new leaf"></vue-tree-list>
 <button @click="getNewTree">Get new tree</button>
 <pre>
   {{newTree}}
 </pre>
 ...
-import { VueTreeList, Tree, TreeNode } from 'vue-tree-list'
+import { VueTreeList, Tree, TreeNode } from '../src'
 export default {
-    components: {
+  components: {
-      VueTreeList
+    VueTreeList
-    },
+  },
-    data () {
+  data () {
-      return {
+    return {
-        newTree: {},
+      newTree: {},
-        data: new Tree([
+      data: new Tree([
-          {
+        {
-            name: 'Node 1',
+          name: 'Node 1',
-            id: 1,
+          id: 1,
-            pid: 0,
+          pid: 0,
-            children: [
+          dragDisabled: true,
-              {
+          children: [
-                name: 'Node 1-2',
+            {
-                id: 2,
+              name: 'Node 1-2',
-                isLeaf: true,
+              id: 2,
-                pid: 1
+              isLeaf: true,
-              }
+              pid: 1
-            ]
-          },
-          {
-            name: 'Node 2',
-            id: 3,
-            pid: 0
-          },
-          {
-            name: 'Node 3',
-            id: 4,
-            pid: 0
-          }
-        ])
-      }
-    },
-    methods: {
-      addNode: function () {
-        var node = new TreeNode('new node', false)
-        if (!this.data.children) this.data.children = []
-        this.data.addChildren(node)
-      },
-
-      getNewTree: function () {
-        const vm = this
-        function _dfs (oldNode) {
-          let newNode = {}
-
-          newNode.name = oldNode.name
-          newNode.pid = oldNode.pid
-          newNode.isLeaf = oldNode.isLeaf
-          newNode.id = oldNode.id
-
-          if (oldNode.children && oldNode.children.length > 0) {
-            newNode.children = []
-            for (let i = 0, len = oldNode.children.length; i < len; i++) {
-              newNode.children.push(_dfs(oldNode.children[i]))
             }
+          ]
+        },
+        {
+          name: 'Node 2',
+          id: 3,
+          pid: 0,
+          dragDisabled: true
+        },
+        {
+          name: 'Node 3',
+          id: 4,
+          pid: 0
+        }
+      ])
+    }
+  },
+  methods: {
+    addNode: function () {
+      var node = new TreeNode({ name: 'new node', isLeaf: false })
+      if (!this.data.children) this.data.children = []
+      this.data.addChildren(node)
+    },
+
+    getNewTree: function () {
+      var vm = this
+      function _dfs (oldNode) {
+        var newNode = {}
+
+        for (var k in oldNode) {
+          if (k !== 'children' && k !== 'parent') {
+            newNode[k] = oldNode[k]
           }
-          return newNode
         }
 
-        vm.newTree = _dfs(vm.data)
+        if (oldNode.children && oldNode.children.length > 0) {
+          newNode.children = []
+          for (var i = 0, len = oldNode.children.length; i < len; i++) {
+            newNode.children.push(_dfs(oldNode.children[i]))
+          }
+        }
+        return newNode
       }
+
+      vm.newTree = _dfs(vm.data)
+    },
+
+    onClick(model) {
+      console.log(model)
     }
+  }
 }
 ```
 
 # props
-default-tree-node-name: Default name for new treenode.
+**default-tree-node-name**
-default-leaf-node-name: Default name for new leafnode.
+ 
+ Default name for new treenode.
+
+**default-leaf-node-name**
+
+Default name for new leafnode.
+
+# events
+**click**
+
+```javascript
+<vue-tree-list @click="onClick" ...
+...
+onClick(model) {
+  console.log(model)
+}
+...
+```
+
+# Forbid dragging
+Use `dragDisabled` to forbid dragging:
+```javascript
+data: new Tree([
+  {
+    name: 'Node 1',
+    id: 1,
+    pid: 0,
+    dragDisabled: true,
+  ...
+```
+

src/Tree.js

@@ -1,40 +1,50 @@
 // used to record treenode's change
-let Record = {}
+// let Record = {}
 // treenode's id
 let nodeId = 1
 
 /**
  * Tree data struct
  * Created by ayou on 2017/7/20.
- * @param name: treenode's name
+ * @param data: treenode's params
- * @param isLeaf: treenode is leaf node or not
+ *   name: treenode's name
- * @param id
+ *   isLeaf: treenode is leaf node or not
+ *   id: id
+ *   dragDisabled: decide if it can be dragged
  */
-const TreeNode = function (name, isLeaf, id) {
+const TreeNode = function (data) {
-  this.name = name
+  const { id, isLeaf } = data
+  // this.name = name
   this.id = (typeof id === 'undefined') ? ('new' + nodeId++) : id
   this.parent = null
-  this.pid = null
+  // this.pid = null
   this.children = null
   this.isLeaf = !!isLeaf
-}
 
-TreeNode.prototype.updateRecordProperty = function () {
+  // other params
-  if (!Record[this.id]) {
+  for (var k in data) {
-    Record[this.id] = {}
+    if (k !== 'id' && k !== 'children' && k !== 'isLeaf') {
+      this[k] = data[k]
+    }
   }
-
-  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.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()
+  // this.updateRecordProperty()
-  Record[this.id].modify = true
+  // Record[this.id].modify = true
 }
 
 TreeNode.prototype.addChildren = function (children, isNew) {
@@ -48,10 +58,10 @@ TreeNode.prototype.addChildren = function (children, isNew) {
       child.parent = this
       child.pid = this.id
 
-      if (isNew) {
+      // if (isNew) {
-        child.updateRecordProperty()
+        // child.updateRecordProperty()
-        Record[child.id].add = true
+        // Record[child.id].add = true
-      }
+      // }
     }
     this.children.concat(children)
   } else {
@@ -60,10 +70,10 @@ TreeNode.prototype.addChildren = function (children, isNew) {
     child.pid = this.id
     this.children.push(child)
 
-    if (isNew) {
+    // if (isNew) {
-      child.updateRecordProperty()
+      // child.updateRecordProperty()
-      Record[child.id].add = true
+      // Record[child.id].add = true
-    }
+    // }
   }
 }
 
@@ -73,8 +83,8 @@ TreeNode.prototype.remove = function () {
   const index = parent.findChildIndex(this)
   parent.children.splice(index, 1)
 
-  this.updateRecordProperty()
+  // this.updateRecordProperty()
-  Record[this.id].remove = true
+  // Record[this.id].remove = true
 }
 
 // remove child
@@ -121,10 +131,10 @@ TreeNode.prototype.moveInto = function (target) {
   }
   target.children.unshift(this)
 
-  this.updateRecordProperty()
+  // this.updateRecordProperty()
-  Record[this.id].targetId = target.id
+  // Record[this.id].targetId = target.id
-  Record[this.id].move = true
+  // Record[this.id].move = true
-  Record[this.id].moveType = 'inside'
+  // Record[this.id].moveType = 'inside'
 }
 
 TreeNode.prototype.findChildIndex = function (child) {
@@ -160,10 +170,10 @@ TreeNode.prototype.insertBefore = function (target) {
   const pos = target.parent.findChildIndex(target)
   target.parent.children.splice(pos, 0, this)
 
-  this.updateRecordProperty()
+  // this.updateRecordProperty()
-  Record[this.id].targetId = target.id
+  // Record[this.id].targetId = target.id
-  Record[this.id].move = true
+  // Record[this.id].move = true
-  Record[this.id].moveType = 'before'
+  // Record[this.id].moveType = 'before'
 }
 
 TreeNode.prototype.insertAfter = function (target) {
@@ -172,14 +182,14 @@ TreeNode.prototype.insertAfter = function (target) {
   const pos = target.parent.findChildIndex(target)
   target.parent.children.splice(pos + 1, 0, this)
 
-  this.updateRecordProperty()
+  // this.updateRecordProperty()
-  Record[this.id].targetId = target.id
+  // Record[this.id].targetId = target.id
-  Record[this.id].move = true
+  // Record[this.id].move = true
-  Record[this.id].moveType = 'after'
+  // Record[this.id].moveType = 'after'
 }
 
 function Tree(data) {
-  this.root = new TreeNode('root', false, 0)
+  this.root = new TreeNode({ name: 'root', isLeaf: false, id: 0 })
   this.initNode(this.root, data)
   return this.root
 }
@@ -188,7 +198,7 @@ Tree.prototype.initNode = function (node, data) {
   for (let i = 0, len = data.length; i < len; i++) {
     var _data = data[i]
 
-    var child = new TreeNode(_data.name, _data.isLeaf, _data.id)
+    var child = new TreeNode(_data)
     if (_data.children && _data.children.length > 0) {
       this.initNode(child, _data.children)
     }
@@ -198,4 +208,4 @@ Tree.prototype.initNode = function (node, data) {
 
 exports.Tree = Tree
 exports.TreeNode = TreeNode
-exports.Record = Record
+// exports.Record = Record

src/VueTreeList.vue

@@ -6,10 +6,8 @@
         @dragenter="dragEnterUp"
         @dragover='dragOverUp'
         @dragleave="dragLeaveUp"></div>
-
       <div class='tree-node' :id='model.id' :class="{'active': isDragEnterNode}"
-        draggable="true"
+        :draggable="!model.dragDisabled"
-        @click=""
         @dragstart='dragStart'
         @dragover='dragOver'
         @dragenter='dragEnter'
@@ -17,7 +15,8 @@
         @drop='drop'
         @dragend='dragEnd'
         @mouseover='mouseOver'
-        @mouseout='mouseOut'>
+        @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>
@@ -83,9 +82,10 @@
 
 <script>
   import { Tree, TreeNode } from './Tree.js'
-  import $ from 'jquery'
+  import { addHandler, removeHandler } from './tools.js'
+
+  let fromComp = null
 
-  let fromComp = ''
   export default {
     data: function () {
       return {
@@ -126,7 +126,7 @@
     },
     mounted () {
       const vm = this
-      $(window).on('keyup', function (e) {
+      addHandler(window, 'keyup', function (e) {
         // click enter
         if (e.keyCode === 13 && vm.editable) {
           vm.editable = false
@@ -134,7 +134,7 @@
       })
     },
     beforeDestroy () {
-      $(window).off('keyup')
+      removeHandler(window, 'keyup')
     },
     methods: {
       updateName (e) {
@@ -151,7 +151,8 @@
       setEditable () {
         this.editable = true
         this.$nextTick(() => {
-          $(this.$refs.nodeInput).trigger('focus')
+          this.$refs.nodeInput.focus()
+//          fireFocusEvent(this.$refs.nodeInput)
         })
       },
 
@@ -173,18 +174,31 @@
         this.isHover = false
       },
 
+      click() {
+        var node = this.$parent
+        var clickModel = this.model
+        while (node._props.model.name !== 'root') {
+          node = node.$parent
+        }
+        node.$emit('click', clickModel)
+      },
+
       addChild(isLeaf) {
         const name = isLeaf ? this.defaultLeafNodeName : this.defaultTreeNodeName
         this.expanded = true
-        var node = new TreeNode(name, isLeaf)
+        var node = new TreeNode({ name, isLeaf })
         this.model.addChildren(node, true)
       },
 
       dragStart(e) {
-        fromComp = this
+        if (!this.model.dragDisabled) {
-
+          fromComp = this
-        e.dataTransfer.effectAllowed = 'move'
+          // for firefox
-        return true
+          e.dataTransfer.setData("data","data");
+          e.dataTransfer.effectAllowed = 'move'
+          return true
+        }
+        return false
       },
       dragEnd(e) {
         fromComp = null
@@ -194,20 +208,21 @@
         return true
       },
       dragEnter(e) {
-        if (this.model.isLeaf) {
+        if (!fromComp) return
-          return
+        if (this.model.isLeaf) return
-        }
         this.isDragEnterNode = true
       },
       dragLeave(e) {
         this.isDragEnterNode = false
       },
       drop(e) {
+        if (!fromComp) return
         fromComp.model.moveInto(this.model)
         this.isDragEnterNode = false
       },
 
       dragEnterUp () {
+        if (!fromComp) return
         this.isDragEnterUp = true
       },
       dragOverUp (e) {
@@ -215,14 +230,17 @@
         return true
       },
       dragLeaveUp () {
+        if (!fromComp) return
         this.isDragEnterUp = false
       },
       dropUp () {
+        if (!fromComp) return
         fromComp.model.insertBefore(this.model)
         this.isDragEnterUp = false
       },
 
       dragEnterBottom () {
+        if (!fromComp) return
         this.isDragEnterBottom = true
       },
       dragOverBottom (e) {
@@ -230,9 +248,11 @@
         return true
       },
       dragLeaveBottom () {
+        if (!fromComp) return
         this.isDragEnterBottom = false
       },
       dropBottom () {
+        if (!fromComp) return
         fromComp.model.insertAfter(this.model)
         this.isDragEnterBottom = false
       }

src/index.js

@@ -4,4 +4,4 @@
 exports.VueTreeList = require('./VueTreeList.vue')
 exports.TreeNode = require('./Tree.js').TreeNode
 exports.Tree = require('./Tree.js').Tree
-exports.Record = require('./Tree.js').Record
+// exports.Record = require('./Tree.js').Record

src/tools.js

@@ -0,0 +1,31 @@
+/**
+ * Created by ayou on 18/2/6.
+ */
+
+var handlerCache
+
+exports.addHandler = function(element, type, handler) {
+  handlerCache = handler
+  if (element.addEventListener) {
+    element.addEventListener(type, handler, false);
+  } else if (element.attachEvent) {
+    element.attachEvent("on" + type, handler);
+  } else {
+    element["on" + type] = handler;
+  }
+}
+
+exports.removeHandler = function (element, type) {
+  if (element.removeEventListener) {
+    element.removeEventListener(type, handlerCache, false);
+  } else if (element.detachEvent) {
+    element.detachEvent("on" + type, handlerCache);
+  } else {
+    element["on" + type] = null;
+  }
+}
+
+// exports.fireFocusEvent = function (ele) {
+//   var event = new FocusEvent()
+//   ele.dispatch(event)
+// }