diff --git a/examples/docs/en-US/quickstart.md b/examples/docs/en-US/quickstart.md index 31c1b897a..b0d1c70a5 100644 --- a/examples/docs/en-US/quickstart.md +++ b/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: diff --git a/examples/docs/en-US/tooltip.md b/examples/docs/en-US/tooltip.md index 51406c53b..e6b151354 100644 --- a/examples/docs/en-US/tooltip.md +++ b/examples/docs/en-US/tooltip.md @@ -1,22 +1,43 @@ -# Tooltips + + + +## Tooltip Display prompt information for mouse hover. +### Basic usage ---- - -##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. - +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 @@ -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 Dark @@ -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
multiple lines
second line
@@ -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 | diff --git a/examples/docs/en-US/tree.md b/examples/docs/en-US/tree.md index 04e934ce8..e8e16951a 100644 --- a/examples/docs/en-US/tree.md +++ b/examples/docs/en-US/tree.md @@ -1,15 +1,3 @@ - - ``` ::: -### 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 - + + ## 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 - click to upload -
only jpg/png allowed,and the size must be less than 500kb
+ Click to upload +
jpg/png files with a size less than 500kb
``` - ::: ### 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 -
drag file to here or click to upload
-
only jpg/png allowed,and the size must be less than 500kb
+
Drop file here or click to upload
+
jpg/png files with a size less than 500kb
``` +::: ### 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 -
drag file to here or click to upload
-
only jpg/png allowed,and the size must be less than 500kb
+
Drop file here or click to upload
+
jpg/png files with a size less than 500kb
``` - ::: ### 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 | — | diff --git a/examples/docs/zh-CN/quickstart.md b/examples/docs/zh-CN/quickstart.md index 9c12aec95..a294eb262 100644 --- a/examples/docs/zh-CN/quickstart.md +++ b/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 配置文件 ``` 几个配置文件的典型配置如下: diff --git a/examples/docs/zh-CN/tooltip.md b/examples/docs/zh-CN/tooltip.md index 4accd27c8..290576b84 100644 --- a/examples/docs/zh-CN/tooltip.md +++ b/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 | diff --git a/examples/docs/zh-CN/tree.md b/examples/docs/zh-CN/tree.md index c483ec608..13a47a2e3 100644 --- a/examples/docs/zh-CN/tree.md +++ b/examples/docs/zh-CN/tree.md @@ -147,6 +147,11 @@ label: 'label' } }; + }, + methods: { + handleNodeClick(data) { + console.log(data); + } } }; @@ -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`),
则返回目前被选中的节点所组成的数组 | 接收一个 boolean 类型的参数,若为 `true` 则
仅返回被选中的叶子节点,默认值为 `false` | diff --git a/examples/docs/zh-CN/upload.md b/examples/docs/zh-CN/upload.md index 36c1aa5df..38c5b2394 100644 --- a/examples/docs/zh-CN/upload.md +++ b/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 | 清空已上传的文件列表 | — |