mirror of https://github.com/ElemeFE/element
update doc (#7033)
* Tooltip: update zh-CN doc * Tooltip: update en doc * Autocomplete: update docspull/7047/head
杨奕
GitHub
parent
586bde090c
commit
9be1a0ae8a
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|
|
|
|||
|
|
@ -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 |
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue