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:8px10px;
}
.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-tooltipcontent="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`.
@@ -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.
| visible-arrow | display Tooltip arrow or not, more info go to [Vue-popper](https://github.com/element-component/vue-popper) page | Boolean | — | true |
@@ -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.
| 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 |
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-buttonsize="small"type="primary">click to upload</el-button>
<divclass="el-upload__tip"slot="tip">only jpg/png allowed,and the size must be less than 500kb</div>
<el-buttonsize="small"type="primary">Click to upload</el-button>
<divclass="el-upload__tip"slot="tip">jpg/png files with a size less than 500kb</div>
</el-upload>
<script>
exportdefault{
...
...
@@ -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"
>
<iclass="el-icon-upload"></i>
<divclass="el-dragger__text">drag file to here or <em>click to upload</em></div>
<divclass="el-upload__tip"slot="tip">only jpg/png allowed,and the size must be less than 500kb</div>
<divclass="el-dragger__text">Drop file here or <em>click to upload</em></div>
<divclass="el-upload__tip"slot="tip">jpg/png files with a size less than 500kb</div>
</el-upload>
<script>
exportdefault{
...
...
@@ -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"
>
<iclass="el-icon-upload"></i>
<divclass="el-dragger__text">drag file to here or <em>click to upload</em></div>
<divclass="el-upload__tip"slot="tip">only jpg/png allowed,and the size must be less than 500kb</div>
<divclass="el-dragger__text">Drop file here or <em>click to upload</em></div>
<divclass="el-upload__tip"slot="tip">jpg/png files with a size less than 500kb</div>
</el-upload>
<script>
exportdefault{
...
...
@@ -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 | --- |---
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
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) | — | —