tongChong
/
element
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Input: fix autocomplete property is not compatible with native #12513 (#12514) 

* fix #12513

* fix: fallback for autoComplete and print deprecated warning

* fix: fix auto-complete property in select component

* fix default complete value

* Docs: Update document for autocomplete property change

* Docs: remove redundant documents

* remove unnecessary console log message\

* Update select.md

* fix: add missing declaration in select.d.ts
This commit is contained in:
Axetroy 2018-08-28 15:44:21 +08:00 committed by Jikkai Xiao
parent c782b0dc8e
commit ec6cac4232
16 changed files with 57 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/docs/en-US/dialog.md
View File

@ -147,7 +147,7 @@ The content of Dialog can be anything, even a table or a form. This example show
<el-dialog title="Shipping address" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="Promotion name" :label-width="formLabelWidth">
<el-input v-model="form.name" auto-complete="off"></el-input>
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="Zones" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="Please select a zone">

6
examples/docs/en-US/form.md
View File

@ -538,10 +538,10 @@ This example shows how to customize your own validation rules to finish a two-fa
```html
<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
<el-form-item label="Password" prop="pass">
<el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
<el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="Confirm" prop="checkPass">
<el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
<el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="Age" prop="age">
<el-input v-model.number="ruleForm2.age"></el-input>
@ -719,7 +719,7 @@ This example shows how to customize your own validation rules to finish a two-fa
{ type: 'number', message: 'age must be a number'}
]"
>
<el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>
<el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('numberValidateForm')">Submit</el-button>

3
examples/docs/en-US/input.md
View File

@ -654,7 +654,8 @@ Search data from server-side.
| suffix-icon | suffix icon class | 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 |
|autocomplete | same as `autocomplete` in native input | string | on/off | off |
|auto-complete | @DEPRECATED in next major version | 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 | — | — | — |

3
examples/docs/en-US/select.md
View File

@ -670,7 +670,8 @@ If the binding value of Select is an object, make sure to assign `value-key` as
| collapse-tags | whether to collapse tags to a text when multiple selecting | boolean | — | false |
| multiple-limit | maximum number of options user can select when `multiple` is `true`. No limit when set to 0 | number | — | 0 |
| name | the name attribute of select input | string | — | — |
| auto-complete | the autocomplete attribute of select input | string | — | off |
| autocomplete | the autocomplete attribute of select input | string | — | off |
| auto-complete | @DEPRECATED in next major version | string | — | off |
| placeholder | placeholder | string | — | Select |
| filterable | whether Select is filterable | boolean | — | false |
| allow-create | whether creating new items is allowed. To use this, `filterable` must be true | boolean | — | false |

2
examples/docs/es/dialog.md
View File

@ -151,7 +151,7 @@ El contenido del Diálogo puede ser cualquier cosa, incluso una tabla o un formu
<el-dialog title="Shipping address" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="Promotion name" :label-width="formLabelWidth">
<el-input v-model="form.name" auto-complete="off"></el-input>
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="Zones" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="Please select a zone">

6
examples/docs/es/form.md
View File

@ -539,10 +539,10 @@ Este ejemplo muestra cómo personalizar sus propias reglas de validación para f
```html
<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
<el-form-item label="Password" prop="pass">
<el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
<el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="Confirm" prop="checkPass">
<el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
<el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="Age" prop="age">
<el-input v-model.number="ruleForm2.age"></el-input>
@ -721,7 +721,7 @@ Este ejemplo muestra cómo personalizar sus propias reglas de validación para f
{ type: 'number', message: 'age must be a number'}
]"
>
<el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>
<el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('numberValidateForm')">Submit</el-button>

3
examples/docs/es/input.md
View File

@ -633,7 +633,8 @@ Búsqueda de datos desde el servidor.
| suffix-icon | clase del icono de sufijo | string | — | — |
| rows | número de filas, sólo funciona cuando `type` es 'textarea'. | number | — | 2 |
| autosize | si textarea tiene una altura adaptativa, sólo funciona cuando el`type` es 'textarea'. Puede aceptar un objeto, p. ej. { minRows: 2, maxRows: 6 } | boolean / object | — | false |
| auto-complete | igual que `auto-complete` en el input nativo | string | on/off | off |
| autocomplete | igual que `autocomplete` en el input nativo | string | on/off | off |
| auto-complete | @DEPRECATED in next major version | string | on/off | off |
| name | igual que `name` en el input nativo | string | — | — |
| readonly | igual que `readonly` en el input nativo | boolean | — | false |
| max | igual que `max` en el input nativo | — | — | — |

3
examples/docs/es/select.md
View File

@ -676,7 +676,8 @@ Si el valor de encuadernación de Select es un objeto, asegúrese de asignar `va
| clearable | si el single select puede ser limpiable | boolean | — | false |
| multiple-limit | maximo numero de opciones que el usuario puede seleccionar cuando `multiple` es `true`. Sin límite cuando se fija a 0 | number | — | 0 |
| name | el atributo `name` del input seleccionado | string | — | — |
| auto-complete | el atributo `autocomplete` del input seleccionado | string | — | off |
| autocomplete | el atributo `autocomplete` del input seleccionado | string | — | off |
| auto-complete | @DEPRECATED in next major version | string | — | off |
| placeholder | placeholder | string | — | Select |
| filterable | si Select es filtrable | boolean | — | false |
| allow-create | si esta permitido crear nuevos items. Para usar esto, `filterable` debe ser `true`. | boolean | — | false |

2
examples/docs/zh-CN/dialog.md
View File

@ -144,7 +144,7 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="活动名称" :label-width="formLabelWidth">
<el-input v-model="form.name" auto-complete="off"></el-input>
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="活动区域" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="请选择活动区域">

6
examples/docs/zh-CN/form.md
View File

@ -527,10 +527,10 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
```html
<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
<el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
<el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="ruleForm2.age"></el-input>
@ -706,7 +706,7 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
{ type: 'number', message: '年龄必须为数字值'}
]"
>
<el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>
<el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>

3
examples/docs/zh-CN/input.md
View File

@ -810,7 +810,8 @@ export default {
| suffix-icon | 输入框尾部图标 | string | — | — |
| rows | 输入框行数，只对 `type="textarea"` 有效 | number | — | 2 |
| autosize | 自适应内容高度，只对 `type="textarea"` 有效，可传入对象，如，{ minRows: 2, maxRows: 6 } | boolean / object | — | false |
| auto-complete | 原生属性，自动补全 | string | on, off | off |
| autocomplete | 原生属性，自动补全 | string | on, off | off |
| auto-complete | 下个主版本弃用 | string | on, off | off |
| name | 原生属性 | string | — | — |
| readonly | 原生属性，是否只读 | boolean | — | false |
| max | 原生属性，设置最大值 | — | — | — |

3
examples/docs/zh-CN/select.md
View File

@ -665,7 +665,8 @@
| collapse-tags | 多选时是否将选中值按文字的形式展示 | boolean | — | false |
| multiple-limit | 多选时用户最多可以选择的项目数，为 0 则不限制 | number | — | 0 |
| name | select input 的 name 属性 | string | — | — |
| auto-complete | select input 的 autocomplete 属性 | string | — | off |
| autocomplete | select input 的 autocomplete 属性 | string | — | off |
| auto-complete | 下个主版本弃用 | string | — | off |
| placeholder | 占位符 | string | — | 请选择 |
| filterable | 是否可搜索 | boolean | — | false |
| allow-create | 是否允许用户创建新条目，需配合 `filterable` 使用 | boolean | — | false |

13
packages/input/src/input.vue
View File

@ -27,7 +27,7 @@
:type="type"
:disabled="inputDisabled"
:readonly="readonly"
:autocomplete="autoComplete"
:autocomplete="autoComplete || autocomplete"
:value="currentValue"
ref="input"
@compositionstart="handleComposition"
@ -149,10 +149,19 @@
type: [Boolean, Object],
default: false
},
autoComplete: {
autocomplete: {
type: String,
default: 'off'
},
/** @Deprecated in next major version */
autoComplete: {
type: String,
validator(val) {
process.env.NODE_ENV !== 'production' &&
console.warn('[Element Warn][Input]\'auto-complete\' property will be deprecated in next major version. please use \'autocomplete\' instead.');
return true;
}
},
validateEvent: {
type: Boolean,
default: true

15
packages/select/src/select.vue
View File

@ -47,7 +47,7 @@
class="el-select__input"
:class="[selectSize ? `is-${ selectSize }` : '']"
:disabled="selectDisabled"
:autocomplete="autoComplete"
:autocomplete="autoComplete || autocomplete"
@focus="handleFocus"
@blur="softFocus = false"
@click.stop
@ -74,7 +74,7 @@
:placeholder="currentPlaceholder"
:name="name"
:id="id"
:auto-complete="autoComplete"
:autocomplete="autoComplete || autocomplete"
:size="selectSize"
:disabled="selectDisabled"
:readonly="readonly"
@ -259,10 +259,19 @@
value: {
required: true
},
autoComplete: {
autocomplete: {
type: String,
default: 'off'
},
/** @Deprecated in next major version */
autoComplete: {
type: String,
validator(val) {
process.env.NODE_ENV !== 'production' &&
console.warn('[Element Warn][Select]\'auto-complete\' property will be deprecated in next major version. please use \'autocomplete\' instead.');
return true;
}
},
automaticDropdown: Boolean,
size: String,
disabled: Boolean,

5
types/input.d.ts vendored
View File

@ -48,9 +48,12 @@ export declare class ElInput extends ElementUIComponent {
/** Whether textarea has an adaptive height, only works when type is 'textarea' */
autosize: boolean | AutoSize
/** Same as auto-complete in native input */
/** @Deprecated in next major version */
autoComplete: string
/** Same as autocomplete in native input */
autocomplete: string
/** Same as name in native input */
name: string

6
types/select.d.ts vendored
View File

@ -30,6 +30,12 @@ export declare class ElSelect extends ElementUIComponent {
/** Maximum number of options user can select when multiple is true. No limit when set to 0 */
multipleLimit: number
/** @Deprecated in next major version */
autoComplete: string
/** Same as autocomplete in native input */
autocomplete: string
/** The name attribute of select input */
name: string