github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #1035 from Leopoldthecoder/master 

Review: tooltip/tree/typography/upload
pull/1049/head
杨奕 2016-11-14 11:48:37 +08:00 committed by GitHub
parent 21d3cb4c82 f2aa74965f
commit b207d74515
9 changed files with 196 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/docs/en-US/quickstart.md
View File

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

107
examples/docs/en-US/tooltip.md
View File

@ -1,22 +1,43 @@
# Tooltips <script>
export default {
data() {
return {
disabled: false
};
}
};
</script>
<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. Display prompt information for mouse hover.
### Basic usage
--- Tooltip has 9 placements.
##How to use
There are 9 ways to display your prompt information multi-formly. You could get it by the demo below.
:::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.
:::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 ```html
<style> <style>
.box { .box {
@ -28,12 +49,12 @@ Look at the code `placement="left-end"`, with this code in tooltip component yo
.left { .left {
float: left; float: left;
width: 60px; width: 110px;
} }
.right { .right {
float: right; float: right;
width: 60px; width: 110px;
} }
.bottom { .bottom {
@ -49,6 +70,10 @@ Look at the code `placement="left-end"`, with this code in tooltip component yo
.right .el-tooltip__popper { .right .el-tooltip__popper {
padding: 8px 10px; padding: 8px 10px;
} }
.el-button {
width: 110px;
}
} }
</style> </style>
@ -105,12 +130,9 @@ Look at the code `placement="left-end"`, with this code in tooltip component yo
### Theme ### Theme
Tooltip has two themes：`dark` and `light`。 Tooltip has two themes: `dark` and `light`。
:::demo
Set `effect` to modify theme, default value is `dark`.
:::demo Set `effect` to modify theme, and the default value is `dark`.
```html ```html
<el-tooltip content="Top center" placement="top"> <el-tooltip content="Top center" placement="top">
<el-button>Dark</el-button> <el-button>Dark</el-button>
@ -121,14 +143,11 @@ Set `effect` to modify theme, default value is `dark`.
``` ```
::: :::
### More Content ### More Content
Display multiple lines of text or set format of the text . Display multiple lines of text and set their format.
:::demo :::demo Override attribute `content` of `el-tooltip` by adding a slot named `content`.
Distribute task of the attribute `content` to the ‘Signature’ `slot` as an alternative.
```html ```html
<el-tooltip placement="top"> <el-tooltip placement="top">
<div slot="content">multiple lines<br/>second line</div> <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. 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.
Of cause, component Tooltip is powerful. You can see API below.
:::demo :::demo
```html ```html
@ -175,16 +192,16 @@ Of cause, component Tooltip is powerful. You can see API below.
### Attributes ### Attributes
| Attribute | Description | Type | Options | Default | | Attribute | Description | Type | Accepted Values | Default |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------| |----------------|---------|-----------|-------------|--------|
| effect | themes authrozied | String | `dark`, `light` | dark | | effect | Tooltip theme | string | dark/light | dark |
| content | display content, `slot#content` insert it into DOM by `slot#content` | String | — | — | | 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 | | 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 | | value(v-model) | visibility of Tooltip | boolean | — | false |
| disabled | Tooltip work or not | Boolean | — | false | | disabled | whether Tooltip is disabled | boolean | — | false |
| offset | offset of the position | Number | — | 0 | | offset | offset of the Tooltip | number | — | 0 |
| transition | define gradient animation | String | — | `fade-in-linear` | | transition | animation name | 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 | | 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) paramters | Object | refer to [popper.js](https://popper.js.org/documentation.html) doc | `{ boundariesElement: 'body', gpuAcceleration: false }` | | 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 | show in delay, unit is millisecond | Number | — | 0 | | 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 |

104
examples/docs/en-US/tree.md
View File

@ -1,15 +1,3 @@
<style>
.leaf {
width: 20px;
background: #ddd;
}
.folder {
width: 20px;
background: #888;
}
</style>
<script> <script>
var data = [{ var data = [{
label: 'Level one 1', label: 'Level one 1',
@ -58,16 +46,21 @@
export default { export default {
methods: { methods: {
handleCheckChange(data, checked, indeterminate) {
console.log(data, checked, indeterminate);
},
handleNodeClick(data) {
console.log(data);
},
loadNode(node, resolve) { loadNode(node, resolve) {
console.log(node);
if (node.level === -1) { if (node.level === -1) {
return resolve([{ name: 'Root1' }, { name: 'Root2' }]); return resolve([{ name: 'region1' }, { name: 'region2' }]);
} }
if (node.level > 4) return resolve([]); if (node.level > 4) return resolve([]);
var hasChild; var hasChild;
if (node.data.name === 'Root1') { if (node.data.name === 'region1') {
hasChild = true; hasChild = true;
} else if (node.data.name === 'Root2') { } else if (node.data.name === 'region2') {
hasChild = false; hasChild = false;
} else { } else {
hasChild = Math.random() > 0.5; hasChild = Math.random() > 0.5;
@ -103,15 +96,15 @@
## Tree ## 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 ::: demo
```html ```html
<el-tree :data="data" :props="defaultProps"></el-tree> <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
<script> <script>
export default { export default {
@ -142,19 +135,31 @@ Display the basic tree structure.
label: 'label' label: 'label'
} }
}; };
},
methods: {
handleNodeClick(data) {
console.log(data);
}
} }
}; };
</script> </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 ::: demo
```html ```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> <script>
export default { export default {
@ -173,18 +178,27 @@ Used for level selection. In the following example, the layer data is unpredicta
}; };
}, },
methods: { methods: {
getCheckedNodes() { handleCheckChange(data, checked, indeterminate) {
console.log(this.$refs.tree.getCheckedNodes(true)); console.log(data, checked, indeterminate);
},
handleNodeClick(data) {
console.log(data);
}, },
loadNode(node, resolve) { loadNode(node, resolve) {
console.log(node);
if (node.level === -1) { 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([]); 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(() => { setTimeout(() => {
var data; var data;
if (hasChild) { if (hasChild) {
@ -207,33 +221,31 @@ Used for level selection. In the following example, the layer data is unpredicta
::: :::
### Attributes ### Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Attribute | Description | Type | Options | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| data | Show the data | array | — | — | | data | tree data | array | — | — |
| props | Configuration options, to see the following table | object | — | — | | props | configuration options, see the following table | object | — | — |
| load | Method for loading subtree data | function(node, resolve) | — | — | | 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 ### props
| Attribute | Description | Type | Accepted Values | Default |
| Attribute | Description | Type | Options | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| label | Specifies that a node label is a property value of a node object | string | — | — | | label | specify which key of node object is used as the node's label | string | — | — |
| children | The specified subtree is a property value of the node object | string | — | — | | children | specify which key of node object is used as the node's subtree | string | — | — |
### Method ### Method
`Tree` has the following method, which returns the currently selected array of nodes. `Tree` has the following method, which returns the currently selected array of nodes.
| Method | Description | Parameters |
| Method | Description | Parameter |
|---------- |-------- |---------- | |---------- |-------- |---------- |
| 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 ### Events
| Event Name | Description | Parameters |
| Event | Description | Callback |
|---------- |-------- |---------- | |---------- |-------- |---------- |
| node-click | Callback when the node is clicked | The instance that corresponds to the node in the array passed to the `data` property | | 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 | 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| | 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 |

76
examples/docs/en-US/typography.md
View File

@ -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 ## Typography
We create a font convention to ensure the best presentation across different platforms. 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> <td class="color-dark-light">13px Extra Small</td>
</tr> </tr>
<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="text-smaller">Build with Element</td>
<td class="color-dark-light">12px Extra Extra Small</td> <td class="color-dark-light">12px Extra Extra Small</td>
</tr> </tr>

108
examples/docs/en-US/upload.md
View File

@ -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
Upload files by clicking or drag-and-drop
Upload your files by `click` or `drag` event
### Click to upload files ### Click to upload files
Add `slot` attribute to customize the type of upload button and text hints. :::demo Customize upload button type and text using `slot`.
:::demo
```html ```html
<el-upload <el-upload
action="http://jsonplaceholder.typicode.com/" action="//jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview" :on-preview="handlePreview"
:on-remove="handleRemove"> :on-remove="handleRemove">
<el-button size="small" type="primary">click to upload</el-button> <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> <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
</el-upload> </el-upload>
<script> <script>
export default { export default {
@ -30,20 +54,16 @@ Add `slot` attribute to customize the type of upload button and text hints.
} }
</script> </script>
``` ```
::: :::
### Drag to upload ### Drag to upload
You can drag your file to certain field to upload it. You can drag your file to a certain area 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
:::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 ```html
<el-upload <el-upload
action="http://jsonplaceholder.typicode.com/" action="//jsonplaceholder.typicode.com/posts/"
type="drag" type="drag"
:multiple="true" :multiple="true"
:on-preview="handlePreview" :on-preview="handlePreview"
@ -52,8 +72,8 @@ Specifying the `type` attribute as `drag` will change the upload control to a dr
:on-error="handleError" :on-error="handleError"
> >
<i class="el-icon-upload"></i> <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-dragger__text">Drop file 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-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
</el-upload> </el-upload>
<script> <script>
export default { export default {
@ -68,26 +88,24 @@ Specifying the `type` attribute as `drag` will change the upload control to a dr
} }
</script> </script>
``` ```
:::
### Upload single image ### Upload single image
This mode is specifically for uploading image, and the thumbnail will display in origin place. This mode is specifically for image uploading, and the thumbnail will display in the 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
:::demo `thumbnail-mode` attribute allows you to force the upload content to image only, and can display the thumbnail of the uploaded image.
```html ```html
<el-upload <el-upload
action="http://jsonplaceholder.typicode.com/" action="//jsonplaceholder.typicode.com/posts/"
type="drag" type="drag"
:thumbnail-mode="true" :thumbnail-mode="true"
:on-preview="handlePreview" :on-preview="handlePreview"
:on-remove="handleRemove" :on-remove="handleRemove"
> >
<i class="el-icon-upload"></i> <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-dragger__text">Drop file 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-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
</el-upload> </el-upload>
<script> <script>
export default { export default {
@ -102,26 +120,28 @@ This mode is specifically for uploading image, and the thumbnail will display in
} }
</script> </script>
``` ```
::: :::
### Attributes ### Attributes
Attribute | Description | Type | Accepted Values | Default
Attribute| Description | Type | options | Default
----| ----| ----| ----| ---- ----| ----| ----| ----| ----
action | required, the location you upload to | string | --- |--- action | required, request URL | string | — | —
headers | optional, set request headers | object | --- | --- headers | request headers | object | — | —
multiple | optional, whether multiple-selections are supported or not| boolean | --- | --- multiple | whether uploading multiple files is permitted | boolean | — | —
file | optional, The field name of the uploaded file | string | --- | --- data | additions options of request | object | — | —
with-credentials | send cookies or not | boolean | --- | --- name | key name for uploaded file | string | — | file
show-uploadList | show the uploaded file list or not | boolean | --- |--- with-credentials | whether cookies are sent | boolean | — |false
type | the type of upload control | string | select, drag | select show-upload-list | whether to show the uploaded file list | boolean | — | true
accept | optional, limits the type of upload file, but if the upload type is `drag`, you can upload all the file types | string | --- | --- type | type of Upload | string | select/drag | select
on-preview | optional, hook function when click the uploaded files | function(file) | --- | --- 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-remove | optional, hook function when remove the files | function(file, fileList) | --- | --- on-preview | hook function when clicking the uploaded files | function(file) | — | —
on-success | optional, hook function when upload files successfully | function(file, fileList) | --- | --- on-remove | hook function when files are removed | function(file, fileList) | — | —
on-error | optional, hook function when some errors occured | function(err, file, fileList) | --- | --- on-success | hook function when uploaded successfully | function(response, 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) | --- | --- on-error | hook function when some errors occurs | function(err, response, file) | — | —
thumbnail-mode | whether image mode is set or not, the image mode will display the picture thumbnails | boolean | --- | false 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 | — |

2
examples/docs/zh-CN/quickstart.md
View File

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

8
examples/docs/zh-CN/tooltip.md
View File

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

8
examples/docs/zh-CN/tree.md
View File

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

2
examples/docs/zh-CN/upload.md
View File

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