From 9be1a0ae8a3d6c68d71695ea23f6afbeb0c054a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E5=A5=95?= Date: Thu, 14 Sep 2017 23:16:45 -0500 Subject: [PATCH] update doc (#7033) * Tooltip: update zh-CN doc * Tooltip: update en doc * Autocomplete: update docs --- examples/docs/en-US/input.md | 64 +++++++++++++++++----------------- examples/docs/en-US/tooltip.md | 28 ++++++++++++++- examples/docs/zh-CN/input.md | 1 + examples/docs/zh-CN/tooltip.md | 1 + packages/tooltip/src/main.js | 5 +-- 5 files changed, 64 insertions(+), 35 deletions(-) diff --git a/examples/docs/en-US/input.md b/examples/docs/en-US/input.md index 75ea5dc2e..ce152ac18 100644 --- a/examples/docs/en-US/input.md +++ b/examples/docs/en-US/input.md @@ -596,26 +596,26 @@ Search data from server-side. | Attribute | Description | Type | Accepted Values | Default | | ----| ----| ----| ---- | ----- | -|type| Same as the `type` attribute of native input, except that it can be `textarea` | string | - | text | -|value| binding value | string/number| - | - | -|maxlength| maximum Input text length| number| - | - | -|minlength| minimum Input text length| number | - | - | -|placeholder| placeholder of Input| string | - | - | -|disabled | whether Input is disabled | boolean | - | false | -|size | size of Input, works when `type` is not 'textarea' | string | large/small/mini | - | -|icon | icon name | string | - | - | -|rows | number of rows of textarea, only works when `type` is 'textarea' | number | - | 2 | -|autosize | whether textarea has an adaptive height, only works when `type` is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 } | boolean/object | - | false | +|type| Same as the `type` attribute of native input, except that it can be `textarea` | string | — | text | +|value| binding value | string/number| — | — | +|maxlength| maximum Input text length| number| — | — | +|minlength| minimum Input text length| number | — | — | +|placeholder| placeholder of Input| string | — | — | +|disabled | whether Input is disabled | boolean | — | false | +|size | size of Input, works when `type` is not 'textarea' | string | large/small/mini | — | +|icon | icon name | string | — | — | +|rows | number of rows of textarea, only works when `type` is 'textarea' | number | — | 2 | +|autosize | whether textarea has an adaptive height, only works when `type` is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 } | boolean/object | — | false | |auto-complete | same as `auto-complete` in native input | string | on/off | off | -|name | same as `name` in native input | string | - | - | -| readonly | same as `readonly` in native input | boolean | - | false | -|max | same as `max` in native input | - | - | - | -|min | same as `min` in native input | - | - | - | -|step| same as `step` in native input | - | - | - | -|resize| control the resizability | string | none, both, horizontal, vertical | - | -|autofocus | same as `autofocus` in native input | boolean | - | false | -|form | same as `form` in native input | string | - | - | -| on-icon-click | hook function when clicking on the input icon | function | - | - | +|name | same as `name` in native input | string | — | — | +| readonly | same as `readonly` in native input | boolean | — | false | +|max | same as `max` in native input | — | — | — | +|min | same as `min` in native input | — | — | — | +|step| same as `step` in native input | — | — | — | +|resize| control the resizability | string | none, both, horizontal, vertical | — | +|autofocus | same as `autofocus` in native input | boolean | — | false | +|form | same as `form` in native input | string | — | — | +| on-icon-click | hook function when clicking on the input icon | function | — | — | ### Input Events @@ -630,23 +630,23 @@ Search data from server-side. Attribute | Description | Type | Options | Default |----| ----| ----| ---- | -----| -|placeholder| the placeholder of Autocomplete| string | - | - | -|disabled | whether Autocomplete is disabled | boolean | - | false| -| props | configuration options, see the following table | object | - | - | -|icon | icon name | string | - | - | -|value | binding value | string | - | - | -|custom-item | component name of your customized suggestion list item | string | - | - | -|fetch-suggestions | a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete | Function(queryString, callback) | - | - | -| popper-class | custom class name for autocomplete's dropdown | string | - | - | -| trigger-on-focus | whether show suggestions when input focus | boolean | - | true | -| on-icon-click | hook function when clicking on the input icon | function | - | - | -| select-when-unmatched | whether to emit a `select` event on enter when there is no autocomplete match | boolean | - | false | +|placeholder| the placeholder of Autocomplete| string | — | — | +|disabled | whether Autocomplete is disabled | boolean | — | false| +| props | configuration options, see the following table | object | — | — | +|icon | icon name | string | — | — | +|value | binding value | string | — | — | +|custom-item | component name of your customized suggestion list item | string | — | — | +|fetch-suggestions | a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete | Function(queryString, callback) | — | — | +| popper-class | custom class name for autocomplete's dropdown | string | — | — | +| trigger-on-focus | whether show suggestions when input focus | boolean | — | true | +| on-icon-click | hook function when clicking on the input icon | function | — | — | +| select-when-unmatched | whether to emit a `select` event on enter when there is no autocomplete match | boolean | — | false | ### props | Attribute | Description | Type | Accepted Values | Default | | --------- | ----------------- | ------ | ------ | ------ | -| label | specify which key of option object is used as the option's label | string | - | value | -| value | specify which key of option object is used as the option's value | string | - | value | +| label | specify which key of option object is used as the option's label | string | — | value | +| value | specify which key of option object is used as the option's value | string | — | value | ### Autocomplete Events diff --git a/examples/docs/en-US/tooltip.md b/examples/docs/en-US/tooltip.md index d3fed443c..728867f52 100644 --- a/examples/docs/en-US/tooltip.md +++ b/examples/docs/en-US/tooltip.md @@ -15,16 +15,42 @@ width: 110px; } } + .el-tooltip + .el-tooltip { + margin-left: 15px; + } .box { + width: 400px; + + .top { + text-align: center; + } + .left { float: left; width: 110px; } - + .right { float: right; width: 110px; } + + .bottom { + clear: both; + text-align: center; + } + + .item { + margin: 4px; + } + + .left .el-tooltip__popper, + .right .el-tooltip__popper { + padding: 8px 10px; + } + .el-tooltip { + margin-left: 0; + } } } diff --git a/examples/docs/zh-CN/input.md b/examples/docs/zh-CN/input.md index 42168cc62..29fb40042 100644 --- a/examples/docs/zh-CN/input.md +++ b/examples/docs/zh-CN/input.md @@ -801,6 +801,7 @@ export default { | trigger-on-focus | 是否在输入框 focus 时显示建议列表 | boolean | — | true | | on-icon-click | 点击图标的回调函数 | function | — | — | | icon | 输入框尾部图标 | string | — | — | +| select-when-unmatched | 在输入没有任何匹配建议的情况下，按下回车是否触发 `select` 事件 | boolean | — | false | ### props | 参数 | 说明 | 类型 | 可选值 | 默认值 | diff --git a/examples/docs/zh-CN/tooltip.md b/examples/docs/zh-CN/tooltip.md index 0522516e5..07eb8d03f 100644 --- a/examples/docs/zh-CN/tooltip.md +++ b/examples/docs/zh-CN/tooltip.md @@ -215,3 +215,4 @@ tooltip 内不支持 disabled form 元素，参考[MDN](https://developer.mozill | manual | 手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效 | Boolean | — | false | | popper-class | 为 Tooltip 的 popper 添加类名 | String | — | — | | enterable | 鼠标是否可进入到 tooltip 中 | Boolean | — | true | +| hide-after | Tooltip 出现后自动隐藏延时，单位毫秒，为 0 则不会自动隐藏 | number | — | 0 | diff --git a/packages/tooltip/src/main.js b/packages/tooltip/src/main.js index 3ec0638fe..2a9fe2c90 100644 --- a/packages/tooltip/src/main.js +++ b/packages/tooltip/src/main.js @@ -88,16 +88,17 @@ export default { if (!this.$slots.default || !this.$slots.default.length) return this.$slots.default; const vnode = getFirstComponentChild(this.$slots.default); - if (!vnode || this.handlerAdded) return vnode; + if (!vnode) return vnode; const data = vnode.data = vnode.data || {}; const on = vnode.data.on = vnode.data.on || {}; const nativeOn = vnode.data.nativeOn = vnode.data.nativeOn || {}; + data.staticClass = this.concatClass(data.staticClass, 'el-tooltip'); + if (this.handlerAdded) return vnode; on.mouseenter = this.addEventHandle(on.mouseenter, () => { this.setExpectedState(true); this.handleShowPopper(); }); on.mouseleave = this.addEventHandle(on.mouseleave, () => { this.setExpectedState(false); this.debounceClose(); }); nativeOn.mouseenter = this.addEventHandle(nativeOn.mouseenter, () => { this.setExpectedState(true); this.handleShowPopper(); }); nativeOn.mouseleave = this.addEventHandle(nativeOn.mouseleave, () => { this.setExpectedState(false); this.debounceClose(); }); - data.staticClass = this.concatClass(data.staticClass, 'el-tooltip'); return vnode; },