mirror of https://github.com/ElemeFE/element
Docs:rename variable in docs (#15105)
刘鹏龙
hetech
parent
c6dbd286e1
commit
89ebab0dd4
|
|
@ -677,7 +677,7 @@ The input can display only the last level instead of all levels.
|
|||
```html
|
||||
<el-cascader
|
||||
:options="options"
|
||||
v-model="selectedOptions3"
|
||||
v-model="selectedOptions"
|
||||
></el-cascader>
|
||||
<script>
|
||||
export default {
|
||||
|
|
@ -878,7 +878,7 @@ The input can display only the last level instead of all levels.
|
|||
label: 'Design Documentation'
|
||||
}]
|
||||
}],
|
||||
selectedOptions3: ['component', 'data', 'tag']
|
||||
selectedOptions: ['component', 'data', 'tag']
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
@ -1109,7 +1109,7 @@ Load child options when their parent option is clicked or hovered over.
|
|||
:::demo In this example, the options array does not have data of cities when initialized. With the `active-item-change` event, you can load the cities of a specific state dynamically. Besides, this example also demonstrates how `props` is used.
|
||||
```html
|
||||
<el-cascader
|
||||
:options="options2"
|
||||
:options="options"
|
||||
@active-item-change="handleItemChange"
|
||||
:props="props"
|
||||
></el-cascader>
|
||||
|
|
@ -1118,7 +1118,7 @@ Load child options when their parent option is clicked or hovered over.
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
options2: [{
|
||||
options: [{
|
||||
label: 'California',
|
||||
cities: []
|
||||
}, {
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
|
|||
v-model="value2"
|
||||
type="datetime"
|
||||
placeholder="Select date and time"
|
||||
:picker-options="pickerOptions1">
|
||||
:picker-options="pickerOptions">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
|
|
@ -44,7 +44,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions1: {
|
||||
pickerOptions: {
|
||||
shortcuts: [{
|
||||
text: 'Today',
|
||||
onClick(picker) {
|
||||
|
|
@ -85,7 +85,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
|
|||
<div class="block">
|
||||
<span class="demonstration">Default</span>
|
||||
<el-date-picker
|
||||
v-model="value4"
|
||||
v-model="value1"
|
||||
type="datetimerange"
|
||||
range-separator="To"
|
||||
start-placeholder="Start date"
|
||||
|
|
@ -95,9 +95,9 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
|
|||
<div class="block">
|
||||
<span class="demonstration">With shortcuts</span>
|
||||
<el-date-picker
|
||||
v-model="value5"
|
||||
v-model="value2"
|
||||
type="datetimerange"
|
||||
:picker-options="pickerOptions2"
|
||||
:picker-options="pickerOptions"
|
||||
range-separator="To"
|
||||
start-placeholder="Start date"
|
||||
end-placeholder="End date"
|
||||
|
|
@ -110,7 +110,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions2: {
|
||||
pickerOptions: {
|
||||
shortcuts: [{
|
||||
text: 'Last week',
|
||||
onClick(picker) {
|
||||
|
|
@ -137,8 +137,8 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
|
|||
}
|
||||
}]
|
||||
},
|
||||
value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
|
||||
value5: ''
|
||||
value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
|
||||
value2: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
@ -154,7 +154,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
|
|||
<div class="block">
|
||||
<span class="demonstration">Start date time 12:00:00</span>
|
||||
<el-date-picker
|
||||
v-model="value6"
|
||||
v-model="value1"
|
||||
type="datetimerange"
|
||||
start-placeholder="Start Date"
|
||||
end-placeholder="End Date"
|
||||
|
|
@ -164,7 +164,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
|
|||
<div class="block">
|
||||
<span class="demonstration">Start date time 12:00:00, end date time 08:00:00</span>
|
||||
<el-date-picker
|
||||
v-model="value7"
|
||||
v-model="value2"
|
||||
type="datetimerange"
|
||||
align="right"
|
||||
start-placeholder="Start Date"
|
||||
|
|
@ -178,8 +178,8 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
value6: '',
|
||||
value7: ''
|
||||
value1: '',
|
||||
value2: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -289,19 +289,19 @@ This example shows how to customize your own validation rules to finish a two-fa
|
|||
|
||||
:::demo Here we use `status-icon` to reflect validation result as an icon.
|
||||
```html
|
||||
<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
|
||||
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
|
||||
<el-form-item label="Password" prop="pass">
|
||||
<el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
|
||||
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Confirm" prop="checkPass">
|
||||
<el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
|
||||
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Age" prop="age">
|
||||
<el-input v-model.number="ruleForm2.age"></el-input>
|
||||
<el-input v-model.number="ruleForm.age"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('ruleForm2')">Submit</el-button>
|
||||
<el-button @click="resetForm('ruleForm2')">Reset</el-button>
|
||||
<el-button type="primary" @click="submitForm('ruleForm')">Submit</el-button>
|
||||
<el-button @click="resetForm('ruleForm')">Reset</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
|
|
@ -327,8 +327,8 @@ This example shows how to customize your own validation rules to finish a two-fa
|
|||
if (value === '') {
|
||||
callback(new Error('Please input the password'));
|
||||
} else {
|
||||
if (this.ruleForm2.checkPass !== '') {
|
||||
this.$refs.ruleForm2.validateField('checkPass');
|
||||
if (this.ruleForm.checkPass !== '') {
|
||||
this.$refs.ruleForm.validateField('checkPass');
|
||||
}
|
||||
callback();
|
||||
}
|
||||
|
|
@ -336,19 +336,19 @@ This example shows how to customize your own validation rules to finish a two-fa
|
|||
var validatePass2 = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('Please input the password again'));
|
||||
} else if (value !== this.ruleForm2.pass) {
|
||||
} else if (value !== this.ruleForm.pass) {
|
||||
callback(new Error('Two inputs don\'t match!'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
ruleForm2: {
|
||||
ruleForm: {
|
||||
pass: '',
|
||||
checkPass: '',
|
||||
age: ''
|
||||
},
|
||||
rules2: {
|
||||
rules: {
|
||||
pass: [
|
||||
{ validator: validatePass, trigger: 'blur' }
|
||||
],
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ export default {
|
|||
```html
|
||||
<el-input
|
||||
placeholder="Please input"
|
||||
v-model="input1"
|
||||
v-model="input"
|
||||
:disabled="true">
|
||||
</el-input>
|
||||
|
||||
|
|
@ -45,7 +45,7 @@ export default {
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
input1: ''
|
||||
input: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -60,7 +60,7 @@ export default {
|
|||
```html
|
||||
<el-input
|
||||
placeholder="Please input"
|
||||
v-model="input10"
|
||||
v-model="input"
|
||||
clearable>
|
||||
</el-input>
|
||||
|
||||
|
|
@ -68,7 +68,7 @@ export default {
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
input10: ''
|
||||
input: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -81,13 +81,13 @@ export default {
|
|||
:::demo Make a toggleable password Input with the `show-password` attribute.
|
||||
|
||||
```html
|
||||
<el-input placeholder="Please input password" v-model="input11" show-password></el-input>
|
||||
<el-input placeholder="Please input password" v-model="input" show-password></el-input>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input11: ''
|
||||
input: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -106,24 +106,24 @@ Add an icon to indicate input type.
|
|||
<el-input
|
||||
placeholder="Pick a date"
|
||||
suffix-icon="el-icon-date"
|
||||
v-model="input2">
|
||||
v-model="input1">
|
||||
</el-input>
|
||||
<el-input
|
||||
placeholder="Type something"
|
||||
prefix-icon="el-icon-search"
|
||||
v-model="input21">
|
||||
v-model="input2">
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="demo-input-suffix">
|
||||
<span class="demo-input-label">Using slots</span>
|
||||
<el-input
|
||||
placeholder="Pick a date"
|
||||
v-model="input22">
|
||||
v-model="input3">
|
||||
<i slot="suffix" class="el-input__icon el-icon-date"></i>
|
||||
</el-input>
|
||||
<el-input
|
||||
placeholder="Type something"
|
||||
v-model="input23">
|
||||
v-model="input4">
|
||||
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
||||
</el-input>
|
||||
</div>
|
||||
|
|
@ -139,10 +139,10 @@ Add an icon to indicate input type.
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
input1: '',
|
||||
input2: '',
|
||||
input21: '',
|
||||
input22: '',
|
||||
input23: ''
|
||||
input3: '',
|
||||
input4: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -187,22 +187,22 @@ Setting the `autosize` prop for a textarea type of Input makes the height to aut
|
|||
type="textarea"
|
||||
autosize
|
||||
placeholder="Please input"
|
||||
v-model="textarea2">
|
||||
v-model="textarea1">
|
||||
</el-input>
|
||||
<div style="margin: 20px 0;"></div>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 2, maxRows: 4}"
|
||||
placeholder="Please input"
|
||||
v-model="textarea3">
|
||||
v-model="textarea2">
|
||||
</el-input>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
textarea2: '',
|
||||
textarea3: ''
|
||||
textarea1: '',
|
||||
textarea2: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -218,17 +218,17 @@ Prepend or append an element, generally a label or a button.
|
|||
|
||||
```html
|
||||
<div>
|
||||
<el-input placeholder="Please input" v-model="input3">
|
||||
<el-input placeholder="Please input" v-model="input1">
|
||||
<template slot="prepend">Http://</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div style="margin-top: 15px;">
|
||||
<el-input placeholder="Please input" v-model="input4">
|
||||
<el-input placeholder="Please input" v-model="input2">
|
||||
<template slot="append">.com</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div style="margin-top: 15px;">
|
||||
<el-input placeholder="Please input" v-model="input5" class="input-with-select">
|
||||
<el-input placeholder="Please input" v-model="input3" class="input-with-select">
|
||||
<el-select v-model="select" slot="prepend" placeholder="Select">
|
||||
<el-option label="Restaurant" value="1"></el-option>
|
||||
<el-option label="Order No." value="2"></el-option>
|
||||
|
|
@ -250,9 +250,9 @@ Prepend or append an element, generally a label or a button.
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
input1: '',
|
||||
input2: '',
|
||||
input3: '',
|
||||
input4: '',
|
||||
input5: '',
|
||||
select: ''
|
||||
}
|
||||
}
|
||||
|
|
@ -268,22 +268,22 @@ export default {
|
|||
<div class="demo-input-size">
|
||||
<el-input
|
||||
placeholder="Please Input"
|
||||
v-model="input6">
|
||||
v-model="input1">
|
||||
</el-input>
|
||||
<el-input
|
||||
size="medium"
|
||||
placeholder="Please Input"
|
||||
v-model="input7">
|
||||
v-model="input2">
|
||||
</el-input>
|
||||
<el-input
|
||||
size="small"
|
||||
placeholder="Please Input"
|
||||
v-model="input8">
|
||||
v-model="input3">
|
||||
</el-input>
|
||||
<el-input
|
||||
size="mini"
|
||||
placeholder="Please Input"
|
||||
v-model="input9">
|
||||
v-model="input4">
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
|
|
@ -291,10 +291,10 @@ export default {
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
input6: '',
|
||||
input7: '',
|
||||
input8: '',
|
||||
input9: ''
|
||||
input1: '',
|
||||
input2: '',
|
||||
input3: '',
|
||||
input4: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -383,7 +383,7 @@ Customize how suggestions are displayed.
|
|||
```html
|
||||
<el-autocomplete
|
||||
popper-class="my-autocomplete"
|
||||
v-model="state3"
|
||||
v-model="state"
|
||||
:fetch-suggestions="querySearch"
|
||||
placeholder="Please input"
|
||||
@select="handleSelect">
|
||||
|
|
@ -421,7 +421,7 @@ Customize how suggestions are displayed.
|
|||
data() {
|
||||
return {
|
||||
links: [],
|
||||
state3: ''
|
||||
state: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -469,7 +469,7 @@ Search data from server-side.
|
|||
:::demo
|
||||
```html
|
||||
<el-autocomplete
|
||||
v-model="state4"
|
||||
v-model="state"
|
||||
:fetch-suggestions="querySearchAsync"
|
||||
placeholder="Please input"
|
||||
@select="handleSelect"
|
||||
|
|
@ -479,7 +479,7 @@ Search data from server-side.
|
|||
data() {
|
||||
return {
|
||||
links: [],
|
||||
state4: '',
|
||||
state: '',
|
||||
timeout: null
|
||||
};
|
||||
},
|
||||
|
|
|
|||
|
|
@ -680,7 +680,7 @@ Puede mostrar sólo el último nivel en lugar de todos los niveles.
|
|||
```html
|
||||
<el-cascader
|
||||
:options="options"
|
||||
v-model="selectedOptions3"
|
||||
v-model="selectedOptions"
|
||||
></el-cascader>
|
||||
<script>
|
||||
export default {
|
||||
|
|
@ -881,7 +881,7 @@ Puede mostrar sólo el último nivel en lugar de todos los niveles.
|
|||
label: 'Design Documentation'
|
||||
}]
|
||||
}],
|
||||
selectedOptions3: ['component', 'data', 'tag']
|
||||
selectedOptions: ['component', 'data', 'tag']
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
@ -1114,7 +1114,7 @@ Se puede hacer una carga dinamica de elementos hijos cuando se hace clic en el e
|
|||
|
||||
```html
|
||||
<el-cascader
|
||||
:options="options2"
|
||||
:options="options"
|
||||
@active-item-change="handleItemChange"
|
||||
:props="props"
|
||||
></el-cascader>
|
||||
|
|
@ -1123,7 +1123,7 @@ Se puede hacer una carga dinamica de elementos hijos cuando se hace clic en el e
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
options2: [{
|
||||
options: [{
|
||||
label: 'California',
|
||||
cities: []
|
||||
}, {
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
|
|||
v-model="value2"
|
||||
type="datetime"
|
||||
placeholder="Select date and time"
|
||||
:picker-options="pickerOptions1">
|
||||
:picker-options="pickerOptions">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
|
|
@ -45,7 +45,7 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions1: {
|
||||
pickerOptions: {
|
||||
shortcuts: [{
|
||||
text: 'Today',
|
||||
onClick(picker) {
|
||||
|
|
@ -86,7 +86,7 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
|
|||
<div class="block">
|
||||
<span class="demonstration">Default</span>
|
||||
<el-date-picker
|
||||
v-model="value4"
|
||||
v-model="value1"
|
||||
type="datetimerange"
|
||||
range-separator="To"
|
||||
start-placeholder="Start date"
|
||||
|
|
@ -96,9 +96,9 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
|
|||
<div class="block">
|
||||
<span class="demonstration">With shortcuts</span>
|
||||
<el-date-picker
|
||||
v-model="value5"
|
||||
v-model="value2"
|
||||
type="datetimerange"
|
||||
:picker-options="pickerOptions2"
|
||||
:picker-options="pickerOptions"
|
||||
range-separator="To"
|
||||
start-placeholder="Start date"
|
||||
end-placeholder="End date"
|
||||
|
|
@ -111,7 +111,7 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions2: {
|
||||
pickerOptions: {
|
||||
shortcuts: [{
|
||||
text: 'Last week',
|
||||
onClick(picker) {
|
||||
|
|
@ -138,8 +138,8 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
|
|||
}
|
||||
}]
|
||||
},
|
||||
value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
|
||||
value5: ''
|
||||
value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
|
||||
value2: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
@ -155,7 +155,7 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
|
|||
<div class="block">
|
||||
<span class="demonstration">Start date time 12:00:00</span>
|
||||
<el-date-picker
|
||||
v-model="value6"
|
||||
v-model="value1"
|
||||
type="datetimerange"
|
||||
start-placeholder="Start Date"
|
||||
end-placeholder="End Date"
|
||||
|
|
@ -165,7 +165,7 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
|
|||
<div class="block">
|
||||
<span class="demonstration">Start date time 12:00:00, end date time 08:00:00</span>
|
||||
<el-date-picker
|
||||
v-model="value7"
|
||||
v-model="value2"
|
||||
type="datetimerange"
|
||||
align="right"
|
||||
start-placeholder="Start Date"
|
||||
|
|
@ -179,8 +179,8 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
value6: '',
|
||||
value7: ''
|
||||
value1: '',
|
||||
value2: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -295,19 +295,19 @@ Este ejemplo muestra cómo personalizar sus propias reglas de validación para f
|
|||
:::demo Aquí utilizamos el `status-icon` para reflejar el resultado de la validación como un icono.
|
||||
|
||||
```html
|
||||
<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
|
||||
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
|
||||
<el-form-item label="Password" prop="pass">
|
||||
<el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
|
||||
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Confirm" prop="checkPass">
|
||||
<el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
|
||||
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Age" prop="age">
|
||||
<el-input v-model.number="ruleForm2.age"></el-input>
|
||||
<el-input v-model.number="ruleForm.age"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('ruleForm2')">Submit</el-button>
|
||||
<el-button @click="resetForm('ruleForm2')">Reset</el-button>
|
||||
<el-button type="primary" @click="submitForm('ruleForm')">Submit</el-button>
|
||||
<el-button @click="resetForm('ruleForm')">Reset</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
|
|
@ -333,8 +333,8 @@ Este ejemplo muestra cómo personalizar sus propias reglas de validación para f
|
|||
if (value === '') {
|
||||
callback(new Error('Please input the password'));
|
||||
} else {
|
||||
if (this.ruleForm2.checkPass !== '') {
|
||||
this.$refs.ruleForm2.validateField('checkPass');
|
||||
if (this.ruleForm.checkPass !== '') {
|
||||
this.$refs.ruleForm.validateField('checkPass');
|
||||
}
|
||||
callback();
|
||||
}
|
||||
|
|
@ -342,19 +342,19 @@ Este ejemplo muestra cómo personalizar sus propias reglas de validación para f
|
|||
var validatePass2 = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('Please input the password again'));
|
||||
} else if (value !== this.ruleForm2.pass) {
|
||||
} else if (value !== this.ruleForm.pass) {
|
||||
callback(new Error('Two inputs don\'t match!'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
ruleForm2: {
|
||||
ruleForm: {
|
||||
pass: '',
|
||||
checkPass: '',
|
||||
age: ''
|
||||
},
|
||||
rules2: {
|
||||
rules: {
|
||||
pass: [
|
||||
{ validator: validatePass, trigger: 'blur' }
|
||||
],
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ export default {
|
|||
```html
|
||||
<el-input
|
||||
placeholder="Please input"
|
||||
v-model="input1"
|
||||
v-model="input"
|
||||
:disabled="true">
|
||||
</el-input>
|
||||
|
||||
|
|
@ -45,7 +45,7 @@ export default {
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
input1: ''
|
||||
input: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -61,7 +61,7 @@ export default {
|
|||
```html
|
||||
<el-input
|
||||
placeholder="Please input"
|
||||
v-model="input10"
|
||||
v-model="input"
|
||||
clearable>
|
||||
</el-input>
|
||||
|
||||
|
|
@ -69,7 +69,7 @@ export default {
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
input10: ''
|
||||
input: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -82,13 +82,13 @@ export default {
|
|||
:::demo Haga un input de contraseña conmutable con el atributo `show-password`.
|
||||
|
||||
```html
|
||||
<el-input placeholder="Please input password" v-model="input11" show-password></el-input>
|
||||
<el-input placeholder="Please input password" v-model="input" show-password></el-input>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input11: ''
|
||||
input: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -108,24 +108,24 @@ Añada un icono para indicar el tipo de Input.
|
|||
<el-input
|
||||
placeholder="Pick a date"
|
||||
suffix-icon="el-icon-date"
|
||||
v-model="input2">
|
||||
v-model="input1">
|
||||
</el-input>
|
||||
<el-input
|
||||
placeholder="Type something"
|
||||
prefix-icon="el-icon-search"
|
||||
v-model="input21">
|
||||
v-model="input2">
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="demo-input-suffix">
|
||||
<span class="demo-input-label">Using slots</span>
|
||||
<el-input
|
||||
placeholder="Pick a date"
|
||||
v-model="input22">
|
||||
v-model="input3">
|
||||
<i slot="suffix" class="el-input__icon el-icon-date"></i>
|
||||
</el-input>
|
||||
<el-input
|
||||
placeholder="Type something"
|
||||
v-model="input23">
|
||||
v-model="input4">
|
||||
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
||||
</el-input>
|
||||
</div>
|
||||
|
|
@ -141,10 +141,10 @@ Añada un icono para indicar el tipo de Input.
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
input1: '',
|
||||
input2: '',
|
||||
input21: '',
|
||||
input22: '',
|
||||
input23: ''
|
||||
input3: '',
|
||||
input4: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -191,22 +191,22 @@ El ajuste del prop `autosize` en el tipo de Input textarea hace que la altura se
|
|||
type="textarea"
|
||||
autosize
|
||||
placeholder="Please input"
|
||||
v-model="textarea2">
|
||||
v-model="textarea1">
|
||||
</el-input>
|
||||
<div style="margin: 20px 0;"></div>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 2, maxRows: 4}"
|
||||
placeholder="Please input"
|
||||
v-model="textarea3">
|
||||
v-model="textarea2">
|
||||
</el-input>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
textarea2: '',
|
||||
textarea3: ''
|
||||
textarea1: '',
|
||||
textarea2: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -223,17 +223,17 @@ Añade un elemento antes o después del input, generalmente una etiqueta o un bo
|
|||
|
||||
```html
|
||||
<div>
|
||||
<el-input placeholder="Please input" v-model="input3">
|
||||
<el-input placeholder="Please input" v-model="input1">
|
||||
<template slot="prepend">Http://</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div style="margin-top: 15px;">
|
||||
<el-input placeholder="Please input" v-model="input4">
|
||||
<el-input placeholder="Please input" v-model="input2">
|
||||
<template slot="append">.com</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div style="margin-top: 15px;">
|
||||
<el-input placeholder="Please input" v-model="input5" class="input-with-select">
|
||||
<el-input placeholder="Please input" v-model="input3" class="input-with-select">
|
||||
<el-select v-model="select" slot="prepend" placeholder="Select">
|
||||
<el-option label="Restaurant" value="1"></el-option>
|
||||
<el-option label="Order No." value="2"></el-option>
|
||||
|
|
@ -255,9 +255,9 @@ Añade un elemento antes o después del input, generalmente una etiqueta o un bo
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
input1: '',
|
||||
input2: '',
|
||||
input3: '',
|
||||
input4: '',
|
||||
input5: '',
|
||||
select: ''
|
||||
}
|
||||
}
|
||||
|
|
@ -275,22 +275,22 @@ export default {
|
|||
<div class="demo-input-size">
|
||||
<el-input
|
||||
placeholder="Please Input"
|
||||
v-model="input6">
|
||||
v-model="input1">
|
||||
</el-input>
|
||||
<el-input
|
||||
size="medium"
|
||||
placeholder="Please Input"
|
||||
v-model="input7">
|
||||
v-model="input2">
|
||||
</el-input>
|
||||
<el-input
|
||||
size="small"
|
||||
placeholder="Please Input"
|
||||
v-model="input8">
|
||||
v-model="input2">
|
||||
</el-input>
|
||||
<el-input
|
||||
size="mini"
|
||||
placeholder="Please Input"
|
||||
v-model="input9">
|
||||
v-model="input4">
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
|
|
@ -298,10 +298,10 @@ export default {
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
input6: '',
|
||||
input7: '',
|
||||
input8: '',
|
||||
input9: ''
|
||||
input1: '',
|
||||
input2: '',
|
||||
input2: '',
|
||||
input4: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -394,7 +394,7 @@ Personalice cómo se muestran las sugerencias.
|
|||
```html
|
||||
<el-autocomplete
|
||||
popper-class="my-autocomplete"
|
||||
v-model="state3"
|
||||
v-model="state"
|
||||
:fetch-suggestions="querySearch"
|
||||
placeholder="Please input"
|
||||
@select="handleSelect">
|
||||
|
|
@ -432,7 +432,7 @@ Personalice cómo se muestran las sugerencias.
|
|||
data() {
|
||||
return {
|
||||
links: [],
|
||||
state3: ''
|
||||
state: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -482,7 +482,7 @@ Búsqueda de datos desde el servidor.
|
|||
|
||||
```html
|
||||
<el-autocomplete
|
||||
v-model="state4"
|
||||
v-model="state"
|
||||
:fetch-suggestions="querySearchAsync"
|
||||
placeholder="Please input"
|
||||
@select="handleSelect"
|
||||
|
|
@ -492,7 +492,7 @@ Búsqueda de datos desde el servidor.
|
|||
data() {
|
||||
return {
|
||||
links: [],
|
||||
state4: '',
|
||||
state: '',
|
||||
timeout: null
|
||||
};
|
||||
},
|
||||
|
|
|
|||
|
|
@ -677,7 +677,7 @@ Le champ peut n'afficher que le dernier niveau au lieu de tous.
|
|||
```html
|
||||
<el-cascader
|
||||
:options="options"
|
||||
v-model="selectedOptions3"
|
||||
v-model="selectedOptions"
|
||||
></el-cascader>
|
||||
<script>
|
||||
export default {
|
||||
|
|
@ -878,7 +878,7 @@ Le champ peut n'afficher que le dernier niveau au lieu de tous.
|
|||
label: 'Design Documentation'
|
||||
}]
|
||||
}],
|
||||
selectedOptions3: ['component', 'data', 'tag']
|
||||
selectedOptions: ['component', 'data', 'tag']
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
@ -1109,7 +1109,7 @@ Il est possible de charger dynamiquement les options quand on clique ou passe la
|
|||
:::demo Dans cet exemple, les optionsn'ont pas de données de villes au moment de l'initialisation. Grâce à l'évènement `active-item-change` vous pouvez charger les villes de manière dynamique. De plus, cet exemple montre comment `props` peut être utilisé.
|
||||
```html
|
||||
<el-cascader
|
||||
:options="options2"
|
||||
:options="options"
|
||||
@active-item-change="handleItemChange"
|
||||
:props="props"
|
||||
></el-cascader>
|
||||
|
|
@ -1118,7 +1118,7 @@ Il est possible de charger dynamiquement les options quand on clique ou passe la
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
options2: [{
|
||||
options: [{
|
||||
label: 'California',
|
||||
cities: []
|
||||
}, {
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
|
|||
v-model="value2"
|
||||
type="datetime"
|
||||
placeholder="Selectionnez date et horaire"
|
||||
:picker-options="pickerOptions1">
|
||||
:picker-options="pickerOptions">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
|
|
@ -44,7 +44,7 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions1: {
|
||||
pickerOptions: {
|
||||
shortcuts: [{
|
||||
text: 'Today',
|
||||
onClick(picker) {
|
||||
|
|
@ -85,7 +85,7 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
|
|||
<div class="block">
|
||||
<span class="demonstration">Défaut</span>
|
||||
<el-date-picker
|
||||
v-model="value4"
|
||||
v-model="value1"
|
||||
type="datetimerange"
|
||||
range-separator="à"
|
||||
start-placeholder="Date de début"
|
||||
|
|
@ -95,9 +95,9 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
|
|||
<div class="block">
|
||||
<span class="demonstration">Avec raccourcis</span>
|
||||
<el-date-picker
|
||||
v-model="value5"
|
||||
v-model="value2"
|
||||
type="datetimerange"
|
||||
:picker-options="pickerOptions2"
|
||||
:picker-options="pickerOptions"
|
||||
range-separator="à"
|
||||
start-placeholder="Date de début"
|
||||
end-placeholder="Date de fin"
|
||||
|
|
@ -110,7 +110,7 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions2: {
|
||||
pickerOptions: {
|
||||
shortcuts: [{
|
||||
text: 'Last week',
|
||||
onClick(picker) {
|
||||
|
|
@ -137,8 +137,8 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
|
|||
}
|
||||
}]
|
||||
},
|
||||
value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
|
||||
value5: ''
|
||||
value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
|
||||
value2: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
@ -154,7 +154,7 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
|
|||
<div class="block">
|
||||
<span class="demonstration">Heure de la date de début 12:00:00</span>
|
||||
<el-date-picker
|
||||
v-model="value6"
|
||||
v-model="value1"
|
||||
type="datetimerange"
|
||||
start-placeholder="Date de début"
|
||||
end-placeholder="Date de fin"
|
||||
|
|
@ -164,7 +164,7 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
|
|||
<div class="block">
|
||||
<span class="demonstration">Heure de la date de début 12:00:00, heure de la date de fin 08:00:00</span>
|
||||
<el-date-picker
|
||||
v-model="value7"
|
||||
v-model="value2"
|
||||
type="datetimerange"
|
||||
align="right"
|
||||
start-placeholder="Date de début"
|
||||
|
|
@ -178,8 +178,8 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
value6: '',
|
||||
value7: ''
|
||||
value1: '',
|
||||
value2: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -289,19 +289,19 @@ Cet exemple montre comment vous pouvez personnaliser vos règles de validation p
|
|||
|
||||
:::demo Here we use `status-icon` to reflect validation result as an icon.
|
||||
```html
|
||||
<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
|
||||
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
|
||||
<el-form-item label="Password" prop="pass">
|
||||
<el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
|
||||
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Confirm" prop="checkPass">
|
||||
<el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
|
||||
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Age" prop="age">
|
||||
<el-input v-model.number="ruleForm2.age"></el-input>
|
||||
<el-input v-model.number="ruleForm.age"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('ruleForm2')">Submit</el-button>
|
||||
<el-button @click="resetForm('ruleForm2')">Reset</el-button>
|
||||
<el-button type="primary" @click="submitForm('ruleForm')">Submit</el-button>
|
||||
<el-button @click="resetForm('ruleForm')">Reset</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
|
|
@ -327,8 +327,8 @@ Cet exemple montre comment vous pouvez personnaliser vos règles de validation p
|
|||
if (value === '') {
|
||||
callback(new Error('Please input the password'));
|
||||
} else {
|
||||
if (this.ruleForm2.checkPass !== '') {
|
||||
this.$refs.ruleForm2.validateField('checkPass');
|
||||
if (this.ruleForm.checkPass !== '') {
|
||||
this.$refs.ruleForm.validateField('checkPass');
|
||||
}
|
||||
callback();
|
||||
}
|
||||
|
|
@ -336,19 +336,19 @@ Cet exemple montre comment vous pouvez personnaliser vos règles de validation p
|
|||
var validatePass2 = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('Please input the password again'));
|
||||
} else if (value !== this.ruleForm2.pass) {
|
||||
} else if (value !== this.ruleForm.pass) {
|
||||
callback(new Error('Two inputs don\'t match!'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
ruleForm2: {
|
||||
ruleForm: {
|
||||
pass: '',
|
||||
checkPass: '',
|
||||
age: ''
|
||||
},
|
||||
rules2: {
|
||||
rules: {
|
||||
pass: [
|
||||
{ validator: validatePass, trigger: 'blur' }
|
||||
],
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ export default {
|
|||
```html
|
||||
<el-input
|
||||
placeholder="Entrez quelque chose"
|
||||
v-model="input1"
|
||||
v-model="input"
|
||||
:disabled="true">
|
||||
</el-input>
|
||||
|
||||
|
|
@ -44,7 +44,7 @@ export default {
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
input1: ''
|
||||
input: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -59,7 +59,7 @@ export default {
|
|||
```html
|
||||
<el-input
|
||||
placeholder="Entrez quelque chose"
|
||||
v-model="input10"
|
||||
v-model="input"
|
||||
clearable>
|
||||
</el-input>
|
||||
|
||||
|
|
@ -67,7 +67,7 @@ export default {
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
input10: ''
|
||||
input: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -80,13 +80,13 @@ export default {
|
|||
:::demo Créez un champ de mot de passe avec icône de visualisation grâce à l'attribut `show-password`.
|
||||
|
||||
```html
|
||||
<el-input placeholder="Entrez votre mot de passe" v-model="input11" show-password></el-input>
|
||||
<el-input placeholder="Entrez votre mot de passe" v-model="input" show-password></el-input>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input11: ''
|
||||
input: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -105,24 +105,24 @@ Ajoutez une icône pour indiquer le type d'input.
|
|||
<el-input
|
||||
placeholder="Entrez une date"
|
||||
suffix-icon="el-icon-date"
|
||||
v-model="input2">
|
||||
v-model="input1">
|
||||
</el-input>
|
||||
<el-input
|
||||
placeholder="Entrez du texte"
|
||||
prefix-icon="el-icon-search"
|
||||
v-model="input21">
|
||||
v-model="input2">
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="demo-input-suffix">
|
||||
<span class="demo-input-label">Avec les slots</span>
|
||||
<el-input
|
||||
placeholder="Entrez une date"
|
||||
v-model="input22">
|
||||
v-model="input3">
|
||||
<i slot="suffix" class="el-input__icon el-icon-date"></i>
|
||||
</el-input>
|
||||
<el-input
|
||||
placeholder="Entrez du texte"
|
||||
v-model="input23">
|
||||
v-model="input4">
|
||||
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
||||
</el-input>
|
||||
</div>
|
||||
|
|
@ -138,10 +138,10 @@ Ajoutez une icône pour indiquer le type d'input.
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
input1: '',
|
||||
input2: '',
|
||||
input21: '',
|
||||
input22: '',
|
||||
input23: ''
|
||||
input3: '',
|
||||
input4: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -186,22 +186,22 @@ Configurer la propriété `autosize` pour une zone de texte permet de rendre la
|
|||
type="textarea"
|
||||
autosize
|
||||
placeholder="Entrez quelque chose"
|
||||
v-model="textarea2">
|
||||
v-model="textarea1">
|
||||
</el-input>
|
||||
<div style="margin: 20px 0;"></div>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 2, maxRows: 4}"
|
||||
placeholder="Entrez quelque chose"
|
||||
v-model="textarea3">
|
||||
v-model="textarea2">
|
||||
</el-input>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
textarea2: '',
|
||||
textarea3: ''
|
||||
textarea1: '',
|
||||
textarea2: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -217,17 +217,17 @@ Ajouter un élément avant ou après l'input, généralement du texte ou un bout
|
|||
|
||||
```html
|
||||
<div>
|
||||
<el-input placeholder="Entrez quelque chose" v-model="input3">
|
||||
<el-input placeholder="Entrez quelque chose" v-model="input1">
|
||||
<template slot="prepend">Http://</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div style="margin-top: 15px;">
|
||||
<el-input placeholder="Entrez quelque chose" v-model="input4">
|
||||
<el-input placeholder="Entrez quelque chose" v-model="input2">
|
||||
<template slot="append">.com</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div style="margin-top: 15px;">
|
||||
<el-input placeholder="Entrez quelque chose" v-model="input5" class="input-with-select">
|
||||
<el-input placeholder="Entrez quelque chose" v-model="input3" class="input-with-select">
|
||||
<el-select v-model="select" slot="prepend" placeholder="Choisir">
|
||||
<el-option label="Restaurant" value="1"></el-option>
|
||||
<el-option label="Num. Commande" value="2"></el-option>
|
||||
|
|
@ -249,9 +249,9 @@ Ajouter un élément avant ou après l'input, généralement du texte ou un bout
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
input1: '',
|
||||
input2: '',
|
||||
input3: '',
|
||||
input4: '',
|
||||
input5: '',
|
||||
select: ''
|
||||
}
|
||||
}
|
||||
|
|
@ -267,22 +267,22 @@ export default {
|
|||
<div class="demo-input-size">
|
||||
<el-input
|
||||
placeholder="Entrez quelque chose"
|
||||
v-model="input6">
|
||||
v-model="input1">
|
||||
</el-input>
|
||||
<el-input
|
||||
size="medium"
|
||||
placeholder="Entrez quelque chose"
|
||||
v-model="input7">
|
||||
v-model="input2">
|
||||
</el-input>
|
||||
<el-input
|
||||
size="small"
|
||||
placeholder="Entrez quelque chose"
|
||||
v-model="input8">
|
||||
v-model="input3">
|
||||
</el-input>
|
||||
<el-input
|
||||
size="mini"
|
||||
placeholder="Entrez quelque chose"
|
||||
v-model="input9">
|
||||
v-model="input4">
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
|
|
@ -290,10 +290,10 @@ export default {
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
input6: '',
|
||||
input7: '',
|
||||
input8: '',
|
||||
input9: ''
|
||||
input1: '',
|
||||
input2: '',
|
||||
input3: '',
|
||||
input4: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -382,7 +382,7 @@ Vous pouvez personnaliser la manière dont les suggestions sont affichées.
|
|||
```html
|
||||
<el-autocomplete
|
||||
popper-class="my-autocomplete"
|
||||
v-model="state3"
|
||||
v-model="state"
|
||||
:fetch-suggestions="querySearch"
|
||||
placeholder="Entrez quelque chose"
|
||||
@select="handleSelect">
|
||||
|
|
@ -420,7 +420,7 @@ Vous pouvez personnaliser la manière dont les suggestions sont affichées.
|
|||
data() {
|
||||
return {
|
||||
links: [],
|
||||
state3: ''
|
||||
state: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -468,7 +468,7 @@ Vous pouvez aller chercher des infos de suggestions sur un serveur distant.
|
|||
:::demo
|
||||
```html
|
||||
<el-autocomplete
|
||||
v-model="state4"
|
||||
v-model="state"
|
||||
:fetch-suggestions="querySearchAsync"
|
||||
placeholder="Entrez quelque chose"
|
||||
@select="handleSelect"
|
||||
|
|
@ -478,7 +478,7 @@ Vous pouvez aller chercher des infos de suggestions sur un serveur distant.
|
|||
data() {
|
||||
return {
|
||||
links: [],
|
||||
state4: '',
|
||||
state: '',
|
||||
timeout: null
|
||||
};
|
||||
},
|
||||
|
|
|
|||
|
|
@ -677,7 +677,7 @@
|
|||
```html
|
||||
<el-cascader
|
||||
:options="options"
|
||||
v-model="selectedOptions3"
|
||||
v-model="selectedOptions"
|
||||
></el-cascader>
|
||||
<script>
|
||||
export default {
|
||||
|
|
@ -878,7 +878,7 @@
|
|||
label: '组件交互文档'
|
||||
}]
|
||||
}],
|
||||
selectedOptions3: ['zujian', 'data', 'tag']
|
||||
selectedOptions: ['zujian', 'data', 'tag']
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
@ -1109,7 +1109,7 @@
|
|||
:::demo 本例的选项数据源在初始化时不包含城市数据。利用`active-item-change`事件，可以在用户点击某个省份时拉取该省份下的城市数据。此外，本例还展示了`props`属性的用法。
|
||||
```html
|
||||
<el-cascader
|
||||
:options="options2"
|
||||
:options="options"
|
||||
@active-item-change="handleItemChange"
|
||||
:props="props"
|
||||
></el-cascader>
|
||||
|
|
@ -1118,7 +1118,7 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
options2: [{
|
||||
options: [{
|
||||
label: '江苏',
|
||||
cities: []
|
||||
}, {
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
|
|||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
align="right"
|
||||
:picker-options="pickerOptions1">
|
||||
:picker-options="pickerOptions">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
|
|
@ -44,7 +44,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions1: {
|
||||
pickerOptions: {
|
||||
shortcuts: [{
|
||||
text: '今天',
|
||||
onClick(picker) {
|
||||
|
|
@ -84,7 +84,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
|
|||
<div class="block">
|
||||
<span class="demonstration">默认</span>
|
||||
<el-date-picker
|
||||
v-model="value4"
|
||||
v-model="value1"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
|
|
@ -94,9 +94,9 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
|
|||
<div class="block">
|
||||
<span class="demonstration">带快捷选项</span>
|
||||
<el-date-picker
|
||||
v-model="value5"
|
||||
v-model="value2"
|
||||
type="datetimerange"
|
||||
:picker-options="pickerOptions2"
|
||||
:picker-options="pickerOptions"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
|
|
@ -109,7 +109,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions2: {
|
||||
pickerOptions: {
|
||||
shortcuts: [{
|
||||
text: '最近一周',
|
||||
onClick(picker) {
|
||||
|
|
@ -136,8 +136,8 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
|
|||
}
|
||||
}]
|
||||
},
|
||||
value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
|
||||
value5: ''
|
||||
value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
|
||||
value2: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
@ -153,7 +153,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
|
|||
<div class="block">
|
||||
<span class="demonstration">起始日期时刻为 12:00:00</span>
|
||||
<el-date-picker
|
||||
v-model="value6"
|
||||
v-model="value1"
|
||||
type="datetimerange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
|
|
@ -163,7 +163,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
|
|||
<div class="block">
|
||||
<span class="demonstration">起始日期时刻为 12:00:00，结束日期时刻为 08:00:00</span>
|
||||
<el-date-picker
|
||||
v-model="value7"
|
||||
v-model="value2"
|
||||
type="datetimerange"
|
||||
align="right"
|
||||
start-placeholder="开始日期"
|
||||
|
|
@ -177,8 +177,8 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
value6: '',
|
||||
value7: ''
|
||||
value1: '',
|
||||
value2: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -285,19 +285,19 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
|
|||
|
||||
:::demo 本例还使用`status-icon`属性为输入框添加了表示校验结果的反馈图标。
|
||||
```html
|
||||
<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
|
||||
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
||||
<el-form-item label="密码" prop="pass">
|
||||
<el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
|
||||
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="checkPass">
|
||||
<el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
|
||||
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="年龄" prop="age">
|
||||
<el-input v-model.number="ruleForm2.age"></el-input>
|
||||
<el-input v-model.number="ruleForm.age"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
|
||||
<el-button @click="resetForm('ruleForm2')">重置</el-button>
|
||||
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
|
||||
<el-button @click="resetForm('ruleForm')">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
|
|
@ -323,8 +323,8 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
|
|||
if (value === '') {
|
||||
callback(new Error('请输入密码'));
|
||||
} else {
|
||||
if (this.ruleForm2.checkPass !== '') {
|
||||
this.$refs.ruleForm2.validateField('checkPass');
|
||||
if (this.ruleForm.checkPass !== '') {
|
||||
this.$refs.ruleForm.validateField('checkPass');
|
||||
}
|
||||
callback();
|
||||
}
|
||||
|
|
@ -332,19 +332,19 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
|
|||
var validatePass2 = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请再次输入密码'));
|
||||
} else if (value !== this.ruleForm2.pass) {
|
||||
} else if (value !== this.ruleForm.pass) {
|
||||
callback(new Error('两次输入密码不一致!'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
ruleForm2: {
|
||||
ruleForm: {
|
||||
pass: '',
|
||||
checkPass: '',
|
||||
age: ''
|
||||
},
|
||||
rules2: {
|
||||
rules: {
|
||||
pass: [
|
||||
{ validator: validatePass, trigger: 'blur' }
|
||||
],
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ export default {
|
|||
```html
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
v-model="input1"
|
||||
v-model="input"
|
||||
:disabled="true">
|
||||
</el-input>
|
||||
|
||||
|
|
@ -43,7 +43,7 @@ export default {
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
input1: ''
|
||||
input: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -58,7 +58,7 @@ export default {
|
|||
```html
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
v-model="input10"
|
||||
v-model="input"
|
||||
clearable>
|
||||
</el-input>
|
||||
|
||||
|
|
@ -66,7 +66,7 @@ export default {
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
input10: ''
|
||||
input: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -79,13 +79,13 @@ export default {
|
|||
:::demo 使用`show-password`属性即可得到一个可切换显示隐藏的密码框
|
||||
|
||||
```html
|
||||
<el-input placeholder="请输入密码" v-model="input11" show-password></el-input>
|
||||
<el-input placeholder="请输入密码" v-model="input" show-password></el-input>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input11: ''
|
||||
input: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -104,24 +104,24 @@ export default {
|
|||
<el-input
|
||||
placeholder="请选择日期"
|
||||
suffix-icon="el-icon-date"
|
||||
v-model="input2">
|
||||
v-model="input1">
|
||||
</el-input>
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
prefix-icon="el-icon-search"
|
||||
v-model="input21">
|
||||
v-model="input2">
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="demo-input-suffix">
|
||||
slot 方式：
|
||||
<el-input
|
||||
placeholder="请选择日期"
|
||||
v-model="input22">
|
||||
v-model="input3">
|
||||
<i slot="suffix" class="el-input__icon el-icon-date"></i>
|
||||
</el-input>
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
v-model="input23">
|
||||
v-model="input4">
|
||||
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
||||
</el-input>
|
||||
</div>
|
||||
|
|
@ -130,10 +130,10 @@ export default {
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
input1: '',
|
||||
input2: '',
|
||||
input21: '',
|
||||
input22: '',
|
||||
input23: ''
|
||||
input3: '',
|
||||
input4: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -176,22 +176,22 @@ export default {
|
|||
type="textarea"
|
||||
autosize
|
||||
placeholder="请输入内容"
|
||||
v-model="textarea2">
|
||||
v-model="textarea1">
|
||||
</el-input>
|
||||
<div style="margin: 20px 0;"></div>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 2, maxRows: 4}"
|
||||
placeholder="请输入内容"
|
||||
v-model="textarea3">
|
||||
v-model="textarea2">
|
||||
</el-input>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
textarea2: '',
|
||||
textarea3: ''
|
||||
textarea1: '',
|
||||
textarea2: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -206,17 +206,17 @@ export default {
|
|||
:::demo 可通过 slot 来指定在 input 中前置或者后置内容。
|
||||
```html
|
||||
<div>
|
||||
<el-input placeholder="请输入内容" v-model="input3">
|
||||
<el-input placeholder="请输入内容" v-model="input1">
|
||||
<template slot="prepend">Http://</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div style="margin-top: 15px;">
|
||||
<el-input placeholder="请输入内容" v-model="input4">
|
||||
<el-input placeholder="请输入内容" v-model="input2">
|
||||
<template slot="append">.com</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div style="margin-top: 15px;">
|
||||
<el-input placeholder="请输入内容" v-model="input5" class="input-with-select">
|
||||
<el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
|
||||
<el-select v-model="select" slot="prepend" placeholder="请选择">
|
||||
<el-option label="餐厅名" value="1"></el-option>
|
||||
<el-option label="订单号" value="2"></el-option>
|
||||
|
|
@ -237,9 +237,9 @@ export default {
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
input1: '',
|
||||
input2: '',
|
||||
input3: '',
|
||||
input4: '',
|
||||
input5: '',
|
||||
select: ''
|
||||
}
|
||||
}
|
||||
|
|
@ -256,25 +256,25 @@ export default {
|
|||
<el-input
|
||||
placeholder="请输入内容"
|
||||
suffix-icon="el-icon-date"
|
||||
v-model="input6">
|
||||
v-model="input1">
|
||||
</el-input>
|
||||
<el-input
|
||||
size="medium"
|
||||
placeholder="请输入内容"
|
||||
suffix-icon="el-icon-date"
|
||||
v-model="input7">
|
||||
v-model="input2">
|
||||
</el-input>
|
||||
<el-input
|
||||
size="small"
|
||||
placeholder="请输入内容"
|
||||
suffix-icon="el-icon-date"
|
||||
v-model="input8">
|
||||
v-model="input3">
|
||||
</el-input>
|
||||
<el-input
|
||||
size="mini"
|
||||
placeholder="请输入内容"
|
||||
suffix-icon="el-icon-date"
|
||||
v-model="input9">
|
||||
v-model="input4">
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
|
|
@ -282,10 +282,10 @@ export default {
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
input6: '',
|
||||
input7: '',
|
||||
input8: '',
|
||||
input9: ''
|
||||
input1: '',
|
||||
input2: '',
|
||||
input3: '',
|
||||
input4: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -415,7 +415,7 @@ export default {
|
|||
```html
|
||||
<el-autocomplete
|
||||
popper-class="my-autocomplete"
|
||||
v-model="state3"
|
||||
v-model="state"
|
||||
:fetch-suggestions="querySearch"
|
||||
placeholder="请输入内容"
|
||||
@select="handleSelect">
|
||||
|
|
@ -457,7 +457,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
restaurants: [],
|
||||
state3: ''
|
||||
state: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -546,7 +546,7 @@ export default {
|
|||
:::demo
|
||||
```html
|
||||
<el-autocomplete
|
||||
v-model="state4"
|
||||
v-model="state"
|
||||
:fetch-suggestions="querySearchAsync"
|
||||
placeholder="请输入内容"
|
||||
@select="handleSelect"
|
||||
|
|
@ -556,7 +556,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
restaurants: [],
|
||||
state4: '',
|
||||
state: '',
|
||||
timeout: null
|
||||
};
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue