test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-12-04 05:09:43 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Docs:rename variable in docs (#15105)

Browse Source
This commit is contained in:
刘鹏龙 2019-04-15 14:05:00 +08:00 committed by hetech
parent c6dbd286e1
commit 89ebab0dd4
16 changed files with 244 additions and 244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
examples/docs/en-US/cascader.md
View File

@ -677,7 +677,7 @@ The input can display only the last level instead of all levels.
```html ```html
<el-cascader <el-cascader
:options="options" :options="options"
v-model="selectedOptions3" v-model="selectedOptions"
></el-cascader> ></el-cascader>
<script> <script>
export default { export default {
@ -878,7 +878,7 @@ The input can display only the last level instead of all levels.
label: 'Design Documentation' 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. :::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 ```html
<el-cascader <el-cascader
:options="options2" :options="options"
@active-item-change="handleItemChange" @active-item-change="handleItemChange"
:props="props" :props="props"
></el-cascader> ></el-cascader>
@ -1118,7 +1118,7 @@ Load child options when their parent option is clicked or hovered over.
export default { export default {
data() { data() {
return { return {
options2: [{ options: [{
label: 'California', label: 'California',
cities: [] cities: []
}, { }, {

24
examples/docs/en-US/datetime-picker.md
View File

@ -26,7 +26,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
v-model="value2" v-model="value2"
type="datetime" type="datetime"
placeholder="Select date and time" placeholder="Select date and time"
:picker-options="pickerOptions1"> :picker-options="pickerOptions">
</el-date-picker> </el-date-picker>
</div> </div>
<div class="block"> <div class="block">
@ -44,7 +44,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
export default { export default {
data() { data() {
return { return {
pickerOptions1: { pickerOptions: {
shortcuts: [{ shortcuts: [{
text: 'Today', text: 'Today',
onClick(picker) { onClick(picker) {
@ -85,7 +85,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
<div class="block"> <div class="block">
<span class="demonstration">Default</span> <span class="demonstration">Default</span>
<el-date-picker <el-date-picker
v-model="value4" v-model="value1"
type="datetimerange" type="datetimerange"
range-separator="To" range-separator="To"
start-placeholder="Start date" start-placeholder="Start date"
@ -95,9 +95,9 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
<div class="block"> <div class="block">
<span class="demonstration">With shortcuts</span> <span class="demonstration">With shortcuts</span>
<el-date-picker <el-date-picker
v-model="value5" v-model="value2"
type="datetimerange" type="datetimerange"
:picker-options="pickerOptions2" :picker-options="pickerOptions"
range-separator="To" range-separator="To"
start-placeholder="Start date" start-placeholder="Start date"
end-placeholder="End date" end-placeholder="End date"
@ -110,7 +110,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
export default { export default {
data() { data() {
return { return {
pickerOptions2: { pickerOptions: {
shortcuts: [{ shortcuts: [{
text: 'Last week', text: 'Last week',
onClick(picker) { 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)], value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
value5: '' value2: ''
}; };
} }
}; };
@ -154,7 +154,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
<div class="block"> <div class="block">
<span class="demonstration">Start date time 12:00:00</span> <span class="demonstration">Start date time 12:00:00</span>
<el-date-picker <el-date-picker
v-model="value6" v-model="value1"
type="datetimerange" type="datetimerange"
start-placeholder="Start Date" start-placeholder="Start Date"
end-placeholder="End Date" end-placeholder="End Date"
@ -164,7 +164,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
<div class="block"> <div class="block">
<span class="demonstration">Start date time 12:00:00, end date time 08:00:00</span> <span class="demonstration">Start date time 12:00:00, end date time 08:00:00</span>
<el-date-picker <el-date-picker
v-model="value7" v-model="value2"
type="datetimerange" type="datetimerange"
align="right" align="right"
start-placeholder="Start Date" start-placeholder="Start Date"
@ -178,8 +178,8 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
export default { export default {
data() { data() {
return { return {
value6: '', value1: '',
value7: '' value2: ''
}; };
} }
}; };

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

@ -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. :::demo Here we use `status-icon` to reflect validation result as an icon.
```html ```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-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>
<el-form-item label="Confirm" prop="checkPass"> <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>
<el-form-item label="Age" prop="age"> <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-form-item> <el-form-item>
<el-button type="primary" @click="submitForm('ruleForm2')">Submit</el-button> <el-button type="primary" @click="submitForm('ruleForm')">Submit</el-button>
<el-button @click="resetForm('ruleForm2')">Reset</el-button> <el-button @click="resetForm('ruleForm')">Reset</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<script> <script>
@ -327,8 +327,8 @@ This example shows how to customize your own validation rules to finish a two-fa
if (value === '') { if (value === '') {
callback(new Error('Please input the password')); callback(new Error('Please input the password'));
} else { } else {
if (this.ruleForm2.checkPass !== '') { if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm2.validateField('checkPass'); this.$refs.ruleForm.validateField('checkPass');
} }
callback(); 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) => { var validatePass2 = (rule, value, callback) => {
if (value === '') { if (value === '') {
callback(new Error('Please input the password again')); 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!')); callback(new Error('Two inputs don\'t match!'));
} else { } else {
callback(); callback();
} }
}; };
return { return {
ruleForm2: { ruleForm: {
pass: '', pass: '',
checkPass: '', checkPass: '',
age: '' age: ''
}, },
rules2: { rules: {
pass: [ pass: [
{ validator: validatePass, trigger: 'blur' } { validator: validatePass, trigger: 'blur' }
], ],

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

@ -37,7 +37,7 @@ export default {
```html ```html
<el-input <el-input
placeholder="Please input" placeholder="Please input"
v-model="input1" v-model="input"
:disabled="true"> :disabled="true">
</el-input> </el-input>
@ -45,7 +45,7 @@ export default {
export default { export default {
data() { data() {
return { return {
input1: '' input: ''
} }
} }
} }
@ -60,7 +60,7 @@ export default {
```html ```html
<el-input <el-input
placeholder="Please input" placeholder="Please input"
v-model="input10" v-model="input"
clearable> clearable>
</el-input> </el-input>
@ -68,7 +68,7 @@ export default {
export default { export default {
data() { data() {
return { return {
input10: '' input: ''
} }
} }
} }
@ -81,13 +81,13 @@ export default {
:::demo Make a toggleable password Input with the `show-password` attribute. :::demo Make a toggleable password Input with the `show-password` attribute.
```html ```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> <script>
export default { export default {
data() { data() {
return { return {
input11: '' input: ''
} }
} }
} }
@ -106,24 +106,24 @@ Add an icon to indicate input type.
<el-input <el-input
placeholder="Pick a date" placeholder="Pick a date"
suffix-icon="el-icon-date" suffix-icon="el-icon-date"
v-model="input2"> v-model="input1">
</el-input> </el-input>
<el-input <el-input
placeholder="Type something" placeholder="Type something"
prefix-icon="el-icon-search" prefix-icon="el-icon-search"
v-model="input21"> v-model="input2">
</el-input> </el-input>
</div> </div>
<div class="demo-input-suffix"> <div class="demo-input-suffix">
<span class="demo-input-label">Using slots</span> <span class="demo-input-label">Using slots</span>
<el-input <el-input
placeholder="Pick a date" placeholder="Pick a date"
v-model="input22"> v-model="input3">
<i slot="suffix" class="el-input__icon el-icon-date"></i> <i slot="suffix" class="el-input__icon el-icon-date"></i>
</el-input> </el-input>
<el-input <el-input
placeholder="Type something" placeholder="Type something"
v-model="input23"> v-model="input4">
<i slot="prefix" class="el-input__icon el-icon-search"></i> <i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input> </el-input>
</div> </div>
@ -139,10 +139,10 @@ Add an icon to indicate input type.
export default { export default {
data() { data() {
return { return {
input1: '',
input2: '', input2: '',
input21: '', input3: '',
input22: '', input4: ''
input23: ''
} }
} }
} }
@ -187,22 +187,22 @@ Setting the `autosize` prop for a textarea type of Input makes the height to aut
type="textarea" type="textarea"
autosize autosize
placeholder="Please input" placeholder="Please input"
v-model="textarea2"> v-model="textarea1">
</el-input> </el-input>
<div style="margin: 20px 0;"></div> <div style="margin: 20px 0;"></div>
<el-input <el-input
type="textarea" type="textarea"
:autosize="{ minRows: 2, maxRows: 4}" :autosize="{ minRows: 2, maxRows: 4}"
placeholder="Please input" placeholder="Please input"
v-model="textarea3"> v-model="textarea2">
</el-input> </el-input>
<script> <script>
export default { export default {
data() { data() {
return { return {
textarea2: '', textarea1: '',
textarea3: '' textarea2: ''
} }
} }
} }
@ -218,17 +218,17 @@ Prepend or append an element, generally a label or a button.
```html ```html
<div> <div>
<el-input placeholder="Please input" v-model="input3"> <el-input placeholder="Please input" v-model="input1">
<template slot="prepend">Http://</template> <template slot="prepend">Http://</template>
</el-input> </el-input>
</div> </div>
<div style="margin-top: 15px;"> <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> <template slot="append">.com</template>
</el-input> </el-input>
</div> </div>
<div style="margin-top: 15px;"> <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-select v-model="select" slot="prepend" placeholder="Select">
<el-option label="Restaurant" value="1"></el-option> <el-option label="Restaurant" value="1"></el-option>
<el-option label="Order No." value="2"></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 { export default {
data() { data() {
return { return {
input1: '',
input2: '',
input3: '', input3: '',
input4: '',
input5: '',
select: '' select: ''
} }
} }
@ -268,22 +268,22 @@ export default {
<div class="demo-input-size"> <div class="demo-input-size">
<el-input <el-input
placeholder="Please Input" placeholder="Please Input"
v-model="input6"> v-model="input1">
</el-input> </el-input>
<el-input <el-input
size="medium" size="medium"
placeholder="Please Input" placeholder="Please Input"
v-model="input7"> v-model="input2">
</el-input> </el-input>
<el-input <el-input
size="small" size="small"
placeholder="Please Input" placeholder="Please Input"
v-model="input8"> v-model="input3">
</el-input> </el-input>
<el-input <el-input
size="mini" size="mini"
placeholder="Please Input" placeholder="Please Input"
v-model="input9"> v-model="input4">
</el-input> </el-input>
</div> </div>
@ -291,10 +291,10 @@ export default {
export default { export default {
data() { data() {
return { return {
input6: '', input1: '',
input7: '', input2: '',
input8: '', input3: '',
input9: '' input4: ''
} }
} }
} }
@ -383,7 +383,7 @@ Customize how suggestions are displayed.
```html ```html
<el-autocomplete <el-autocomplete
popper-class="my-autocomplete" popper-class="my-autocomplete"
v-model="state3" v-model="state"
:fetch-suggestions="querySearch" :fetch-suggestions="querySearch"
placeholder="Please input" placeholder="Please input"
@select="handleSelect"> @select="handleSelect">
@ -421,7 +421,7 @@ Customize how suggestions are displayed.
data() { data() {
return { return {
links: [], links: [],
state3: '' state: ''
}; };
}, },
methods: { methods: {
@ -469,7 +469,7 @@ Search data from server-side.
:::demo :::demo
```html ```html
<el-autocomplete <el-autocomplete
v-model="state4" v-model="state"
:fetch-suggestions="querySearchAsync" :fetch-suggestions="querySearchAsync"
placeholder="Please input" placeholder="Please input"
@select="handleSelect" @select="handleSelect"
@ -479,7 +479,7 @@ Search data from server-side.
data() { data() {
return { return {
links: [], links: [],
state4: '', state: '',
timeout: null timeout: null
}; };
}, },

8
examples/docs/es/cascader.md
View File

@ -680,7 +680,7 @@ Puede mostrar sólo el último nivel en lugar de todos los niveles.
```html ```html
<el-cascader <el-cascader
:options="options" :options="options"
v-model="selectedOptions3" v-model="selectedOptions"
></el-cascader> ></el-cascader>
<script> <script>
export default { export default {
@ -881,7 +881,7 @@ Puede mostrar sólo el último nivel en lugar de todos los niveles.
label: 'Design Documentation' 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 ```html
<el-cascader <el-cascader
:options="options2" :options="options"
@active-item-change="handleItemChange" @active-item-change="handleItemChange"
:props="props" :props="props"
></el-cascader> ></el-cascader>
@ -1123,7 +1123,7 @@ Se puede hacer una carga dinamica de elementos hijos cuando se hace clic en el e
export default { export default {
data() { data() {
return { return {
options2: [{ options: [{
label: 'California', label: 'California',
cities: [] cities: []
}, { }, {

24
examples/docs/es/datetime-picker.md
View File

@ -27,7 +27,7 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
v-model="value2" v-model="value2"
type="datetime" type="datetime"
placeholder="Select date and time" placeholder="Select date and time"
:picker-options="pickerOptions1"> :picker-options="pickerOptions">
</el-date-picker> </el-date-picker>
</div> </div>
<div class="block"> <div class="block">
@ -45,7 +45,7 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
export default { export default {
data() { data() {
return { return {
pickerOptions1: { pickerOptions: {
shortcuts: [{ shortcuts: [{
text: 'Today', text: 'Today',
onClick(picker) { onClick(picker) {
@ -86,7 +86,7 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
<div class="block"> <div class="block">
<span class="demonstration">Default</span> <span class="demonstration">Default</span>
<el-date-picker <el-date-picker
v-model="value4" v-model="value1"
type="datetimerange" type="datetimerange"
range-separator="To" range-separator="To"
start-placeholder="Start date" 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"> <div class="block">
<span class="demonstration">With shortcuts</span> <span class="demonstration">With shortcuts</span>
<el-date-picker <el-date-picker
v-model="value5" v-model="value2"
type="datetimerange" type="datetimerange"
:picker-options="pickerOptions2" :picker-options="pickerOptions"
range-separator="To" range-separator="To"
start-placeholder="Start date" start-placeholder="Start date"
end-placeholder="End 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 { export default {
data() { data() {
return { return {
pickerOptions2: { pickerOptions: {
shortcuts: [{ shortcuts: [{
text: 'Last week', text: 'Last week',
onClick(picker) { 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)], value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
value5: '' value2: ''
}; };
} }
}; };
@ -155,7 +155,7 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
<div class="block"> <div class="block">
<span class="demonstration">Start date time 12:00:00</span> <span class="demonstration">Start date time 12:00:00</span>
<el-date-picker <el-date-picker
v-model="value6" v-model="value1"
type="datetimerange" type="datetimerange"
start-placeholder="Start Date" start-placeholder="Start Date"
end-placeholder="End 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"> <div class="block">
<span class="demonstration">Start date time 12:00:00, end date time 08:00:00</span> <span class="demonstration">Start date time 12:00:00, end date time 08:00:00</span>
<el-date-picker <el-date-picker
v-model="value7" v-model="value2"
type="datetimerange" type="datetimerange"
align="right" align="right"
start-placeholder="Start Date" start-placeholder="Start Date"
@ -179,8 +179,8 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
export default { export default {
data() { data() {
return { return {
value6: '', value1: '',
value7: '' value2: ''
}; };
} }
}; };

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

@ -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. :::demo Aquí utilizamos el `status-icon` para reflejar el resultado de la validación como un icono.
```html ```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-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>
<el-form-item label="Confirm" prop="checkPass"> <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>
<el-form-item label="Age" prop="age"> <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-form-item> <el-form-item>
<el-button type="primary" @click="submitForm('ruleForm2')">Submit</el-button> <el-button type="primary" @click="submitForm('ruleForm')">Submit</el-button>
<el-button @click="resetForm('ruleForm2')">Reset</el-button> <el-button @click="resetForm('ruleForm')">Reset</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<script> <script>
@ -333,8 +333,8 @@ Este ejemplo muestra cómo personalizar sus propias reglas de validación para f
if (value === '') { if (value === '') {
callback(new Error('Please input the password')); callback(new Error('Please input the password'));
} else { } else {
if (this.ruleForm2.checkPass !== '') { if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm2.validateField('checkPass'); this.$refs.ruleForm.validateField('checkPass');
} }
callback(); callback();
} }
@ -342,19 +342,19 @@ Este ejemplo muestra cómo personalizar sus propias reglas de validación para f
var validatePass2 = (rule, value, callback) => { var validatePass2 = (rule, value, callback) => {
if (value === '') { if (value === '') {
callback(new Error('Please input the password again')); 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!')); callback(new Error('Two inputs don\'t match!'));
} else { } else {
callback(); callback();
} }
}; };
return { return {
ruleForm2: { ruleForm: {
pass: '', pass: '',
checkPass: '', checkPass: '',
age: '' age: ''
}, },
rules2: { rules: {
pass: [ pass: [
{ validator: validatePass, trigger: 'blur' } { validator: validatePass, trigger: 'blur' }
], ],

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

@ -37,7 +37,7 @@ export default {
```html ```html
<el-input <el-input
placeholder="Please input" placeholder="Please input"
v-model="input1" v-model="input"
:disabled="true"> :disabled="true">
</el-input> </el-input>
@ -45,7 +45,7 @@ export default {
export default { export default {
data() { data() {
return { return {
input1: '' input: ''
} }
} }
} }
@ -61,7 +61,7 @@ export default {
```html ```html
<el-input <el-input
placeholder="Please input" placeholder="Please input"
v-model="input10" v-model="input"
clearable> clearable>
</el-input> </el-input>
@ -69,7 +69,7 @@ export default {
export default { export default {
data() { data() {
return { return {
input10: '' input: ''
} }
} }
} }
@ -82,13 +82,13 @@ export default {
:::demo Haga un input de contraseña conmutable con el atributo `show-password`. :::demo Haga un input de contraseña conmutable con el atributo `show-password`.
```html ```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> <script>
export default { export default {
data() { data() {
return { return {
input11: '' input: ''
} }
} }
} }
@ -108,24 +108,24 @@ Añada un icono para indicar el tipo de Input.
<el-input <el-input
placeholder="Pick a date" placeholder="Pick a date"
suffix-icon="el-icon-date" suffix-icon="el-icon-date"
v-model="input2"> v-model="input1">
</el-input> </el-input>
<el-input <el-input
placeholder="Type something" placeholder="Type something"
prefix-icon="el-icon-search" prefix-icon="el-icon-search"
v-model="input21"> v-model="input2">
</el-input> </el-input>
</div> </div>
<div class="demo-input-suffix"> <div class="demo-input-suffix">
<span class="demo-input-label">Using slots</span> <span class="demo-input-label">Using slots</span>
<el-input <el-input
placeholder="Pick a date" placeholder="Pick a date"
v-model="input22"> v-model="input3">
<i slot="suffix" class="el-input__icon el-icon-date"></i> <i slot="suffix" class="el-input__icon el-icon-date"></i>
</el-input> </el-input>
<el-input <el-input
placeholder="Type something" placeholder="Type something"
v-model="input23"> v-model="input4">
<i slot="prefix" class="el-input__icon el-icon-search"></i> <i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input> </el-input>
</div> </div>
@ -141,10 +141,10 @@ Añada un icono para indicar el tipo de Input.
export default { export default {
data() { data() {
return { return {
input1: '',
input2: '', input2: '',
input21: '', input3: '',
input22: '', input4: ''
input23: ''
} }
} }
} }
@ -191,22 +191,22 @@ El ajuste del prop `autosize` en el tipo de Input textarea hace que la altura se
type="textarea" type="textarea"
autosize autosize
placeholder="Please input" placeholder="Please input"
v-model="textarea2"> v-model="textarea1">
</el-input> </el-input>
<div style="margin: 20px 0;"></div> <div style="margin: 20px 0;"></div>
<el-input <el-input
type="textarea" type="textarea"
:autosize="{ minRows: 2, maxRows: 4}" :autosize="{ minRows: 2, maxRows: 4}"
placeholder="Please input" placeholder="Please input"
v-model="textarea3"> v-model="textarea2">
</el-input> </el-input>
<script> <script>
export default { export default {
data() { data() {
return { return {
textarea2: '', textarea1: '',
textarea3: '' textarea2: ''
} }
} }
} }
@ -223,17 +223,17 @@ Añade un elemento antes o después del input, generalmente una etiqueta o un bo
```html ```html
<div> <div>
<el-input placeholder="Please input" v-model="input3"> <el-input placeholder="Please input" v-model="input1">
<template slot="prepend">Http://</template> <template slot="prepend">Http://</template>
</el-input> </el-input>
</div> </div>
<div style="margin-top: 15px;"> <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> <template slot="append">.com</template>
</el-input> </el-input>
</div> </div>
<div style="margin-top: 15px;"> <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-select v-model="select" slot="prepend" placeholder="Select">
<el-option label="Restaurant" value="1"></el-option> <el-option label="Restaurant" value="1"></el-option>
<el-option label="Order No." value="2"></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 { export default {
data() { data() {
return { return {
input1: '',
input2: '',
input3: '', input3: '',
input4: '',
input5: '',
select: '' select: ''
} }
} }
@ -275,22 +275,22 @@ export default {
<div class="demo-input-size"> <div class="demo-input-size">
<el-input <el-input
placeholder="Please Input" placeholder="Please Input"
v-model="input6"> v-model="input1">
</el-input> </el-input>
<el-input <el-input
size="medium" size="medium"
placeholder="Please Input" placeholder="Please Input"
v-model="input7"> v-model="input2">
</el-input> </el-input>
<el-input <el-input
size="small" size="small"
placeholder="Please Input" placeholder="Please Input"
v-model="input8"> v-model="input2">
</el-input> </el-input>
<el-input <el-input
size="mini" size="mini"
placeholder="Please Input" placeholder="Please Input"
v-model="input9"> v-model="input4">
</el-input> </el-input>
</div> </div>
@ -298,10 +298,10 @@ export default {
export default { export default {
data() { data() {
return { return {
input6: '', input1: '',
input7: '', input2: '',
input8: '', input2: '',
input9: '' input4: ''
} }
} }
} }
@ -394,7 +394,7 @@ Personalice cómo se muestran las sugerencias.
```html ```html
<el-autocomplete <el-autocomplete
popper-class="my-autocomplete" popper-class="my-autocomplete"
v-model="state3" v-model="state"
:fetch-suggestions="querySearch" :fetch-suggestions="querySearch"
placeholder="Please input" placeholder="Please input"
@select="handleSelect"> @select="handleSelect">
@ -432,7 +432,7 @@ Personalice cómo se muestran las sugerencias.
data() { data() {
return { return {
links: [], links: [],
state3: '' state: ''
}; };
}, },
methods: { methods: {
@ -482,7 +482,7 @@ Búsqueda de datos desde el servidor.
```html ```html
<el-autocomplete <el-autocomplete
v-model="state4" v-model="state"
:fetch-suggestions="querySearchAsync" :fetch-suggestions="querySearchAsync"
placeholder="Please input" placeholder="Please input"
@select="handleSelect" @select="handleSelect"
@ -492,7 +492,7 @@ Búsqueda de datos desde el servidor.
data() { data() {
return { return {
links: [], links: [],
state4: '', state: '',
timeout: null timeout: null
}; };
}, },

8
examples/docs/fr-FR/cascader.md
View File

@ -677,7 +677,7 @@ Le champ peut n'afficher que le dernier niveau au lieu de tous.
```html ```html
<el-cascader <el-cascader
:options="options" :options="options"
v-model="selectedOptions3" v-model="selectedOptions"
></el-cascader> ></el-cascader>
<script> <script>
export default { export default {
@ -878,7 +878,7 @@ Le champ peut n'afficher que le dernier niveau au lieu de tous.
label: 'Design Documentation' 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é. :::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 ```html
<el-cascader <el-cascader
:options="options2" :options="options"
@active-item-change="handleItemChange" @active-item-change="handleItemChange"
:props="props" :props="props"
></el-cascader> ></el-cascader>
@ -1118,7 +1118,7 @@ Il est possible de charger dynamiquement les options quand on clique ou passe la
export default { export default {
data() { data() {
return { return {
options2: [{ options: [{
label: 'California', label: 'California',
cities: [] cities: []
}, { }, {

24
examples/docs/fr-FR/datetime-picker.md
View File

@ -26,7 +26,7 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
v-model="value2" v-model="value2"
type="datetime" type="datetime"
placeholder="Selectionnez date et horaire" placeholder="Selectionnez date et horaire"
:picker-options="pickerOptions1"> :picker-options="pickerOptions">
</el-date-picker> </el-date-picker>
</div> </div>
<div class="block"> <div class="block">
@ -44,7 +44,7 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
export default { export default {
data() { data() {
return { return {
pickerOptions1: { pickerOptions: {
shortcuts: [{ shortcuts: [{
text: 'Today', text: 'Today',
onClick(picker) { onClick(picker) {
@ -85,7 +85,7 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
<div class="block"> <div class="block">
<span class="demonstration">Défaut</span> <span class="demonstration">Défaut</span>
<el-date-picker <el-date-picker
v-model="value4" v-model="value1"
type="datetimerange" type="datetimerange"
range-separator="à" range-separator="à"
start-placeholder="Date de début" 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"> <div class="block">
<span class="demonstration">Avec raccourcis</span> <span class="demonstration">Avec raccourcis</span>
<el-date-picker <el-date-picker
v-model="value5" v-model="value2"
type="datetimerange" type="datetimerange"
:picker-options="pickerOptions2" :picker-options="pickerOptions"
range-separator="à" range-separator="à"
start-placeholder="Date de début" start-placeholder="Date de début"
end-placeholder="Date de fin" end-placeholder="Date de fin"
@ -110,7 +110,7 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
export default { export default {
data() { data() {
return { return {
pickerOptions2: { pickerOptions: {
shortcuts: [{ shortcuts: [{
text: 'Last week', text: 'Last week',
onClick(picker) { 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)], value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
value5: '' value2: ''
}; };
} }
}; };
@ -154,7 +154,7 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
<div class="block"> <div class="block">
<span class="demonstration">Heure de la date de début 12:00:00</span> <span class="demonstration">Heure de la date de début 12:00:00</span>
<el-date-picker <el-date-picker
v-model="value6" v-model="value1"
type="datetimerange" type="datetimerange"
start-placeholder="Date de début" start-placeholder="Date de début"
end-placeholder="Date de fin" end-placeholder="Date de fin"
@ -164,7 +164,7 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
<div class="block"> <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> <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 <el-date-picker
v-model="value7" v-model="value2"
type="datetimerange" type="datetimerange"
align="right" align="right"
start-placeholder="Date de début" start-placeholder="Date de début"
@ -178,8 +178,8 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
export default { export default {
data() { data() {
return { return {
value6: '', value1: '',
value7: '' value2: ''
}; };
} }
}; };

22
examples/docs/fr-FR/form.md
View File

@ -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. :::demo Here we use `status-icon` to reflect validation result as an icon.
```html ```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-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>
<el-form-item label="Confirm" prop="checkPass"> <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>
<el-form-item label="Age" prop="age"> <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-form-item> <el-form-item>
<el-button type="primary" @click="submitForm('ruleForm2')">Submit</el-button> <el-button type="primary" @click="submitForm('ruleForm')">Submit</el-button>
<el-button @click="resetForm('ruleForm2')">Reset</el-button> <el-button @click="resetForm('ruleForm')">Reset</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<script> <script>
@ -327,8 +327,8 @@ Cet exemple montre comment vous pouvez personnaliser vos règles de validation p
if (value === '') { if (value === '') {
callback(new Error('Please input the password')); callback(new Error('Please input the password'));
} else { } else {
if (this.ruleForm2.checkPass !== '') { if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm2.validateField('checkPass'); this.$refs.ruleForm.validateField('checkPass');
} }
callback(); callback();
} }
@ -336,19 +336,19 @@ Cet exemple montre comment vous pouvez personnaliser vos règles de validation p
var validatePass2 = (rule, value, callback) => { var validatePass2 = (rule, value, callback) => {
if (value === '') { if (value === '') {
callback(new Error('Please input the password again')); 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!')); callback(new Error('Two inputs don\'t match!'));
} else { } else {
callback(); callback();
} }
}; };
return { return {
ruleForm2: { ruleForm: {
pass: '', pass: '',
checkPass: '', checkPass: '',
age: '' age: ''
}, },
rules2: { rules: {
pass: [ pass: [
{ validator: validatePass, trigger: 'blur' } { validator: validatePass, trigger: 'blur' }
], ],

68
examples/docs/fr-FR/input.md
View File

@ -36,7 +36,7 @@ export default {
```html ```html
<el-input <el-input
placeholder="Entrez quelque chose" placeholder="Entrez quelque chose"
v-model="input1" v-model="input"
:disabled="true"> :disabled="true">
</el-input> </el-input>
@ -44,7 +44,7 @@ export default {
export default { export default {
data() { data() {
return { return {
input1: '' input: ''
} }
} }
} }
@ -59,7 +59,7 @@ export default {
```html ```html
<el-input <el-input
placeholder="Entrez quelque chose" placeholder="Entrez quelque chose"
v-model="input10" v-model="input"
clearable> clearable>
</el-input> </el-input>
@ -67,7 +67,7 @@ export default {
export default { export default {
data() { data() {
return { 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`. :::demo Créez un champ de mot de passe avec icône de visualisation grâce à l'attribut `show-password`.
```html ```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> <script>
export default { export default {
data() { data() {
return { return {
input11: '' input: ''
} }
} }
} }
@ -105,24 +105,24 @@ Ajoutez une icône pour indiquer le type d'input.
<el-input <el-input
placeholder="Entrez une date" placeholder="Entrez une date"
suffix-icon="el-icon-date" suffix-icon="el-icon-date"
v-model="input2"> v-model="input1">
</el-input> </el-input>
<el-input <el-input
placeholder="Entrez du texte" placeholder="Entrez du texte"
prefix-icon="el-icon-search" prefix-icon="el-icon-search"
v-model="input21"> v-model="input2">
</el-input> </el-input>
</div> </div>
<div class="demo-input-suffix"> <div class="demo-input-suffix">
<span class="demo-input-label">Avec les slots</span> <span class="demo-input-label">Avec les slots</span>
<el-input <el-input
placeholder="Entrez une date" placeholder="Entrez une date"
v-model="input22"> v-model="input3">
<i slot="suffix" class="el-input__icon el-icon-date"></i> <i slot="suffix" class="el-input__icon el-icon-date"></i>
</el-input> </el-input>
<el-input <el-input
placeholder="Entrez du texte" placeholder="Entrez du texte"
v-model="input23"> v-model="input4">
<i slot="prefix" class="el-input__icon el-icon-search"></i> <i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input> </el-input>
</div> </div>
@ -138,10 +138,10 @@ Ajoutez une icône pour indiquer le type d'input.
export default { export default {
data() { data() {
return { return {
input1: '',
input2: '', input2: '',
input21: '', input3: '',
input22: '', input4: ''
input23: ''
} }
} }
} }
@ -186,22 +186,22 @@ Configurer la propriété `autosize` pour une zone de texte permet de rendre la
type="textarea" type="textarea"
autosize autosize
placeholder="Entrez quelque chose" placeholder="Entrez quelque chose"
v-model="textarea2"> v-model="textarea1">
</el-input> </el-input>
<div style="margin: 20px 0;"></div> <div style="margin: 20px 0;"></div>
<el-input <el-input
type="textarea" type="textarea"
:autosize="{ minRows: 2, maxRows: 4}" :autosize="{ minRows: 2, maxRows: 4}"
placeholder="Entrez quelque chose" placeholder="Entrez quelque chose"
v-model="textarea3"> v-model="textarea2">
</el-input> </el-input>
<script> <script>
export default { export default {
data() { data() {
return { return {
textarea2: '', textarea1: '',
textarea3: '' textarea2: ''
} }
} }
} }
@ -217,17 +217,17 @@ Ajouter un élément avant ou après l'input, généralement du texte ou un bout
```html ```html
<div> <div>
<el-input placeholder="Entrez quelque chose" v-model="input3"> <el-input placeholder="Entrez quelque chose" v-model="input1">
<template slot="prepend">Http://</template> <template slot="prepend">Http://</template>
</el-input> </el-input>
</div> </div>
<div style="margin-top: 15px;"> <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> <template slot="append">.com</template>
</el-input> </el-input>
</div> </div>
<div style="margin-top: 15px;"> <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-select v-model="select" slot="prepend" placeholder="Choisir">
<el-option label="Restaurant" value="1"></el-option> <el-option label="Restaurant" value="1"></el-option>
<el-option label="Num. Commande" value="2"></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 { export default {
data() { data() {
return { return {
input1: '',
input2: '',
input3: '', input3: '',
input4: '',
input5: '',
select: '' select: ''
} }
} }
@ -267,22 +267,22 @@ export default {
<div class="demo-input-size"> <div class="demo-input-size">
<el-input <el-input
placeholder="Entrez quelque chose" placeholder="Entrez quelque chose"
v-model="input6"> v-model="input1">
</el-input> </el-input>
<el-input <el-input
size="medium" size="medium"
placeholder="Entrez quelque chose" placeholder="Entrez quelque chose"
v-model="input7"> v-model="input2">
</el-input> </el-input>
<el-input <el-input
size="small" size="small"
placeholder="Entrez quelque chose" placeholder="Entrez quelque chose"
v-model="input8"> v-model="input3">
</el-input> </el-input>
<el-input <el-input
size="mini" size="mini"
placeholder="Entrez quelque chose" placeholder="Entrez quelque chose"
v-model="input9"> v-model="input4">
</el-input> </el-input>
</div> </div>
@ -290,10 +290,10 @@ export default {
export default { export default {
data() { data() {
return { return {
input6: '', input1: '',
input7: '', input2: '',
input8: '', input3: '',
input9: '' input4: ''
} }
} }
} }
@ -382,7 +382,7 @@ Vous pouvez personnaliser la manière dont les suggestions sont affichées.
```html ```html
<el-autocomplete <el-autocomplete
popper-class="my-autocomplete" popper-class="my-autocomplete"
v-model="state3" v-model="state"
:fetch-suggestions="querySearch" :fetch-suggestions="querySearch"
placeholder="Entrez quelque chose" placeholder="Entrez quelque chose"
@select="handleSelect"> @select="handleSelect">
@ -420,7 +420,7 @@ Vous pouvez personnaliser la manière dont les suggestions sont affichées.
data() { data() {
return { return {
links: [], links: [],
state3: '' state: ''
}; };
}, },
methods: { methods: {
@ -468,7 +468,7 @@ Vous pouvez aller chercher des infos de suggestions sur un serveur distant.
:::demo :::demo
```html ```html
<el-autocomplete <el-autocomplete
v-model="state4" v-model="state"
:fetch-suggestions="querySearchAsync" :fetch-suggestions="querySearchAsync"
placeholder="Entrez quelque chose" placeholder="Entrez quelque chose"
@select="handleSelect" @select="handleSelect"
@ -478,7 +478,7 @@ Vous pouvez aller chercher des infos de suggestions sur un serveur distant.
data() { data() {
return { return {
links: [], links: [],
state4: '', state: '',
timeout: null timeout: null
}; };
}, },

8
examples/docs/zh-CN/cascader.md
View File

@ -677,7 +677,7 @@
```html ```html
<el-cascader <el-cascader
:options="options" :options="options"
v-model="selectedOptions3" v-model="selectedOptions"
></el-cascader> ></el-cascader>
<script> <script>
export default { export default {
@ -878,7 +878,7 @@
label: '组件交互文档' label: '组件交互文档'
}] }]
}], }],
selectedOptions3: ['zujian', 'data', 'tag'] selectedOptions: ['zujian', 'data', 'tag']
}; };
} }
}; };
@ -1109,7 +1109,7 @@
:::demo 本例的选项数据源在初始化时不包含城市数据。利用`active-item-change`事件，可以在用户点击某个省份时拉取该省份下的城市数据。此外，本例还展示了`props`属性的用法。 :::demo 本例的选项数据源在初始化时不包含城市数据。利用`active-item-change`事件，可以在用户点击某个省份时拉取该省份下的城市数据。此外，本例还展示了`props`属性的用法。
```html ```html
<el-cascader <el-cascader
:options="options2" :options="options"
@active-item-change="handleItemChange" @active-item-change="handleItemChange"
:props="props" :props="props"
></el-cascader> ></el-cascader>
@ -1118,7 +1118,7 @@
export default { export default {
data() { data() {
return { return {
options2: [{ options: [{
label: '江苏', label: '江苏',
cities: [] cities: []
}, { }, {

24
examples/docs/zh-CN/datetime-picker.md
View File

@ -26,7 +26,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
type="datetime" type="datetime"
placeholder="选择日期时间" placeholder="选择日期时间"
align="right" align="right"
:picker-options="pickerOptions1"> :picker-options="pickerOptions">
</el-date-picker> </el-date-picker>
</div> </div>
<div class="block"> <div class="block">
@ -44,7 +44,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
export default { export default {
data() { data() {
return { return {
pickerOptions1: { pickerOptions: {
shortcuts: [{ shortcuts: [{
text: '今天', text: '今天',
onClick(picker) { onClick(picker) {
@ -84,7 +84,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
<div class="block"> <div class="block">
<span class="demonstration">默认</span> <span class="demonstration">默认</span>
<el-date-picker <el-date-picker
v-model="value4" v-model="value1"
type="datetimerange" type="datetimerange"
range-separator="至" range-separator="至"
start-placeholder="开始日期" start-placeholder="开始日期"
@ -94,9 +94,9 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
<div class="block"> <div class="block">
<span class="demonstration">带快捷选项</span> <span class="demonstration">带快捷选项</span>
<el-date-picker <el-date-picker
v-model="value5" v-model="value2"
type="datetimerange" type="datetimerange"
:picker-options="pickerOptions2" :picker-options="pickerOptions"
range-separator="至" range-separator="至"
start-placeholder="开始日期" start-placeholder="开始日期"
end-placeholder="结束日期" end-placeholder="结束日期"
@ -109,7 +109,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
export default { export default {
data() { data() {
return { return {
pickerOptions2: { pickerOptions: {
shortcuts: [{ shortcuts: [{
text: '最近一周', text: '最近一周',
onClick(picker) { 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)], value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
value5: '' value2: ''
}; };
} }
}; };
@ -153,7 +153,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
<div class="block"> <div class="block">
<span class="demonstration">起始日期时刻为 12:00:00</span> <span class="demonstration">起始日期时刻为 12:00:00</span>
<el-date-picker <el-date-picker
v-model="value6" v-model="value1"
type="datetimerange" type="datetimerange"
start-placeholder="开始日期" start-placeholder="开始日期"
end-placeholder="结束日期" end-placeholder="结束日期"
@ -163,7 +163,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
<div class="block"> <div class="block">
<span class="demonstration">起始日期时刻为 12:00:00，结束日期时刻为 08:00:00</span> <span class="demonstration">起始日期时刻为 12:00:00，结束日期时刻为 08:00:00</span>
<el-date-picker <el-date-picker
v-model="value7" v-model="value2"
type="datetimerange" type="datetimerange"
align="right" align="right"
start-placeholder="开始日期" start-placeholder="开始日期"
@ -177,8 +177,8 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
export default { export default {
data() { data() {
return { return {
value6: '', value1: '',
value7: '' value2: ''
}; };
} }
}; };

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

@ -285,19 +285,19 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
:::demo 本例还使用`status-icon`属性为输入框添加了表示校验结果的反馈图标。 :::demo 本例还使用`status-icon`属性为输入框添加了表示校验结果的反馈图标。
```html ```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-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>
<el-form-item label="确认密码" prop="checkPass"> <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>
<el-form-item label="年龄" prop="age"> <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-form-item> <el-form-item>
<el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button> <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm2')">重置</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<script> <script>
@ -323,8 +323,8 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
if (value === '') { if (value === '') {
callback(new Error('请输入密码')); callback(new Error('请输入密码'));
} else { } else {
if (this.ruleForm2.checkPass !== '') { if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm2.validateField('checkPass'); this.$refs.ruleForm.validateField('checkPass');
} }
callback(); callback();
} }
@ -332,19 +332,19 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
var validatePass2 = (rule, value, callback) => { var validatePass2 = (rule, value, callback) => {
if (value === '') { if (value === '') {
callback(new Error('请再次输入密码')); callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm2.pass) { } else if (value !== this.ruleForm.pass) {
callback(new Error('两次输入密码不一致!')); callback(new Error('两次输入密码不一致!'));
} else { } else {
callback(); callback();
} }
}; };
return { return {
ruleForm2: { ruleForm: {
pass: '', pass: '',
checkPass: '', checkPass: '',
age: '' age: ''
}, },
rules2: { rules: {
pass: [ pass: [
{ validator: validatePass, trigger: 'blur' } { validator: validatePass, trigger: 'blur' }
], ],

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

@ -35,7 +35,7 @@ export default {
```html ```html
<el-input <el-input
placeholder="请输入内容" placeholder="请输入内容"
v-model="input1" v-model="input"
:disabled="true"> :disabled="true">
</el-input> </el-input>
@ -43,7 +43,7 @@ export default {
export default { export default {
data() { data() {
return { return {
input1: '' input: ''
} }
} }
} }
@ -58,7 +58,7 @@ export default {
```html ```html
<el-input <el-input
placeholder="请输入内容" placeholder="请输入内容"
v-model="input10" v-model="input"
clearable> clearable>
</el-input> </el-input>
@ -66,7 +66,7 @@ export default {
export default { export default {
data() { data() {
return { return {
input10: '' input: ''
} }
} }
} }
@ -79,13 +79,13 @@ export default {
:::demo 使用`show-password`属性即可得到一个可切换显示隐藏的密码框 :::demo 使用`show-password`属性即可得到一个可切换显示隐藏的密码框
```html ```html
<el-input placeholder="请输入密码" v-model="input11" show-password></el-input> <el-input placeholder="请输入密码" v-model="input" show-password></el-input>
<script> <script>
export default { export default {
data() { data() {
return { return {
input11: '' input: ''
} }
} }
} }
@ -104,24 +104,24 @@ export default {
<el-input <el-input
placeholder="请选择日期" placeholder="请选择日期"
suffix-icon="el-icon-date" suffix-icon="el-icon-date"
v-model="input2"> v-model="input1">
</el-input> </el-input>
<el-input <el-input
placeholder="请输入内容" placeholder="请输入内容"
prefix-icon="el-icon-search" prefix-icon="el-icon-search"
v-model="input21"> v-model="input2">
</el-input> </el-input>
</div> </div>
<div class="demo-input-suffix"> <div class="demo-input-suffix">
slot 方式： slot 方式：
<el-input <el-input
placeholder="请选择日期" placeholder="请选择日期"
v-model="input22"> v-model="input3">
<i slot="suffix" class="el-input__icon el-icon-date"></i> <i slot="suffix" class="el-input__icon el-icon-date"></i>
</el-input> </el-input>
<el-input <el-input
placeholder="请输入内容" placeholder="请输入内容"
v-model="input23"> v-model="input4">
<i slot="prefix" class="el-input__icon el-icon-search"></i> <i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input> </el-input>
</div> </div>
@ -130,10 +130,10 @@ export default {
export default { export default {
data() { data() {
return { return {
input1: '',
input2: '', input2: '',
input21: '', input3: '',
input22: '', input4: ''
input23: ''
} }
} }
} }
@ -176,22 +176,22 @@ export default {
type="textarea" type="textarea"
autosize autosize
placeholder="请输入内容" placeholder="请输入内容"
v-model="textarea2"> v-model="textarea1">
</el-input> </el-input>
<div style="margin: 20px 0;"></div> <div style="margin: 20px 0;"></div>
<el-input <el-input
type="textarea" type="textarea"
:autosize="{ minRows: 2, maxRows: 4}" :autosize="{ minRows: 2, maxRows: 4}"
placeholder="请输入内容" placeholder="请输入内容"
v-model="textarea3"> v-model="textarea2">
</el-input> </el-input>
<script> <script>
export default { export default {
data() { data() {
return { return {
textarea2: '', textarea1: '',
textarea3: '' textarea2: ''
} }
} }
} }
@ -206,17 +206,17 @@ export default {
:::demo 可通过 slot 来指定在 input 中前置或者后置内容。 :::demo 可通过 slot 来指定在 input 中前置或者后置内容。
```html ```html
<div> <div>
<el-input placeholder="请输入内容" v-model="input3"> <el-input placeholder="请输入内容" v-model="input1">
<template slot="prepend">Http://</template> <template slot="prepend">Http://</template>
</el-input> </el-input>
</div> </div>
<div style="margin-top: 15px;"> <div style="margin-top: 15px;">
<el-input placeholder="请输入内容" v-model="input4"> <el-input placeholder="请输入内容" v-model="input2">
<template slot="append">.com</template> <template slot="append">.com</template>
</el-input> </el-input>
</div> </div>
<div style="margin-top: 15px;"> <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-select v-model="select" slot="prepend" placeholder="请选择">
<el-option label="餐厅名" value="1"></el-option> <el-option label="餐厅名" value="1"></el-option>
<el-option label="订单号" value="2"></el-option> <el-option label="订单号" value="2"></el-option>
@ -237,9 +237,9 @@ export default {
export default { export default {
data() { data() {
return { return {
input1: '',
input2: '',
input3: '', input3: '',
input4: '',
input5: '',
select: '' select: ''
} }
} }
@ -256,25 +256,25 @@ export default {
<el-input <el-input
placeholder="请输入内容" placeholder="请输入内容"
suffix-icon="el-icon-date" suffix-icon="el-icon-date"
v-model="input6"> v-model="input1">
</el-input> </el-input>
<el-input <el-input
size="medium" size="medium"
placeholder="请输入内容" placeholder="请输入内容"
suffix-icon="el-icon-date" suffix-icon="el-icon-date"
v-model="input7"> v-model="input2">
</el-input> </el-input>
<el-input <el-input
size="small" size="small"
placeholder="请输入内容" placeholder="请输入内容"
suffix-icon="el-icon-date" suffix-icon="el-icon-date"
v-model="input8"> v-model="input3">
</el-input> </el-input>
<el-input <el-input
size="mini" size="mini"
placeholder="请输入内容" placeholder="请输入内容"
suffix-icon="el-icon-date" suffix-icon="el-icon-date"
v-model="input9"> v-model="input4">
</el-input> </el-input>
</div> </div>
@ -282,10 +282,10 @@ export default {
export default { export default {
data() { data() {
return { return {
input6: '', input1: '',
input7: '', input2: '',
input8: '', input3: '',
input9: '' input4: ''
} }
} }
} }
@ -415,7 +415,7 @@ export default {
```html ```html
<el-autocomplete <el-autocomplete
popper-class="my-autocomplete" popper-class="my-autocomplete"
v-model="state3" v-model="state"
:fetch-suggestions="querySearch" :fetch-suggestions="querySearch"
placeholder="请输入内容" placeholder="请输入内容"
@select="handleSelect"> @select="handleSelect">
@ -457,7 +457,7 @@ export default {
data() { data() {
return { return {
restaurants: [], restaurants: [],
state3: '' state: ''
}; };
}, },
methods: { methods: {
@ -546,7 +546,7 @@ export default {
:::demo :::demo
```html ```html
<el-autocomplete <el-autocomplete
v-model="state4" v-model="state"
:fetch-suggestions="querySearchAsync" :fetch-suggestions="querySearchAsync"
placeholder="请输入内容" placeholder="请输入内容"
@select="handleSelect" @select="handleSelect"
@ -556,7 +556,7 @@ export default {
data() { data() {
return { return {
restaurants: [], restaurants: [],
state4: '', state: '',
timeout: null timeout: null
}; };
}, },