diff --git a/components/auto-complete/demo/custom.md b/components/auto-complete/demo/custom.md index a1916f9cc..554dbcecd 100644 --- a/components/auto-complete/demo/custom.md +++ b/components/auto-complete/demo/custom.md @@ -21,7 +21,7 @@ Customize Input Component placeholder="input here" class="custom" style="height: 50px" - @keydown="handleKeyPress" + @keypress="handleKeyPress" /> diff --git a/components/auto-complete/demo/index.vue b/components/auto-complete/demo/index.vue new file mode 100644 index 000000000..22b135a7d --- /dev/null +++ b/components/auto-complete/demo/index.vue @@ -0,0 +1,42 @@ + diff --git a/components/auto-complete/index.en-US.md b/components/auto-complete/index.en-US.md new file mode 100644 index 000000000..8d1f1005e --- /dev/null +++ b/components/auto-complete/index.en-US.md @@ -0,0 +1,34 @@ +## API + +````html + +```` + +| Property | Description | Type | Default | +| -------- | ----------- | ---- | ------- | +| allowClear | Show clear button, effective in multiple mode only. | boolean | false | +| autoFocus | get focus when component mounted | boolean | false | +| backfill | backfill selected item the input when using keyboard | boolean | false | +| slot="default" (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement | `` | +| dataSource | Data source for autocomplete | slot \| [DataSourceItemType](https://github.com/vueComponent/ant-design/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] | | +| defaultActiveFirstOption | Whether active first option by default | boolean | true | +| defaultValue | Initial selected option. | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array<{ key: string, label: string\|vNodes }> | - | +| disabled | Whether disabled select | boolean | false | +| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true | +| optionLabelProp | Which prop value of option will render as content of select. | string | `children` | +| placeholder | placeholder of input | string | - | +| value(v-model) | selected option | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array<{ key: string, label: string\|vNodes }> | - | + +### events +| Events Name | Description | Arguments | +| --- | --- | --- | +| onChange | Called when select an option or input value change, or value of input is changed | function(value) | - | +| onSearch | Called when searching items. | function(value) | - | +| onSelect | Called when a option is selected. param is option's value and option instance. | function(value, option) | - | + +## Methods + +| Name | Description | +| ---- | ----------- | +| blur() | remove focus | +| focus() | get focus | diff --git a/components/auto-complete/index.zh-CN.md b/components/auto-complete/index.zh-CN.md new file mode 100644 index 000000000..6936c7952 --- /dev/null +++ b/components/auto-complete/index.zh-CN.md @@ -0,0 +1,34 @@ +## API + +````html + +```` + +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| allowClear | 支持清除, 单选模式有效 | boolean | false | +| autoFocus | 自动获取焦点 | boolean | false | +| backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false | +| slot="default" (自定义输入框) | 自定义输入框 | HTMLInputElement / HTMLTextAreaElement | `` | +| dataSource | 自动完成的数据源 | slot \| [DataSourceItemType](https://github.com/vueComponent/ant-design/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] | | +| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true | +| defaultValue | 指定默认选中的条目 | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array<{ key: string, label: string\|vNodes}> | 无 | +| disabled | 是否禁用 | boolean | false | +| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true | +| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` | +| placeholder | 输入框提示 | string \| slot | - | +| value(v-model) | 指定当前选中的条目 | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array<{ key: string, label: string\|vNodes }> | 无 | + +### 事件 +| 事件名称 | 说明 | 回调参数 | +| --- | --- | --- | +| @change | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | +| @search | 搜索补全项的时候调用 | function(value) | +| @select | 被选中时调用，参数为选中项的 value 值 | function(value, option) | + +## 方法 + +| 名称 | 描述 | +| --- | --- | +| blur() | 移除焦点 | +| focus() | 获取焦点 | diff --git a/components/select/demo/combobox.md b/components/select/demo/combobox.md index 5a52a8c32..c894470e3 100644 --- a/components/select/demo/combobox.md +++ b/components/select/demo/combobox.md @@ -2,13 +2,13 @@ #### 智能提示 输入框自动完成功能，下面是一个账号注册表单的例子。 -推荐使用 [AutoComplete](/components/auto-complete/) 组件。 +推荐使用 [AutoComplete](#/cn/components/autoComplete/) 组件。 #### Automatic completion Automatic completion of select input. -Using the [AutoComplete](/components/auto-complete/) component is strongly recommended instead as it is more flexible and capable. +Using the [AutoComplete](#/cn/components/autoComplete/) component is strongly recommended instead as it is more flexible and capable. ```html diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md index 611e60e89..517271d27 100644 --- a/components/select/index.en-US.md +++ b/components/select/index.en-US.md @@ -1,11 +1,11 @@ ## API -```html +````html lucy -``` +```` ### Select props @@ -21,7 +21,7 @@ | dropdownStyle | style of dropdown menu | object | - | | filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true | | firstActiveValue | Value of action option by default | string\|string\[] | - | -| getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative. [Example](https://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body | +| getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative. | function(triggerNode) | () => document.body | | labelInValue | whether to embed label in value, turn the format of value from `string` to `{key: string, label: vNodes}` | boolean | false | | maxTagCount | Max tag count to show | number | - | | maxTagPlaceholder | Placeholder for not showing tags | slot/function(omittedValues) | - | diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md index 8505997c6..4ff0e4a23 100644 --- a/components/select/index.zh-CN.md +++ b/components/select/index.zh-CN.md @@ -1,10 +1,10 @@ ## API -```html +````html lucy -``` +```` ### Select props @@ -20,7 +20,7 @@ | dropdownStyle | 下拉菜单的 style 属性 | object | - | | filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true | | firstActiveValue | 默认高亮的选项 | string\|string\[] | - | -| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | Function(triggerNode) | () => document.body | +| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 | Function(triggerNode) | () => document.body | | labelInValue | 是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 `string` 变为 `{key: string, label: vNodes}` 的格式 | boolean | false | | maxTagCount | 最多显示多少个 tag | number | - | | maxTagPlaceholder | 隐藏 tag 时显示的内容 | slot/function(omittedValues) | - | diff --git a/components/vc-select/Select.vue b/components/vc-select/Select.vue index e83316e68..681e1e060 100644 --- a/components/vc-select/Select.vue +++ b/components/vc-select/Select.vue @@ -652,6 +652,7 @@ export default { }, inputClick (e) { if (this.openStatus) { + this.clearBlurTime() e.stopPropagation() } else { this._focused = false @@ -712,7 +713,7 @@ export default { // Add space to the end of the inputValue as the width measurement tolerance inputElement.data = inputElement.data || {} return ( -
+
{cloneElement(inputElement, { props: { disabled: props.disabled, @@ -743,10 +744,6 @@ export default { this.inputBlur, inputEvents.blur, ), - click: chaining( - this.inputClick, - inputEvents.click, - ), }, })}