Review: tooltip/tree/typography/upload

examples/docs/en-US/quickstart.md

@@ -19,7 +19,7 @@ Create a new project, and its structure should be
 |- index.html  --------------- HTML template
 |- package.json  ------------- npm config
 |- README.md  ---------------- readme
-|- webpack.config.json  ------ webpack config
+|- webpack.config.js  ------ webpack config
 ```
 
 Typical configurations for these config files are:

examples/docs/en-US/tooltip.md

@@ -1,22 +1,43 @@
-# Tooltips 
-
-
-Display prompt information for mouse hover.
-
-
----
-
-##How to use
+<script>
+  export default {
+    data() {
+      return {
+        disabled: false
+      };
+    }
+  };
+</script>
 
-There are 9 ways to display your prompt information multi-formly. You could get it by the demo below.
+<style>
+  .demo-tooltip.demo-en-US {
+    &:first-of-type .source {
+      .el-button {
+        width: 110px;
+      }
+    }
+    .box {
+      .left {
+        float: left;
+        width: 110px;
+      }
+
+      .right {
+        float: right;
+        width: 110px;
+      }
+    }
+  }
+</style>
 
+## Tooltip
 
+Display prompt information for mouse hover.
 
-:::demo 
-Use attribute `content` to set the display content when hover. The attribute `placement` determines the position of the tooltip. Its value is `[oritation]-[Alignment]` with four oritations `top`,`left`, `right`,`bottom` and three alignments `start`,`end`, null, default alignment is null. 
-Look at the code `placement="left-end"`,  with this code in tooltip component you will see the prompt information will display on the left to the element which you are hovering and bottom of the tooltip aligns with the bottom of the element which you are hovering.
+### Basic usage
 
+Tooltip has 9 placements.
 
+:::demo Use attribute `content` to set the display content when hover. The attribute `placement` determines the position of the tooltip. Its value is `[orientation]-[alignment]` with four orientations `top`, `left`, `right`, `bottom` and three alignments `start`, `end`, `null`, and the default alignment is null. Take `placement="left-end"` for example, Tooltip will display on the left of the element which you are hovering and the bottom of the tooltip aligns with the bottom of the element.
 ```html
 <style>
   .box {
@@ -28,12 +49,12 @@ Look at the code `placement="left-end"`,  with this code in tooltip component yo
 
     .left {
       float: left;
-      width: 60px;
+      width: 110px;
     }
 
     .right {
       float: right;
-      width: 60px;
+      width: 110px;
     }
 
     .bottom {
@@ -49,6 +70,10 @@ Look at the code `placement="left-end"`,  with this code in tooltip component yo
     .right .el-tooltip__popper {
       padding: 8px 10px;
     }
+    
+    .el-button {
+      width: 110px;
+    }
   }
 </style>
 
@@ -105,12 +130,9 @@ Look at the code `placement="left-end"`,  with this code in tooltip component yo
 
 ### Theme
 
-Tooltip has two themes：`dark` and `light`。
-
-
-:::demo 
-Set `effect` to modify theme, default value is `dark`.
+Tooltip has two themes: `dark` and `light`。
 
+:::demo Set `effect` to modify theme, and the default value is `dark`.
 ```html
 <el-tooltip content="Top center" placement="top">
   <el-button>Dark</el-button>
@@ -121,14 +143,11 @@ Set `effect` to modify theme, default value is `dark`.
 ```
 :::
 
-
-
 ### More Content
 
-Display multiple lines of text or set format of the text . 
+Display multiple lines of text and set their format. 
 
-:::demo 
-Distribute task of the attribute `content` to the ‘Signature’ `slot`  as an alternative.
+:::demo Override attribute `content` of `el-tooltip` by adding a slot named `content`.
 ```html
 <el-tooltip placement="top">
   <div slot="content">multiple lines<br/>second line</div>
@@ -137,17 +156,15 @@ Distribute task of the attribute `content` to the ‘Signature’ `slot`  as an
 ```
 :::
 
-### Advanced Extensions
+### Advanced usage
 
-In addition to  basic usages, there are some attributes that allow you to customize your own ：
+In addition to basic usages, there are some attributes that allow you to customize your own:
 
-`transition` attribute allows you to customerize the animation in which the tooltip shows or hides , default value is `fade-in-linear`.
+`transition` attribute allows you to customize the animation in which the tooltip shows or hides, and the default value is `fade-in-linear`.
 
-`disabled` attribute allows you disable the `tooltip` 's prompt function. You just only set it to `boolean` type with value `true`.
+`disabled` attribute allows you to disable `tooltip`. You just need set it to `true`.
 
-Actually it is an extension based on [Vue-popper](https://github.com/element-component/vue-popper), you can use any attribute that are allowed in  Vue-popper.
-
-Of cause, component Tooltip is powerful. You can see API below.
+In fact, Tooltip is an extension based on [Vue-popper](https://github.com/element-component/vue-popper), you can use any attribute that are allowed in Vue-popper.
 
 :::demo
 ```html
@@ -175,16 +192,16 @@ Of cause, component Tooltip is powerful. You can see API below.
 
 
 ### Attributes
-| Attribute               | Description                                                     | Type              | Options      | Default |
-|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
-|  effect        |  themes authrozied  | String            | `dark`, `light`  | dark  |
-|  content        | display content,  `slot#content` insert it into DOM by `slot#content` | String            | — | — |
-|  placement        | position of Tooltip   | String           |  `top`, `top-start`, `top-end`, `bottom`, `bottom-start`, `bottom-end`, `left`, `left-start`, `left-end`, `right`, `right-start`, `right-end` |  bottom |
-|  value(v-model)        |  status show or not | Boolean           | — |  false |
-|  disabled       |  Tooltip work or not  | Boolean           | — |  false |
-|  offset        |  offset of the position   | Number           | — |  0 |
-|  transition     |  define gradient animation    | String             | — | `fade-in-linear` |
-|  visible-arrow   |  display Tooltip arrow or not, more info  go to [Vue-popper](https://github.com/element-component/vue-popper) page | Boolean | — | true |
-|  options        | [popper.js](https://popper.js.org/documentation.html) paramters | Object            | refer to [popper.js](https://popper.js.org/documentation.html) doc | `{ boundariesElement: 'body', gpuAcceleration: false }` |
-| openDelay | show in delay, unit is millisecond | Number | — | 0 |
-
+| Attribute      | Description          | Type      | Accepted Values       | Default  |
+|----------------|---------|-----------|-------------|--------|
+|  effect   |  Tooltip theme  | string   | dark/light  | dark  |
+|  content  | display content, can be overridden by `slot#content` | String   | — | — |
+|  placement | position of Tooltip   | string    |  top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |  bottom |
+|  value(v-model) | visibility of Tooltip | boolean           | — |  false |
+|  disabled       |  whether Tooltip is disabled  | boolean    | — |  false |
+|  offset        |  offset of the Tooltip   | number    | — |  0 |
+|  transition     |  animation name | string             | — | `fade-in-linear` |
+|  visible-arrow   |  whether an arrow is displayed. For more information, check [Vue-popper](https://github.com/element-component/vue-popper) page | boolean | — | true |
+|  options        | [popper.js](https://popper.js.org/documentation.html) parameters | Object            | refer to [popper.js](https://popper.js.org/documentation.html) doc | `{ boundariesElement: 'body', gpuAcceleration: false }` |
+| openDelay | delay of appearance, in millisecond | number | — | 0 |
+| manual | whether to control Tooltip manually. `mouseenter` and `mouseleave` won't have effects if set to `true`事件将不会生效 | boolean | — | false |

examples/docs/en-US/tree.md

@@ -1,15 +1,3 @@
-<style>
-  .leaf {
-    width: 20px;
-    background: #ddd;
-  }
-
-  .folder {
-    width: 20px;
-    background: #888;
-  }
-</style>
-
 <script>
   var data = [{
     label: 'Level one 1',
@@ -58,16 +46,21 @@
 
   export default {
     methods: {
+      handleCheckChange(data, checked, indeterminate) {
+        console.log(data, checked, indeterminate);
+      },
+      handleNodeClick(data) {
+        console.log(data);
+      },
       loadNode(node, resolve) {
-        console.log(node);
         if (node.level === -1) {
-          return resolve([{ name: 'Root1' }, { name: 'Root2' }]);
+          return resolve([{ name: 'region1' }, { name: 'region2' }]);
         }
         if (node.level > 4) return resolve([]);
         var hasChild;
-        if (node.data.name === 'Root1') {
+        if (node.data.name === 'region1') {
           hasChild = true;
-        } else if (node.data.name === 'Root2') {
+        } else if (node.data.name === 'region2') {
           hasChild = false;          
         } else {
           hasChild = Math.random() > 0.5;
@@ -103,15 +96,15 @@
 
 ## Tree 
 
-Display information can be unfolded or folded in a clear hierarchy.
+Display a set of data with hierarchies.
 
-### How to use
+### Basic usage
 
-Display the basic tree structure.
+Basic tree structure.
 
 ::: demo
 ```html
-<el-tree :data="data" :props="defaultProps"></el-tree>
+<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
 
 <script>
   export default {
@@ -142,19 +135,31 @@ Display the basic tree structure.
           label: 'label'
         }
       };
+    },
+    methods: {
+      handleNodeClick(data) {
+        console.log(data);
+      }
     }
   };
 </script>
 ```
 :::
 
-### Options
+### Selectable
 
-Used for level selection. In the following example, the layer data is unpredictable when the data is clicked(ps: the data is acquired when clicked the current layer). If there is no lower layer data, the pull-down button is disappeared.
+Used for node selection. In the following example, data for each layer is acquired after being clicked. If there is no child data, the expanding icon will disappear.
 
 ::: demo
 ```html
-<el-tree :data="regions" :props="props" :load="loadNode" lazy show-checkbox></el-tree>
+<el-tree
+  :data="regions"
+  :props="props"
+  :load="loadNode"
+  lazy
+  show-checkbox
+  @check-change="handleCheckChange">
+</el-tree>
 
 <script>
   export default {
@@ -173,18 +178,27 @@ Used for level selection. In the following example, the layer data is unpredicta
       };
     },
     methods: {
-      getCheckedNodes() {
-        console.log(this.$refs.tree.getCheckedNodes(true));
+      handleCheckChange(data, checked, indeterminate) {
+        console.log(data, checked, indeterminate);
+      },
+      handleNodeClick(data) {
+        console.log(data);
       },
-
       loadNode(node, resolve) {
-        console.log(node);
         if (node.level === -1) {
-          return resolve([{ name: 'Root1' }, { name: 'Root2' }]);
+          return resolve([{ name: 'region1' }, { name: 'region2' }]);
         }
-        var hasChild = Math.random() > 0.5;
         if (node.level > 4) return resolve([]);
 
+        var hasChild;
+        if (node.data.name === 'region1') {
+          hasChild = true;
+        } else if (node.data.name === 'region2') {
+          hasChild = false;
+        } else {
+          hasChild = Math.random() > 0.5;
+        }
+
         setTimeout(() => {
           var data;
           if (hasChild) {
@@ -207,33 +221,31 @@ Used for level selection. In the following example, the layer data is unpredicta
 :::
 
 ### Attributes
-
-| Attribute      | Description          | Type      | Options                           | Default |
+| Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| data     | Show the data | array | — | — |
-| props | Configuration options, to see the following table | object | — | — |
-| load | Method for loading subtree data | function(node, resolve) | — | — |
+| data     | tree data | array | — | — |
+| props | configuration options, see the following table | object | — | — |
+| load | method for loading subtree data | function(node, resolve) | — | — |
+| show-checkbox | whether node is selectable | boolean | — | false |
+| render-content | render function for tree node | Function(h, { node } | - | - |
+| highlight-current | whether current node is highlighted | boolean | - | false |
 
 ### props
-
-| Attribute      | Description          | Type      | Options                           | Default  |
+| Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| label | Specifies that a node label is a property value of a node object | string | — | — |
-| children | The specified subtree is a property value of the node object | string | — | — |
+| label | specify which key of node object is used as the node's label | string | — | — |
+| children | specify which key of node object is used as the node's subtree | string | — | — |
 
 ### Method
-
 `Tree` has the following method, which returns the currently selected array of nodes.
-
-| Method      | Description    | Parameter      |
+| Method      | Description    | Parameters     |
 |---------- |-------- |---------- |
-| getCheckedNodes | If the node can be selected(`show-checkbox` is `true`), it returns the currently selected array of nodes | Accept a boolean type parameter whose default value is `false`. <br>If the parameter is `true`, it only returns the currently selected array of sub-nodes.|
+| getCheckedNodes | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of nodes | Accept a boolean type parameter whose default value is `false`. <br>If the parameter is `true`, it only returns the currently selected array of sub-nodes.|
 
 ### Events
-
-| Event      | Description    | Callback      |
+| Event Name | Description | Parameters |
 |---------- |-------- |---------- |
-| node-click | Callback when the node is clicked | The instance that corresponds to the node in the array passed to the `data` property |
-| check-change | Callback when the selected state of the node changes | Three parameters: <br>The instance that corresponds to the node in the array passed to the `data` property, <br>whether the node itself is selected, <br>whether there are selected nodes in the subtree of the node|
+| node-click | triggers when a node is clicked | three parameters: <br>node object corresponding to the node clicked, <br>`node` property of TreeNode, <br>TreeNode itself |
+| check-change | triggers when the selected state of the node changes | three parameters: <br>node object corresponding to the node whose selected state is changed, <br>whether the node is selected, <br>whether node's subtree has selected nodes |
 
 

examples/docs/en-US/typography.md

@@ -1,77 +1,3 @@
-<style>
-  .demo-typo-box {
-    height: 200px;
-    width: 200px;
-    position: relative;
-    border: 1px solid #eaeefb;
-    font-size: 40px;
-    color: #1f2d3d;
-    text-align: center;
-    line-height: 162px;
-    padding-bottom: 36px;
-    box-sizing: border-box;
-    display: inline-block;
-    margin-right: 17px;
-    border-radius: 4px;
-
-    .name {
-      position: absolute;
-      bottom: 0;
-      width: 100%;
-      height: 35px;
-      border-top: 1px solid #eaeefb;
-      font-size: 14px;
-      color: #8492a6;
-      line-height: 35px;
-      text-align: left;
-      text-indent: 10px;
-      font-family: 'Helvetica Neue';
-    }
-  }
-  .demo-typo-size {
-    .h1 {
-      font-size: 20px;
-    }
-    .h2 {
-      font-size: 18px;
-    }
-    .h3 {
-      font-size: 16px;
-    }
-    .text-regular {
-      font-size: 14px;
-    }
-    .text-small {
-      font-size: 13px;
-    }
-    .text-smaller {
-      font-size: 12px;
-    }
-    .color-dark-light {
-      color: #99a9bf;
-    }
-  }
-  .typo-PingFang {
-    font-family: 'PingFang SC';
-  }
-  .typo-Hiragino {
-    font-family: 'Hiragino Sans GB';
-  }
-  .typo-Microsoft {
-    font-family: 'Microsoft YaHei';
-  }
-  /* English */
-  .typo-Helvetica-Neue {
-    font-family: 'Helvetica Neue';
-  }
-  .typo-Helvetica {
-    font-family: 'Helvetica';
-  }
-  .typo-Arial {
-    font-family: 'Arial';
-  }
-</style>
-
 ## Typography
 
 We create a font convention to ensure the best presentation across different platforms.
@@ -142,7 +68,7 @@ font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Micros
       <td class="color-dark-light">13px Extra Small</td>
     </tr>
     <tr>
-      <td class="text-smaller">help text</td>
+      <td class="text-smaller">Supplementary text</td>
       <td class="text-smaller">Build with Element</td>
       <td class="color-dark-light">12px Extra Extra Small</td>
     </tr>

examples/docs/en-US/upload.md

@@ -1,21 +1,45 @@
+<script>
+  export default {
+    methods: {
+      handleChange(file, fileList, event) {
+        console.log(file, fileList, event);
+      },
+      handleRemove(file, fileList) {
+        console.log(file, fileList);
+      },
+      beforeUpload(file) {
+        if (file.size > 40000000) {
+          console.warn(file.name + ' is too large!');
+          return false;
+        }
+        return true;
+      },
+      handlePreview(file) {
+        console.log(file);
+      },
+      handleSuccess(file, fileList) {
+        console.log(file, fileList);
+      },
+      handleError(err, file, fileList) {
+        console.log(err);
+      }
+    }
+  }
+</script>
 ## Upload
 
-
-Upload your files by `click` or `drag` event
+Upload files by clicking or drag-and-drop
 
 ### Click to upload files
 
-Add `slot` attribute to customize the type of upload button and text hints.
-
-:::demo
-
+:::demo Customize upload button type and text using `slot`.
 ```html
 <el-upload
-  action="http://jsonplaceholder.typicode.com/"
+  action="//jsonplaceholder.typicode.com/posts/"
   :on-preview="handlePreview"
   :on-remove="handleRemove">
-  <el-button size="small" type="primary">click to upload</el-button>
-  <div class="el-upload__tip" slot="tip">only jpg/png allowed,and the size must be less than 500kb</div>
+  <el-button size="small" type="primary">Click to upload</el-button>
+  <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
 </el-upload>
 <script>
   export default {
@@ -30,20 +54,16 @@ Add `slot` attribute to customize the type of upload button and text hints.
   }
 </script>
 ```
-
 :::
 
 ### Drag to upload
 
-You can drag your file to certain field to upload it.
-
-Specifying the `type` attribute as `drag` will change the upload control to a drag-and-drop style. Additionally, you can use the `multiple` attribute to control whether multiple-selections are supported or not. And `on-preview` and `on-remove` are hook functions that will be called after clicked on the uploaded file link and after clicked to remove the uploaded file, respectively.
-
-:::demo
+You can drag your file to a certain area to upload it.
 
+:::demo Specifying the `type` attribute as `drag` will change the upload control to a drag-and-drop style. Additionally, you can use the `multiple` attribute to control whether uploading multiple files is permitted. `on-preview` and `on-remove` are hook functions that will be called after clicking on the uploaded file link and after clicking to remove the uploaded file, respectively.
 ```html
 <el-upload
-  action="http://jsonplaceholder.typicode.com/"
+  action="//jsonplaceholder.typicode.com/posts/"
   type="drag"
   :multiple="true"
   :on-preview="handlePreview"
@@ -52,8 +72,8 @@ Specifying the `type` attribute as `drag` will change the upload control to a dr
   :on-error="handleError"
 >
   <i class="el-icon-upload"></i>
-  <div class="el-dragger__text">drag file to here or <em>click to upload</em></div>
-  <div class="el-upload__tip" slot="tip">only jpg/png allowed,and the size must be less than 500kb</div>
+  <div class="el-dragger__text">Drop file here or <em>click to upload</em></div>
+  <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
 </el-upload>
 <script>
   export default {
@@ -68,26 +88,24 @@ Specifying the `type` attribute as `drag` will change the upload control to a dr
   }
 </script>
 ```
+:::
 
 ### Upload single image
 
-This mode is specifically for uploading image, and the thumbnail will display in origin place.
-
-`thumbnail-mode` attribute allows you to force the upload content to image only, and can display the thumbnail of the uploaded image.
-
-:::demo
+This mode is specifically for image uploading, and the thumbnail will display in the origin place.
 
+:::demo `thumbnail-mode` attribute allows you to force the upload content to image only, and can display the thumbnail of the uploaded image.
 ```html
 <el-upload
-  action="http://jsonplaceholder.typicode.com/"
+  action="//jsonplaceholder.typicode.com/posts/"
   type="drag"
   :thumbnail-mode="true"
   :on-preview="handlePreview"
   :on-remove="handleRemove"
 >
   <i class="el-icon-upload"></i>
-  <div class="el-dragger__text">drag file to here or <em>click to upload</em></div>
-  <div class="el-upload__tip" slot="tip">only jpg/png allowed,and the size must be less than 500kb</div>
+  <div class="el-dragger__text">Drop file here or <em>click to upload</em></div>
+  <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
 </el-upload>
 <script>
   export default {
@@ -102,26 +120,28 @@ This mode is specifically for uploading image, and the thumbnail will display in
   }
 </script>
 ```
-
 :::
 
 ### Attributes
-
-Attribute| Description | Type | options | Default
+Attribute      | Description          | Type      | Accepted Values       | Default
 ----| ----| ----| ----| ----
-action | required, the location you upload to | string | --- |---
-headers | optional, set request headers | object | --- | ---
-multiple | optional, whether multiple-selections are supported or not| boolean | --- | ---
-file | optional, The field name of the uploaded file | string | --- | ---
-with-credentials | send cookies or not | boolean | --- | ---
-show-uploadList | show the uploaded file list or not | boolean | --- |---
-type | the type of upload control | string | select, drag | select
-accept | optional, limits the type of upload file, but if the upload type is `drag`, you can upload all the file types | string | --- | ---
-on-preview | optional, hook function when click the uploaded files | function(file) | --- | ---
-on-remove | optional, hook function when remove the files | function(file, fileList) | --- | ---
-on-success | optional, hook function when upload files successfully | function(file, fileList) | --- | ---
-on-error | optional, hook function when some errors occured | function(err, file, fileList) | --- | ---
-before-upload | optional, hook function before upload the file, the parameter is the file that uploaded, if the hook function return `false` or `Promise` value, it will end upload progress | function(file) | --- | ---
-thumbnail-mode | whether image mode is set or not, the image mode will display the picture thumbnails | boolean | --- | false
-
-
+action | required, request URL | string | — | —
+headers | request headers | object | — | —
+multiple | whether uploading multiple files is permitted | boolean | — | —
+data | additions options of request | object | — | —
+name | key name for uploaded file | string | — | file
+with-credentials | whether cookies are sent | boolean | — |false
+show-upload-list | whether to show the uploaded file list | boolean | — | true
+type | type of Upload | string | select/drag | select
+accept | accepted [file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), will not work when `thumbnail-mode` is `true` | string | — | —
+on-preview | hook function when clicking the uploaded files | function(file) | — | —
+on-remove | hook function when files are removed | function(file, fileList) | — | —
+on-success | hook function when uploaded successfully | function(response, file, fileList) | — | —
+on-error | hook function when some errors occurs | function(err, response, file) | — | —
+before-upload | hook function before uploading with the file to be uploaded as its parameter. If `false` or a `Promise` is returned, uploading will be aborted | function(file) | — | —
+thumbnail-mode | whether thumbnail is displayed | boolean | — | false
+
+### Events
+| Event Name | Description | Parameters |
+|---------- |-------- |---------- |
+| clearFiles | clear the uploaded file list | — |

examples/docs/zh-CN/quickstart.md

@@ -19,7 +19,7 @@
 |- index.html  --------------- HTML 模板
 |- package.json  ------------- npm 配置文件
 |- README.md  ---------------- 项目帮助文档
-|- webpack.config.json  ------ webpack 配置文件
+|- webpack.config.js  ------ webpack 配置文件
 ```
 
 几个配置文件的典型配置如下：

examples/docs/zh-CN/tooltip.md

@@ -164,14 +164,14 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`。
 ### Attributes
 | 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |
 |--------------------|----------------------------------------------------------|-------------------|-------------|--------|
-|  effect        |  默认提供的主题  | String            | `dark`, `light`  | dark  |
+|  effect        |  默认提供的主题  | String            | dark/light | dark  |
 |  content        |  显示的内容，也可以通过 `slot#content` 传入 DOM  | String            | — | — |
-|  placement        |  Tooltip 的出现位置  | String           |  `top`, `top-start`, `top-end`, `bottom`, `bottom-start`, `bottom-end`, `left`, `left-start`, `left-end`, `right`, `right-start`, `right-end` |  bottom |
-|  value(v-model)        |  状态是否可见  | Boolean           | — |  false |
+|  placement        |  Tooltip 的出现位置  | String           |  top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |  bottom |
+|  value(v-model) |  状态是否可见  | Boolean           | — |  false |
 |  disabled       |  Tooltip 是否可用  | Boolean           | — |  false |
 |  offset        |  出现位置的偏移量  | Number           | — |  0 |
 |  transition     |  定义渐变动画      | String             | — | `fade-in-linear` |
 |  visible-arrow   |  是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true |
 |  options        | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object            | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
 | openDelay | 延迟出现，单位毫秒 | Number | — | 0 |
-| manual | 手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效 | Boolean | true,false| false |
+| manual | 手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效 | Boolean | — | false |

examples/docs/zh-CN/tree.md

@@ -147,6 +147,11 @@
           label: 'label'
         }
       };
+    },
+    methods: {
+      handleNodeClick(data) {
+        console.log(data);
+      }
     }
   };
 </script>
@@ -228,7 +233,6 @@
 :::
 
 ### Attributes
-
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | data     | 展示数据 | array | — | — |
@@ -239,7 +243,6 @@
 | highlight-current | 是否高亮当前选中节点，默认值是 false。| boolean | - | false |
 
 ### props
-
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | label | 指定节点标签为节点对象的某个属性值 | string | — | — |
@@ -247,7 +250,6 @@
 
 ### 方法
 `Tree` 拥有如下方法，返回目前被选中的节点数组：
-
 | 方法名 | 说明 | 参数 |
 |------|--------|------|
 | getCheckedNodes | 若节点可被选择（即 `show-checkbox` 为 `true`），<br>则返回目前被选中的节点所组成的数组 | 接收一个 boolean 类型的参数，若为 `true` 则<br>仅返回被选中的叶子节点，默认值为 `false` |

examples/docs/zh-CN/upload.md

@@ -134,7 +134,6 @@
 :::
 
 ### Upload Attribute
-
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | action | 必选参数, 上传的地址 | string | — | — |
@@ -154,7 +153,6 @@
 | thumbnail-mode | 是否设置为图片模式，该模式下会显示图片缩略图 | boolean | — | false |
 
 ### Upload Methods
-
 | 方法名      | 说明          | 参数 |
 |---------- |-------------- | - |
 | clearFiles | 清空已上传的文件列表 | — |