github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: update auto-complete

pull/1790/head
tangjinzhou 2020-02-08 13:26:18 +08:00
parent 22b28b34c2
commit 7a8bef0ef3
9 changed files with 150 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build/config.js
View File

@ -1,5 +1,5 @@
module.exports = { module.exports = {
dev: { dev: {
componentName: 'anchor', // dev components componentName: 'auto-complete', // dev components
}, },
}; };

11
components/auto-complete/InputElement.jsx
View File

@ -20,17 +20,6 @@ export default {
disabled: PropTypes.bool, disabled: PropTypes.bool,
placeholder: PropTypes.string, placeholder: PropTypes.string,
}, },
methods: {
focus() {
const ele = this.$refs.ele;
ele.focus ? ele.focus() : this.$el.focus();
},
blur() {
const ele = this.$refs.ele;
ele.blur ? ele.blur() : this.$el.blur();
},
},
render() { render() {
const { $slots = {}, $attrs = {}, placeholder } = this; const { $slots = {}, $attrs = {}, placeholder } = this;
const listeners = getListeners(this); const listeners = getListeners(this);

33
components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1,15 +1,28 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/auto-complete/demo/basic.md correctly 1`] = ` exports[`renders ./components/auto-complete/demo/basic.md correctly 1`] = `
<div tabindex="0" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;"> <div>
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"> <div tabindex="0" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
<div class="ant-select-selection__rendered"> <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
<ul> <div class="ant-select-selection__rendered">
<li class="ant-select-search ant-select-search--inline"> <ul>
<div class="ant-select-search__field__wrap"><input placeholder="input here" type="text" value="" class="ant-input ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div> <li class="ant-select-search ant-select-search--inline">
</li> <div class="ant-select-search__field__wrap"><input placeholder="input here" type="text" value="" class="ant-input ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
</ul> </li>
</div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span> </ul>
</div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
</div>
</div> <br> <br>
<div tabindex="0" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<ul>
<li class="ant-select-search ant-select-search--inline">
<div class="ant-select-search__field__wrap"><input placeholder="control mode" type="text" value="" class="ant-input ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
</li>
</ul>
</div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
</div>
</div> </div>
</div> </div>
`; `;
@ -79,7 +92,7 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly
<div class="ant-select-selection__rendered"> <div class="ant-select-selection__rendered">
<ul> <ul>
<li class="ant-select-search ant-select-search--inline"> <li class="ant-select-search ant-select-search--inline">
<div class="ant-select-search__field__wrap"><span class="ant-input-affix-wrapper ant-select-search__field"><input placeholder="input here" type="text" value="" class="ant-input"><span class="ant-input-suffix"><button type="button" class="search-btn ant-btn ant-btn-primary ant-btn-lg"><i aria-label="icon: search" class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i></button></span></span><span class="ant-select-search__field__mirror">&nbsp;</span></div> <div class="ant-select-search__field__wrap"><span class="ant-input-affix-wrapper ant-select-search__field"><input placeholder="input here" type="text" value="" class="ant-input"><span class="ant-input-suffix"><button type="button" class="search-btn ant-btn ant-btn-primary ant-btn-lg" style="margin-right: -12px;"><i aria-label="icon: search" class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i></button></span></span><span class="ant-select-search__field__mirror">&nbsp;</span></div>
</li> </li>
</ul> </ul>
</div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span> </div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>

23
components/auto-complete/demo/basic.md
View File

@ -10,28 +10,45 @@ Basic Usage, set datasource of autocomplete with `dataSource` property.
```tpl ```tpl
<template> <template>
<div>
<a-auto-complete <a-auto-complete
:dataSource="dataSource" :dataSource="dataSource"
style="width: 200px" style="width: 200px"
@select="onSelect" @select="onSelect"
@search="handleSearch" @search="onSearch"
placeholder="input here" placeholder="input here"
/> />
<br />
<br />
<a-auto-complete
:value="value"
:dataSource="dataSource"
style="width: 200px"
@select="onSelect"
@search="onSearch"
@change="onChange"
placeholder="control mode"
/>
</div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
value: '',
dataSource: [], dataSource: [],
}; };
}, },
methods: { methods: {
handleSearch(value) { onSearch(searchText) {
this.dataSource = !value ? [] : [value, value + value, value + value + value]; this.dataSource = !searchText ? [] : [searchText, searchText.repeat(2), searchText.repeat(3)];
}, },
onSelect(value) { onSelect(value) {
console.log('onSelect', value); console.log('onSelect', value);
}, },
onChange(value) {
this.value = value;
}
}, },
}; };
</script> </script>

82
components/auto-complete/demo/certain-category.md
View File

@ -30,17 +30,17 @@ Lookup-Patterns - Certain Category
href="https://www.google.com/search?q=antd" href="https://www.google.com/search?q=antd"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
>更多 >more
</a> </a>
</span> </span>
<a-select-option v-for="opt in group.children" :key="opt.title" :value="opt.title"> <a-select-option v-for="opt in group.children" :key="opt.title" :value="opt.title">
{{opt.title}} {{opt.title}}
<span class="certain-search-item-count">{{opt.count}} 人 关注</span> <span class="certain-search-item-count">{{opt.count}} people</span>
</a-select-option> </a-select-option>
</a-select-opt-group> </a-select-opt-group>
<a-select-option disabled key="all" class="show-all"> <a-select-option disabled key="all" class="show-all">
<a href="https://www.google.com/search?q=antd" target="_blank" rel="noopener noreferrer"> <a href="https://www.google.com/search?q=ant-design-vue" target="_blank" rel="noopener noreferrer">
查看所有结果 View all results
</a> </a>
</a-select-option> </a-select-option>
</template> </template>
@ -51,43 +51,43 @@ Lookup-Patterns - Certain Category
</div> </div>
</template> </template>
<script> <script>
const dataSource = [ const dataSource = [
{ {
title: '话题', title: 'Libraries',
children: [ children: [
{ {
title: 'AntDesign', title: 'AntDesign',
count: 10000, count: 10000,
}, },
{ {
title: 'AntDesign UI', title: 'AntDesign UI',
count: 10600, count: 10600,
}, },
], ],
}, },
{ {
title: '问题', title: 'Solutions',
children: [ children: [
{ {
title: 'AntDesign UI 有多好', title: 'AntDesign UI',
count: 60100, count: 60100,
}, },
{ {
title: 'AntDesign 是啥', title: 'AntDesign',
count: 30010, count: 30010,
}, },
], ],
}, },
{ {
title: '文章', title: 'Articles',
children: [ children: [
{ {
title: 'AntDesign 是一个设计语言', title: 'AntDesign design language',
count: 100000, count: 100000,
}, },
], ],
}, },
]; ];
export default { export default {
data() { data() {
return { return {

24
components/auto-complete/demo/uncertain-category.md
View File

@ -22,7 +22,7 @@ Lookup-Patterns - Uncertain Category
> >
<template slot="dataSource"> <template slot="dataSource">
<a-select-option v-for="item in dataSource" :key="item.category" :text="item.category"> <a-select-option v-for="item in dataSource" :key="item.category" :text="item.category">
{{item.query}} 在 Found {{item.query}} on
<a <a
:href="`https://s.taobao.com/search?q=${item.query}`" :href="`https://s.taobao.com/search?q=${item.query}`"
target="_blank" target="_blank"
@ -30,12 +30,11 @@ Lookup-Patterns - Uncertain Category
> >
{{item.category}} {{item.category}}
</a> </a>
区块中 <span className="global-search-item-count">{{item.count}} results</span>
<span className="global-search-item-count">约 {{item.count}} 个结果</span>
</a-select-option> </a-select-option>
</template> </template>
<a-input> <a-input>
<a-button slot="suffix" class="search-btn" size="large" type="primary"> <a-button slot="suffix" style="margin-right: -12px" class="search-btn" size="large" type="primary">
<a-icon type="search" /> <a-icon type="search" />
</a-button> </a-button>
</a-input> </a-input>
@ -93,18 +92,23 @@ Lookup-Patterns - Uncertain Category
padding-right: 62px; padding-right: 62px;
} }
.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {
right: 0;
}
.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix button { .global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix button {
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
.global-search-item {
display: flex;
}
.global-search-item-desc {
flex: auto;
text-overflow: ellipsis;
overflow: hidden;
}
.global-search-item-count { .global-search-item-count {
position: absolute; flex: none;
right: 16px;
} }
</style> </style>
``` ```

57
components/auto-complete/index.en-US.md
View File

@ -4,37 +4,38 @@
<a-auto-complete :dataSource="dataSource" /> <a-auto-complete :dataSource="dataSource" />
``` ```
| Property | Description | Type | Default | | Property | Description | Type | Default | Version |
| --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| allowClear | Show clear button, effective in multiple mode only. | boolean | false | | allowClear | Show clear button, effective in multiple mode only. | boolean | false | |
| autoFocus | get focus when component mounted | boolean | false | | autoFocus | get focus when component mounted | boolean | false | |
| backfill | backfill selected item the input when using keyboard | boolean | false | | backfill | backfill selected item the input when using keyboard | boolean | false | |
| slot="default" (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement | `<Input />` | | slot="default" (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement | `<Input />` | |
| dataSource | Data source for autocomplete | slot \| [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] | | | dataSource | Data source for autocomplete | slot \| [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] | | |
| defaultActiveFirstOption | Whether active first option by default | boolean | true | | dropdownMenuStyle | additional style applied to dropdown menu | object | | 1.5.0 |
| defaultValue | Initial selected option. | string\|string\[]\| - | | defaultActiveFirstOption | Whether active first option by default | boolean | true | |
| disabled | Whether disabled select | boolean | false | | defaultValue | Initial selected option. | string\|string\[]\| - | |
| 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 | | disabled | Whether disabled select | boolean | false | |
| optionLabelProp | Which prop value of option will render as content of select. | string | `children` | | 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 | |
| placeholder | placeholder of input | string | - | | optionLabelProp | Which prop value of option will render as content of select. | string | `children` | |
| value(v-model) | selected option | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array&lt;{ key: string, label: string\|vNodes }> | - | | placeholder | placeholder of input | string | - | |
| defaultOpen | Initial open state of dropdown | boolean | - | | value(v-model) | selected option | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array&lt;{ key: string, label: string\|vNodes }> | - | |
| open | Controlled open state of dropdown | boolean | - | | defaultOpen | Initial open state of dropdown | boolean | - | |
| open | Controlled open state of dropdown | boolean | - | |
### events ### events
| Events Name | Description | Arguments | | Events Name | Description | Arguments | Version |
| --- | --- | --- | | --- | --- | --- | --- |
| change | Called when select an option or input value change, or value of input is changed | function(value) | | change | Called when select an option or input value change, or value of input is changed | function(value) | |
| blur | Called when leaving the component. | function() | | blur | Called when leaving the component. | function() | |
| focus | Called when entering the component | function() | | focus | Called when entering the component | function() | |
| search | Called when searching items. | function(value) | - | | search | Called when searching items. | function(value) | - | |
| select | Called when a option is selected. param is option's value and option instance. | function(value, option) | | select | Called when a option is selected. param is option's value and option instance. | function(value, option) | |
| dropdownVisibleChange | Call when dropdown open | function(open) | | dropdownVisibleChange | Call when dropdown open | function(open) | |
## Methods ## Methods
| Name | Description | | Name | Description | Version |
| ------- | ------------ | | ------- | ------------ | ------- |
| blur() | remove focus | | blur() | remove focus | |
| focus() | get focus | | focus() | get focus | |

1
components/auto-complete/index.jsx
View File

@ -32,6 +32,7 @@ const AutoCompleteProps = {
value: SelectValue, value: SelectValue,
defaultValue: SelectValue, defaultValue: SelectValue,
dataSource: PropTypes.array, dataSource: PropTypes.array,
dropdownMenuStyle: PropTypes.object,
optionLabelProp: String, optionLabelProp: String,
dropdownMatchSelectWidth: PropTypes.bool, dropdownMatchSelectWidth: PropTypes.bool,
// onChange?: (value: SelectValue) => void; // onChange?: (value: SelectValue) => void;

41
components/auto-complete/index.zh-CN.md
View File

@ -4,27 +4,28 @@
<a-auto-complete :dataSource="dataSource" /> <a-auto-complete :dataSource="dataSource" />
``` ```
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| allowClear | 支持清除, 单选模式有效 | boolean | false | | allowClear | 支持清除, 单选模式有效 | boolean | false | |
| autoFocus | 自动获取焦点 | boolean | false | | autoFocus | 自动获取焦点 | boolean | false | |
| backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false | | backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false | |
| slot="default" (自定义输入框) | 自定义输入框 | HTMLInputElement / HTMLTextAreaElement | `<Input />` | | slot="default" (自定义输入框) | 自定义输入框 | HTMLInputElement / HTMLTextAreaElement | `<Input />` | |
| dataSource | 自动完成的数据源 | slot \| [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] | | | dataSource | 自动完成的数据源 | slot \| [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] | | |
| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true | | dropdownMenuStyle | dropdown 菜单自定义样式 | object | | 1.5.0 |
| defaultValue | 指定默认选中的条目 | string\|string\[]\| 无 | | defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true | |
| disabled | 是否禁用 | boolean | false | | defaultValue | 指定默认选中的条目 | string\|string\[]\| 无 | |
| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true | | disabled | 是否禁用 | boolean | false | |
| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` | | filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true | |
| placeholder | 输入框提示 | string \| slot | - | | optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` | |
| value(v-model) | 指定当前选中的条目 | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array&lt;{ key: string, label: string\|vNodes }> | 无 | | placeholder | 输入框提示 | string \| slot | - | |
| defaultOpen | 是否默认展开下拉菜单 | boolean | - | | value(v-model) | 指定当前选中的条目 | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array&lt;{ key: string, label: string\|vNodes }> | 无 | |
| open | 是否展开下拉菜单 | boolean | - | | defaultOpen | 是否默认展开下拉菜单 | boolean | - | |
| open | 是否展开下拉菜单 | boolean | - | |
### 事件 ### 事件
| 事件名称 | 说明 | 回调参数 | | 事件名称 | 说明 | 回调参数 | 版本 |
| --- | --- | --- | | --- | --- | --- | --- |
| change | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | | change | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) |
| blur | 失去焦点时的回调 | function() | | blur | 失去焦点时的回调 | function() |
| focus | 获得焦点时的回调 | function() | | focus | 获得焦点时的回调 | function() |
@ -34,7 +35,7 @@
## 方法 ## 方法
| 名称 | 描述 | | 名称 | 描述 | 版本 |
| ------- | -------- | | ------- | -------- | ---- |
| blur() | 移除焦点 | | blur() | 移除焦点 |
| focus() | 获取焦点 | | focus() | 获取焦点 |