Skip to content

E
Element
Commit b4190041 authored by 刘鹏龙's avatar 刘鹏龙 Committed by hetech
Browse files
Options

Docs:rename variable name in docs (#15094)

parent 60e3e3b1
Hide whitespace changes
Inline Side-by-side
Showing with 308 additions and 308 deletions
examples/docs/en-US/checkbox.md
View file @ b4190041
......@@ -128,7 +128,7 @@ The `min` and `max` properties can help you to limit the number of checked items
```html
<template>
<el-checkbox-group
v-model="checkedCities1"
v-model="checkedCities"
:min="1"
:max="2">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
......@@ -139,7 +139,7 @@ The `min` and `max` properties can help you to limit the number of checked items
export default {
data() {
return {
checkedCities1: ['Shanghai', 'Beijing'],
checkedCities: ['Shanghai', 'Beijing'],
cities: cityOptions
};
}
......@@ -200,21 +200,21 @@ Checkbox with button styles.
```html
<template>
<div>
<el-checkbox v-model="checked3" label="Option1" border></el-checkbox>
<el-checkbox v-model="checked4" label="Option2" border></el-checkbox>
<el-checkbox v-model="checked1" label="Option1" border></el-checkbox>
<el-checkbox v-model="checked2" label="Option2" border></el-checkbox>
</div>
<div style="margin-top: 20px">
<el-checkbox v-model="checked5" label="Option1" border size="medium"></el-checkbox>
<el-checkbox v-model="checked6" label="Option2" border size="medium"></el-checkbox>
<el-checkbox v-model="checked3" label="Option1" border size="medium"></el-checkbox>
<el-checkbox v-model="checked4" label="Option2" border size="medium"></el-checkbox>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup5" size="small">
<el-checkbox-group v-model="checkboxGroup1" size="small">
<el-checkbox label="Option1" border></el-checkbox>
<el-checkbox label="Option2" border disabled></el-checkbox>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>
<el-checkbox-group v-model="checkboxGroup2" size="mini" disabled>
<el-checkbox label="Option1" border></el-checkbox>
<el-checkbox label="Option2" border></el-checkbox>
</el-checkbox-group>
......@@ -225,12 +225,12 @@ Checkbox with button styles.
export default {
data () {
return {
checked3: true,
checked4: false,
checked5: false,
checked6: true,
checkboxGroup5: [],
checkboxGroup6: []
checked1: true,
checked2: false,
checked3: false,
checked4: true,
checkboxGroup1: [],
checkboxGroup2: []
};
}
}
......
examples/docs/en-US/color-picker.md
View file @ b4190041
......@@ -32,13 +32,13 @@ ColorPicker is a color selector supporting multiple color formats.
:::demo ColorPicker supports alpha channel selecting. To activate alpha selecting, just add the `show-alpha` attribute.
```html
<el-color-picker v-model="color3" show-alpha></el-color-picker>
<el-color-picker v-model="color" show-alpha></el-color-picker>
<script>
export default {
data() {
return {
color3: 'rgba(19, 206, 102, 0.8)'
color: 'rgba(19, 206, 102, 0.8)'
}
}
};
......@@ -51,7 +51,7 @@ ColorPicker is a color selector supporting multiple color formats.
:::demo ColorPicker supports predefined color options
```html
<el-color-picker
v-model="color5"
v-model="color"
show-alpha
:predefine="predefineColors">
</el-color-picker>
......@@ -60,7 +60,7 @@ ColorPicker is a color selector supporting multiple color formats.
export default {
data() {
return {
color5: 'rgba(255, 69, 0, 0.68)',
color: 'rgba(255, 69, 0, 0.68)',
predefineColors: [
'#ff4500',
'#ff8c00',
......@@ -89,16 +89,16 @@ ColorPicker is a color selector supporting multiple color formats.
:::demo
```html
<el-color-picker v-model="color4"></el-color-picker>
<el-color-picker v-model="color4" size="medium"></el-color-picker>
<el-color-picker v-model="color4" size="small"></el-color-picker>
<el-color-picker v-model="color4" size="mini"></el-color-picker>
<el-color-picker v-model="color"></el-color-picker>
<el-color-picker v-model="color" size="medium"></el-color-picker>
<el-color-picker v-model="color" size="small"></el-color-picker>
<el-color-picker v-model="color" size="mini"></el-color-picker>
<script>
export default {
data() {
return {
color4: '#409EFF'
color: '#409EFF'
}
}
};
......
examples/docs/en-US/date-picker.md
View file @ b4190041
......@@ -25,7 +25,7 @@ Basic date picker measured by 'day'.
v-model="value2"
type="date"
placeholder="Pick a day"
:picker-options="pickerOptions1">
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
......@@ -34,7 +34,7 @@ Basic date picker measured by 'day'.
export default {
data() {
return {
pickerOptions1: {
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
......@@ -79,7 +79,7 @@ You can choose week, month, year or multiple dates by extending the standard dat
<div class="block">
<span class="demonstration">Week</span>
<el-date-picker
v-model="value3"
v-model="value1"
type="week"
format="Week WW"
placeholder="Pick a week">
......@@ -88,7 +88,7 @@ You can choose week, month, year or multiple dates by extending the standard dat
<div class="block">
<span class="demonstration">Month</span>
<el-date-picker
v-model="value4"
v-model="value2"
type="month"
placeholder="Pick a month">
</el-date-picker>
......@@ -98,7 +98,7 @@ You can choose week, month, year or multiple dates by extending the standard dat
<div class="block">
<span class="demonstration">Year</span>
<el-date-picker
v-model="value5"
v-model="value3"
type="year"
placeholder="Pick a year">
</el-date-picker>
......@@ -107,7 +107,7 @@ You can choose week, month, year or multiple dates by extending the standard dat
<span class="demonstration">Dates</span>
<el-date-picker
type="dates"
v-model="value14"
v-model="value4"
placeholder="Pick one or more dates">
</el-date-picker>
</div>
......@@ -117,10 +117,10 @@ You can choose week, month, year or multiple dates by extending the standard dat
export default {
data() {
return {
value1: '',
value2: '',
value3: '',
value4: '',
value5: '',
value14: ''
value4: ''
};
}
};
......@@ -140,7 +140,7 @@ Picking a date range is supported.
<div class="block">
<span class="demonstration">Default</span>
<el-date-picker
v-model="value6"
v-model="value1"
type="daterange"
range-separator="To"
start-placeholder="Start date"
......@@ -150,14 +150,14 @@ Picking a date range is supported.
<div class="block">
<span class="demonstration">With quick options</span>
<el-date-picker
v-model="value7"
v-model="value2"
type="daterange"
align="right"
unlink-panels
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date"
:picker-options="pickerOptions2">
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
......@@ -166,7 +166,7 @@ Picking a date range is supported.
export default {
data() {
return {
pickerOptions2: {
pickerOptions: {
shortcuts: [{
text: 'Last week',
onClick(picker) {
......@@ -193,8 +193,8 @@ Picking a date range is supported.
}
}]
},
value6: '',
value7: ''
value1: '',
value2: ''
};
}
};
......@@ -213,7 +213,7 @@ Picking a month range is supported.
<div class="block">
<span class="demonstration">Default</span>
<el-date-picker
v-model="value15"
v-model="value1"
type="monthrange"
range-separator="To"
start-placeholder="Start month"
......@@ -223,14 +223,14 @@ Picking a month range is supported.
<div class="block">
<span class="demonstration">With quick options</span>
<el-date-picker
v-model="value16"
v-model="value2"
type="monthrange"
align="right"
unlink-panels
range-separator="To"
start-placeholder="Start month"
end-placeholder="End month"
:picker-options="pickerOptions3">
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
......@@ -239,7 +239,7 @@ Picking a month range is supported.
export default {
data() {
return {
pickerOptions3: {
pickerOptions: {
shortcuts: [{
text: 'This month',
onClick(picker) {
......@@ -262,8 +262,8 @@ Picking a month range is supported.
}
}]
},
value15: '',
value16: ''
value1: '',
value2: ''
};
}
};
......@@ -283,7 +283,7 @@ If type is `daterange`, `default-value` sets the left side calendar.
<div class="block">
<span class="demonstration">date</span>
<el-date-picker
v-model="value8"
v-model="value1"
type="date"
placeholder="Pick a date"
default-value="2010-10-01">
......@@ -292,7 +292,7 @@ If type is `daterange`, `default-value` sets the left side calendar.
<div class="block">
<span class="demonstration">daterange</span>
<el-date-picker
v-model="value9"
v-model="value2"
type="daterange"
align="right"
start-placeholder="Start Date"
......@@ -306,8 +306,8 @@ If type is `daterange`, `default-value` sets the left side calendar.
export default {
data() {
return {
value8: '',
value9: ''
value1: '',
value2: ''
};
}
};
......@@ -352,9 +352,9 @@ Pay attention to capitalization
<template>
<div class="block">
<span class="demonstration">Emits Date object</span>
<div class="demonstration">Value: {{ value10 }}</div>
<div class="demonstration">Value: {{ value1 }}</div>
<el-date-picker
v-model="value10"
v-model="value1"
type="date"
placeholder="Pick a Date"
format="yyyy/MM/dd">
......@@ -362,9 +362,9 @@ Pay attention to capitalization
</div>
<div class="block">
<span class="demonstration">Use value-format</span>
<div class="demonstration">Value: {{ value11 }}</div>
<div class="demonstration">Value: {{ value2 }}</div>
<el-date-picker
v-model="value11"
v-model="value2"
type="date"
placeholder="Pick a Date"
format="yyyy/MM/dd"
......@@ -373,9 +373,9 @@ Pay attention to capitalization
</div>
<div class="block">
<span class="demonstration">Timestamp</span>
<div class="demonstration">Value：{{ value12 }}</div>
<div class="demonstration">Value：{{ value3 }}</div>
<el-date-picker
v-model="value12"
v-model="value3"
type="date"
placeholder="Pick a Date"
format="yyyy/MM/dd"
......@@ -388,9 +388,9 @@ Pay attention to capitalization
export default {
data() {
return {
value10: '',
value11: '',
value12: ''
value1: '',
value2: '',
value3: ''
};
}
};
......@@ -406,9 +406,9 @@ When picking a date range, you can assign the time part for start date and end d
```html
<template>
<div class="block">
<p>Component value：{{ value13 }}</p>
<p>Component value：{{ value }}</p>
<el-date-picker
v-model="value13"
v-model="value"
type="daterange"
start-placeholder="Start date"
end-placeholder="End date"
......@@ -421,7 +421,7 @@ When picking a date range, you can assign the time part for start date and end d
export default {
data() {
return {
value13: ''
value: ''
};
}
};
......
examples/docs/en-US/input-number.md
View file @ b4190041
......@@ -8,13 +8,13 @@ Input numerical values with a customizable range.
```html
<template>
<el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>
<el-input-number v-model="num" @change="handleChange" :min="1" :max="10"></el-input-number>
</template>
<script>
export default {
data() {
return {
num1: 1
num: 1
};
},
methods: {
......@@ -33,13 +33,13 @@ Input numerical values with a customizable range.
```html
<template>
<el-input-number v-model="num2" :disabled="true"></el-input-number>
<el-input-number v-model="num" :disabled="true"></el-input-number>
</template>
<script>
export default {
data() {
return {
num2: 1
num: 1
}
}
};
......@@ -55,13 +55,13 @@ Allows you to define incremental steps.
```html
<template>
<el-input-number v-model="num3" :step="2"></el-input-number>
<el-input-number v-model="num" :step="2"></el-input-number>
</template>
<script>
export default {
data() {
return {
num3: 5
num: 5
}
}
};
......@@ -75,13 +75,13 @@ Allows you to define incremental steps.
```html
<template>
<el-input-number v-model="num9" :precision="2" :step="0.1" :max="10"></el-input-number>
<el-input-number v-model="num" :precision="2" :step="0.1" :max="10"></el-input-number>
</template>
<script>
export default {
data() {
return {
num9: 1
num: 1
}
}
};
......@@ -102,19 +102,19 @@ Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
```html
<template>
<el-input-number v-model="num4"></el-input-number>
<el-input-number size="medium" v-model="num5"></el-input-number>
<el-input-number size="small" v-model="num6"></el-input-number>
<el-input-number size="mini" v-model="num7"></el-input-number>
<el-input-number v-model="num1"></el-input-number>
<el-input-number size="medium" v-model="num2"></el-input-number>
<el-input-number size="small" v-model="num3"></el-input-number>
<el-input-number size="mini" v-model="num4"></el-input-number>
</template>
<script>
export default {
data() {
return {
num4: 1,
num5: 1,
num6: 1,
num7: 1
num1: 1,
num2: 1,
num3: 1,
num4: 1
}
}
};
......@@ -127,13 +127,13 @@ Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
:::demo Set `controls-position` to decide the position of control buttons.
```html
<template>
<el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
<el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
</template>
<script>
export default {
data() {
return {
num8: 1
num: 1
};
},
methods: {
......
examples/docs/es/checkbox.md
View file @ b4190041
......@@ -128,7 +128,7 @@ Las propiedades `min` y `max` pueden limitar la cantidad de elementos selecciona
```html
<template>
<el-checkbox-group
v-model="checkedCities1"
v-model="checkedCities"
:min="1"
:max="2">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
......@@ -139,7 +139,7 @@ Las propiedades `min` y `max` pueden limitar la cantidad de elementos selecciona
export default {
data() {
return {
checkedCities1: ['Shanghai', 'Beijing'],
checkedCities: ['Shanghai', 'Beijing'],
cities: cityOptions
};
}
......@@ -200,21 +200,21 @@ Checkbox con estilo tipo Botón.
```html
<template>
<div>
<el-checkbox v-model="checked3" label="Opción1" border></el-checkbox>
<el-checkbox v-model="checked4" label="Opción2" border></el-checkbox>
<el-checkbox v-model="checked1" label="Opción1" border></el-checkbox>
<el-checkbox v-model="checked2" label="Opción2" border></el-checkbox>
</div>
<div style="margin-top: 20px">
<el-checkbox v-model="checked5" label="Opción1" border size="medium"></el-checkbox>
<el-checkbox v-model="checked6" label="Opción2" border size="medium"></el-checkbox>
<el-checkbox v-model="checked3" label="Opción1" border size="medium"></el-checkbox>
<el-checkbox v-model="checked4" label="Opción2" border size="medium"></el-checkbox>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup5" size="small">
<el-checkbox-group v-model="checkboxGroup1" size="small">
<el-checkbox label="Opción1" border></el-checkbox>
<el-checkbox label="Opción2" border disabled></el-checkbox>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>
<el-checkbox-group v-model="checkboxGroup2" size="mini" disabled>
<el-checkbox label="Opción1" border></el-checkbox>
<el-checkbox label="Opción2" border></el-checkbox>
</el-checkbox-group>
......@@ -225,12 +225,12 @@ Checkbox con estilo tipo Botón.
export default {
data () {
return {
checked3: true,
checked4: false,
checked5: false,
checked6: true,
checkboxGroup5: [],
checkboxGroup6: []
checked1: true,
checked2: false,
checked3: false,
checked4: true,
checkboxGroup1: [],
checkboxGroup2: []
};
}
}
......
examples/docs/es/color-picker.md
View file @ b4190041
......@@ -32,13 +32,13 @@ ColorPicker es un selector de color que soporta varios formatos de color.
:::demo ColorPicker soporta selección de canales alpha. Para activarlo sólo agrege el atributo `show-alpha`.
```html
<el-color-picker v-model="color3" show-alpha></el-color-picker>
<el-color-picker v-model="color" show-alpha></el-color-picker>
<script>
export default {
data() {
return {
color3: 'rgba(19, 206, 102, 0.8)'
color: 'rgba(19, 206, 102, 0.8)'
}
}
};
......@@ -51,7 +51,7 @@ ColorPicker es un selector de color que soporta varios formatos de color.
:::demo ColorPicker supports predefined color options
```html
<el-color-picker
v-model="color5"
v-model="color"
show-alpha
:predefine="predefineColors">
</el-color-picker>
......@@ -60,7 +60,7 @@ ColorPicker es un selector de color que soporta varios formatos de color.
export default {
data() {
return {
color5: 'rgba(255, 69, 0, 0.68)',
color: 'rgba(255, 69, 0, 0.68)',
predefineColors: [
'#ff4500',
'#ff8c00',
......@@ -88,16 +88,16 @@ ColorPicker es un selector de color que soporta varios formatos de color.
:::demo
```html
<el-color-picker v-model="color4"></el-color-picker>
<el-color-picker v-model="color4" size="medium"></el-color-picker>
<el-color-picker v-model="color4" size="small"></el-color-picker>
<el-color-picker v-model="color4" size="mini"></el-color-picker>
<el-color-picker v-model="color"></el-color-picker>
<el-color-picker v-model="color" size="medium"></el-color-picker>
<el-color-picker v-model="color" size="small"></el-color-picker>
<el-color-picker v-model="color" size="mini"></el-color-picker>
<script>
export default {
data() {
return {
color4: '#409EFF'
color: '#409EFF'
}
}
};
......
examples/docs/es/date-picker.md
View file @ b4190041
......@@ -26,7 +26,7 @@ Date Picker básico por "día".
v-model="value2"
type="date"
placeholder="Pick a day"
:picker-options="pickerOptions1">
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
......@@ -35,7 +35,7 @@ Date Picker básico por "día".
export default {
data() {
return {
pickerOptions1: {
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
......@@ -81,7 +81,7 @@ Puede elegir la semana, el mes, el año o varias fechas ampliando el componente
<div class="block">
<span class="demonstration">Week</span>
<el-date-picker
v-model="value3"
v-model="value1"
type="week"
format="Week WW"
placeholder="Pick a week">
......@@ -90,7 +90,7 @@ Puede elegir la semana, el mes, el año o varias fechas ampliando el componente
<div class="block">
<span class="demonstration">Month</span>
<el-date-picker
v-model="value4"
v-model="value2"
type="month"
placeholder="Pick a month">
</el-date-picker>
......@@ -100,7 +100,7 @@ Puede elegir la semana, el mes, el año o varias fechas ampliando el componente
<div class="block">
<span class="demonstration">Year</span>
<el-date-picker
v-model="value5"
v-model="value3"
type="year"
placeholder="Pick a year">
</el-date-picker>
......@@ -109,7 +109,7 @@ Puede elegir la semana, el mes, el año o varias fechas ampliando el componente
<span class="demonstration">Dates</span>
<el-date-picker
type="dates"
v-model="value14"
v-model="value4"
placeholder="Pick one or more dates">
</el-date-picker>
</div>
......@@ -119,10 +119,10 @@ Puede elegir la semana, el mes, el año o varias fechas ampliando el componente
export default {
data() {
return {
value1: '',
value2: '',
value3: '',
value4: '',
value5: '',
value14: ''
value4: ''
};
}
};
......@@ -142,7 +142,7 @@ Se soporta la selección de un rango de fechas.
<div class="block">
<span class="demonstration">Default</span>
<el-date-picker
v-model="value6"
v-model="value1"
type="daterange"
range-separator="To"
start-placeholder="Start date"
......@@ -152,14 +152,14 @@ Se soporta la selección de un rango de fechas.
<div class="block">
<span class="demonstration">With quick options</span>
<el-date-picker
v-model="value7"
v-model="value2"
type="daterange"
align="right"
unlink-panels
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date"
:picker-options="pickerOptions2">
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
......@@ -168,7 +168,7 @@ Se soporta la selección de un rango de fechas.
export default {
data() {
return {
pickerOptions2: {
pickerOptions: {
shortcuts: [{
text: 'Last week',
onClick(picker) {
......@@ -195,8 +195,8 @@ Se soporta la selección de un rango de fechas.
}
}]
},
value6: '',
value7: ''
value1: '',
value2: ''
};
}
};
......@@ -215,7 +215,7 @@ Se admite la selección de un intervalo de un mes.
<div class="block">
<span class="demonstration">Default</span>
<el-date-picker
v-model="value15"
v-model="value1"
type="monthrange"
range-separator="To"
start-placeholder="Start month"
......@@ -225,14 +225,14 @@ Se admite la selección de un intervalo de un mes.
<div class="block">
<span class="demonstration">With quick options</span>
<el-date-picker
v-model="value16"
v-model="value2"
type="monthrange"
align="right"
unlink-panels
range-separator="To"
start-placeholder="Start month"
end-placeholder="End month"
:picker-options="pickerOptions3">
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
......@@ -241,7 +241,7 @@ Se admite la selección de un intervalo de un mes.
export default {
data() {
return {
pickerOptions3: {
pickerOptions: {
shortcuts: [{
text: 'This month',
onClick(picker) {
......@@ -264,8 +264,8 @@ Se admite la selección de un intervalo de un mes.
}
}]
},
value15: '',
value16: ''
value1: '',
value2: ''
};
}
};
......@@ -285,7 +285,7 @@ Si el tipo es `daterange`, `default-value` establece el calendario del lado izqu
<div class="block">
<span class="demonstration">date</span>
<el-date-picker
v-model="value8"
v-model="value1"
type="date"
placeholder="Pick a date"
default-value="2010-10-01">
......@@ -294,7 +294,7 @@ Si el tipo es `daterange`, `default-value` establece el calendario del lado izqu
<div class="block">
<span class="demonstration">daterange</span>
<el-date-picker
v-model="value9"
v-model="value2"
type="daterange"
align="right"
start-placeholder="Start Date"
......@@ -308,8 +308,8 @@ Si el tipo es `daterange`, `default-value` establece el calendario del lado izqu
export default {
data() {
return {
value8: '',
value9: ''
value1: '',
value2: ''
};
}
};
......@@ -352,9 +352,9 @@ Preste atención a la capitalización
<template>
<div class="block">
<span class="demonstration">Emits Date object</span>
<div class="demonstration">Value: {{ value10 }}</div>
<div class="demonstration">Value: {{ value1 }}</div>
<el-date-picker
v-model="value10"
v-model="value1"
type="date"
placeholder="Pick a Date"
format="yyyy/MM/dd">
......@@ -362,9 +362,9 @@ Preste atención a la capitalización
</div>
<div class="block">
<span class="demonstration">Use value-format</span>
<div class="demonstration">Value: {{ value11 }}</div>
<div class="demonstration">Value: {{ value2 }}</div>
<el-date-picker
v-model="value11"
v-model="value2"
type="date"
placeholder="Pick a Date"
format="yyyy/MM/dd"
......@@ -373,9 +373,9 @@ Preste atención a la capitalización
</div>
<div class="block">
<span class="demonstration">Timestamp</span>
<div class="demonstration">Value：{{ value12 }}</div>
<div class="demonstration">Value：{{ value3 }}</div>
<el-date-picker
v-model="value12"
v-model="value3"
type="date"
placeholder="Pick a Date"
format="yyyy/MM/dd"
......@@ -388,9 +388,9 @@ Preste atención a la capitalización
export default {
data() {
return {
value10: '',
value11: '',
value12: ''
value1: '',
value2: '',
value3: ''
};
}
};
......@@ -407,9 +407,9 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
```html
<template>
<div class="block">
<p>Component value：{{ value12 }}</p>
<p>Component value：{{ value }}</p>
<el-date-picker
v-model="value12"
v-model="value"
type="daterange"
start-placeholder="Start date"
end-placeholder="End date"
......@@ -422,7 +422,7 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
export default {
data() {
return {
value12: ''
value: ''
};
}
};
......
examples/docs/es/input-number.md
View file @ b4190041
......@@ -8,13 +8,13 @@ Input de valores numéricos con un rango personalizable.
```html
<template>
<el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>
<el-input-number v-model="num" @change="handleChange" :min="1" :max="10"></el-input-number>
</template>
<script>
export default {
data() {
return {
num1: 1
num: 1
};
},
methods: {
......@@ -33,13 +33,13 @@ Input de valores numéricos con un rango personalizable.
```html
<template>
<el-input-number v-model="num2" :disabled="true"></el-input-number>
<el-input-number v-model="num" :disabled="true"></el-input-number>
</template>
<script>
export default {
data() {
return {
num2: 1
num: 1
}
}
};
......@@ -55,13 +55,13 @@ Le permite definir el nivel de incremento de los saltos.
```html
<template>
<el-input-number v-model="num3" :step="2"></el-input-number>
<el-input-number v-model="num" :step="2"></el-input-number>
</template>
<script>
export default {
data() {
return {
num3: 5
num: 5
}
}
};
......@@ -75,13 +75,13 @@ Le permite definir el nivel de incremento de los saltos.
```html
<template>
<el-input-number v-model="num9" :precision="2" :step="0.1" :max="10"></el-input-number>
<el-input-number v-model="num" :precision="2" :step="0.1" :max="10"></el-input-number>
</template>
<script>
export default {
data() {
return {
num9: 1
num: 1
}
}
};
......@@ -102,19 +102,19 @@ Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `s
```html
<template>
<el-input-number v-model="num4"></el-input-number>
<el-input-number size="medium" v-model="num5"></el-input-number>
<el-input-number size="small" v-model="num6"></el-input-number>
<el-input-number size="mini" v-model="num7"></el-input-number>
<el-input-number v-model="num1"></el-input-number>
<el-input-number size="medium" v-model="num2"></el-input-number>
<el-input-number size="small" v-model="num3"></el-input-number>
<el-input-number size="mini" v-model="num4"></el-input-number>
</template>
<script>
export default {
data() {
return {
num4: 1,
num5: 1,
num6: 1,
num7: 1
num1: 1,
num2: 1,
num3: 1,
num4: 1
}
}
};
......@@ -128,13 +128,13 @@ Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `s
```html
<template>
<el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
<el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
</template>
<script>
export default {
data() {
return {
num8: 1
num: 1
};
},
methods: {
......
examples/docs/fr-FR/checkbox.md
View file @ b4190041
......@@ -128,7 +128,7 @@ Les propriétés `min` et `max` permettent de limiter la quantité d'éléments
```html
<template>
<el-checkbox-group
v-model="checkedCities1"
v-model="checkedCities"
:min="1"
:max="2">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
......@@ -139,7 +139,7 @@ Les propriétés `min` et `max` permettent de limiter la quantité d'éléments
export default {
data() {
return {
checkedCities1: ['Shanghai', 'Beijing'],
checkedCities: ['Shanghai', 'Beijing'],
cities: cityOptions
};
}
......@@ -200,21 +200,21 @@ Des checkbox avec une apparence de bouton.
```html
<template>
<div>
<el-checkbox v-model="checked3" label="Option1" border></el-checkbox>
<el-checkbox v-model="checked4" label="Option2" border></el-checkbox>
<el-checkbox v-model="checked1" label="Option1" border></el-checkbox>
<el-checkbox v-model="checked2" label="Option2" border></el-checkbox>
</div>
<div style="margin-top: 20px">
<el-checkbox v-model="checked5" label="Option1" border size="medium"></el-checkbox>
<el-checkbox v-model="checked6" label="Option2" border size="medium"></el-checkbox>
<el-checkbox v-model="checked3" label="Option1" border size="medium"></el-checkbox>
<el-checkbox v-model="checked4" label="Option2" border size="medium"></el-checkbox>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup5" size="small">
<el-checkbox-group v-model="checkboxGroup1" size="small">
<el-checkbox label="Option1" border></el-checkbox>
<el-checkbox label="Option2" border disabled></el-checkbox>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>
<el-checkbox-group v-model="checkboxGroup2" size="mini" disabled>
<el-checkbox label="Option1" border></el-checkbox>
<el-checkbox label="Option2" border></el-checkbox>
</el-checkbox-group>
......@@ -225,12 +225,12 @@ Des checkbox avec une apparence de bouton.
export default {
data () {
return {
checked3: true,
checked4: false,
checked5: false,
checked6: true,
checkboxGroup5: [],
checkboxGroup6: []
checked1: true,
checked2: false,
checked3: false,
checked4: true,
checkboxGroup1: [],
checkboxGroup2: []
};
}
}
......
examples/docs/fr-FR/color-picker.md
View file @ b4190041
......@@ -32,13 +32,13 @@ ColorPicker est un sélecteur de couleur qui supporte plusieurs formats.
:::demo ColorPicker supporte le canal alpha. Pour activer la sélection du canal alpha, ajoutez l'attribut `show-alpha`.
```html
<el-color-picker v-model="color3" show-alpha></el-color-picker>
<el-color-picker v-model="color" show-alpha></el-color-picker>
<script>
export default {
data() {
return {
color3: 'rgba(19, 206, 102, 0.8)'
color: 'rgba(19, 206, 102, 0.8)'
}
}
};
......@@ -51,7 +51,7 @@ ColorPicker est un sélecteur de couleur qui supporte plusieurs formats.
:::demo ColorPicker supporte les couleurs prédéfinies.
```html
<el-color-picker
v-model="color5"
v-model="color"
show-alpha
:predefine="predefineColors">
</el-color-picker>
......@@ -60,7 +60,7 @@ ColorPicker est un sélecteur de couleur qui supporte plusieurs formats.
export default {
data() {
return {
color5: 'rgba(255, 69, 0, 0.68)',
color: 'rgba(255, 69, 0, 0.68)',
predefineColors: [
'#ff4500',
'#ff8c00',
......@@ -88,16 +88,16 @@ ColorPicker est un sélecteur de couleur qui supporte plusieurs formats.
:::demo
```html
<el-color-picker v-model="color4"></el-color-picker>
<el-color-picker v-model="color4" size="medium"></el-color-picker>
<el-color-picker v-model="color4" size="small"></el-color-picker>
<el-color-picker v-model="color4" size="mini"></el-color-picker>
<el-color-picker v-model="color"></el-color-picker>
<el-color-picker v-model="color" size="medium"></el-color-picker>
<el-color-picker v-model="color" size="small"></el-color-picker>
<el-color-picker v-model="color" size="mini"></el-color-picker>
<script>
export default {
data() {
return {
color4: '#409EFF'
color: '#409EFF'
}
}
};
......
examples/docs/fr-FR/date-picker.md
View file @ b4190041
......@@ -25,7 +25,7 @@ L'unité de base du DatePicker est le jour.
v-model="value2"
type="date"
placeholder="Choississez un jour"
:picker-options="pickerOptions1">
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
......@@ -34,7 +34,7 @@ L'unité de base du DatePicker est le jour.
export default {
data() {
return {
pickerOptions1: {
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
......@@ -79,7 +79,7 @@ Vous pouvez sélectionner une semaine, un mois, une année ou plusieurs dates en
<div class="block">
<span class="demonstration">Semaine</span>
<el-date-picker
v-model="value3"
v-model="value1"
type="week"
format="Week WW"
placeholder="Sélectionnez une semaine">
......@@ -88,7 +88,7 @@ Vous pouvez sélectionner une semaine, un mois, une année ou plusieurs dates en
<div class="block">
<span class="demonstration">Mois</span>
<el-date-picker
v-model="value4"
v-model="value2"
type="month"
placeholder="Sélectionnez un mois">
</el-date-picker>
......@@ -98,7 +98,7 @@ Vous pouvez sélectionner une semaine, un mois, une année ou plusieurs dates en
<div class="block">
<span class="demonstration">Année</span>
<el-date-picker
v-model="value5"
v-model="value3"
type="year"
placeholder="Sélectionnez une année">
</el-date-picker>
......@@ -107,7 +107,7 @@ Vous pouvez sélectionner une semaine, un mois, une année ou plusieurs dates en
<span class="demonstration">Dates</span>
<el-date-picker
type="dates"
v-model="value14"
v-model="value4"
placeholder="Sélectionnez une ou plusieurs dates">
</el-date-picker>
</div>
......@@ -117,10 +117,10 @@ Vous pouvez sélectionner une semaine, un mois, une année ou plusieurs dates en
export default {
data() {
return {
value1: '',
value2: '',
value3: '',
value4: '',
value5: '',
value14: ''
value4: ''
};
}
};
......@@ -140,7 +140,7 @@ Vous pouvez sélectionner une plage de dates.
<div class="block">
<span class="demonstration">Défaut</span>
<el-date-picker
v-model="value6"
v-model="value1"
type="daterange"
range-separator="à"
start-placeholder="Date de début"
......@@ -150,14 +150,14 @@ Vous pouvez sélectionner une plage de dates.
<div class="block">
<span class="demonstration">Avec raccourcis</span>
<el-date-picker
v-model="value7"
v-model="value2"
type="daterange"
align="right"
unlink-panels
range-separator="à"
start-placeholder="Date de début"
end-placeholder="Date de fin"
:picker-options="pickerOptions2">
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
......@@ -166,7 +166,7 @@ Vous pouvez sélectionner une plage de dates.
export default {
data() {
return {
pickerOptions2: {
pickerOptions: {
shortcuts: [{
text: 'Semaine dernière',
onClick(picker) {
......@@ -193,8 +193,8 @@ Vous pouvez sélectionner une plage de dates.
}
}]
},
value6: '',
value7: ''
value1: '',
value2: ''
};
}
};
......@@ -213,7 +213,7 @@ Picking a month range is supported.
<div class="block">
<span class="demonstration">Default</span>
<el-date-picker
v-model="value15"
v-model="value1"
type="monthrange"
range-separator="To"
start-placeholder="Start month"
......@@ -223,14 +223,14 @@ Picking a month range is supported.
<div class="block">
<span class="demonstration">With quick options</span>
<el-date-picker
v-model="value16"
v-model="value2"
type="monthrange"
align="right"
unlink-panels
range-separator="To"
start-placeholder="Start month"
end-placeholder="End month"
:picker-options="pickerOptions3">
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
......@@ -239,7 +239,7 @@ Picking a month range is supported.
export default {
data() {
return {
pickerOptions3: {
pickerOptions: {
shortcuts: [{
text: 'This month',
onClick(picker) {
......@@ -262,8 +262,8 @@ Picking a month range is supported.
}
}]
},
value15: '',
value16: ''
value1: '',
value2: ''
};
}
};
......@@ -283,7 +283,7 @@ Si le type est `daterange`, `default-value` configure la panneau de gauche.
<div class="block">
<span class="demonstration">Date</span>
<el-date-picker
v-model="value8"
v-model="value1"
type="date"
placeholder="Sélectionnez une date"
default-value="2010-10-01">
......@@ -292,7 +292,7 @@ Si le type est `daterange`, `default-value` configure la panneau de gauche.
<div class="block">
<span class="demonstration">Plage de dates</span>
<el-date-picker
v-model="value9"
v-model="value2"
type="daterange"
align="right"
start-placeholder="Date de début"
......@@ -306,8 +306,8 @@ Si le type est `daterange`, `default-value` configure la panneau de gauche.
export default {
data() {
return {
value8: '',
value9: ''
value1: '',
value2: ''
};
}
};
......@@ -353,9 +353,9 @@ Attention à la capitalisation !
<template>
<div class="block">
<span class="demonstration">Émet un objet Date</span>
<div class="demonstration">Value: {{ value10 }}</div>
<div class="demonstration">Value: {{ value1 }}</div>
<el-date-picker
v-model="value10"
v-model="value1"
type="date"
placeholder="Sélectionnez une date"
format="yyyy/MM/dd">
......@@ -363,9 +363,9 @@ Attention à la capitalisation !
</div>
<div class="block">
<span class="demonstration">Utilise value-format</span>
<div class="demonstration">Value: {{ value11 }}</div>
<div class="demonstration">Value: {{ value2 }}</div>
<el-date-picker
v-model="value11"
v-model="value2"
type="date"
placeholder="Sélectionnez une date"
format="yyyy/MM/dd"
......@@ -374,9 +374,9 @@ Attention à la capitalisation !
</div>
<div class="block">
<span class="demonstration">Timestamp</span>
<div class="demonstration">Value：{{ value12 }}</div>
<div class="demonstration">Value：{{ value3 }}</div>
<el-date-picker
v-model="value12"
v-model="value3"
type="date"
placeholder="Sélectionnez une date"
format="yyyy/MM/dd"
......@@ -389,9 +389,9 @@ Attention à la capitalisation !
export default {
data() {
return {
value10: '',
value11: '',
value12: ''
value1: '',
value2: '',
value3: ''
};
}
};
......@@ -407,9 +407,9 @@ Lorsque vous choisissez une plage de dates, vous pouvez assigner l'horaire de d
```html
<template>
<div class="block">
<p>Valeur: {{ value13 }}</p>
<p>Valeur: {{ value }}</p>
<el-date-picker
v-model="value13"
v-model="value"
type="daterange"
start-placeholder="Date de début"
end-placeholder="Date de fin"
......@@ -422,7 +422,7 @@ Lorsque vous choisissez une plage de dates, vous pouvez assigner l'horaire de d
export default {
data() {
return {
value13: ''
value: ''
};
}
};
......
examples/docs/fr-FR/input-number.md
View file @ b4190041
......@@ -8,13 +8,13 @@ Un champs d'input de valeurs numériques, avec un domaine personnalisable.
```html
<template>
<el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>
<el-input-number v-model="num" @change="handleChange" :min="1" :max="10"></el-input-number>
</template>
<script>
export default {
data() {
return {
num1: 1
num: 1
};
},
methods: {
......@@ -33,13 +33,13 @@ Un champs d'input de valeurs numériques, avec un domaine personnalisable.
```html
<template>
<el-input-number v-model="num2" :disabled="true"></el-input-number>
<el-input-number v-model="num" :disabled="true"></el-input-number>
</template>
<script>
export default {
data() {
return {
num2: 1
num: 1
}
}
};
......@@ -55,13 +55,13 @@ Vous pouvez déterminer un pas pour le champs.
```html
<template>
<el-input-number v-model="num3" :step="2"></el-input-number>
<el-input-number v-model="num" :step="2"></el-input-number>
</template>
<script>
export default {
data() {
return {
num3: 5
num: 5
}
}
};
......@@ -75,13 +75,13 @@ Vous pouvez déterminer un pas pour le champs.
```html
<template>
<el-input-number v-model="num9" :precision="2" :step="0.1" :max="10"></el-input-number>
<el-input-number v-model="num" :precision="2" :step="0.1" :max="10"></el-input-number>
</template>
<script>
export default {
data() {
return {
num9: 1
num: 1
}
}
};
......@@ -102,19 +102,19 @@ Utilisez l'attribut `size` pour régler la taille avec `medium`, `small` ou `min
```html
<template>
<el-input-number v-model="num4"></el-input-number>
<el-input-number size="medium" v-model="num5"></el-input-number>
<el-input-number size="small" v-model="num6"></el-input-number>
<el-input-number size="mini" v-model="num7"></el-input-number>
<el-input-number v-model="num1"></el-input-number>
<el-input-number size="medium" v-model="num2"></el-input-number>
<el-input-number size="small" v-model="num3"></el-input-number>
<el-input-number size="mini" v-model="num4"></el-input-number>
</template>
<script>
export default {
data() {
return {
num4: 1,
num5: 1,
num6: 1,
num7: 1
num1: 1,
num2: 1,
num3: 1,
num4: 1
}
}
};
......@@ -127,13 +127,13 @@ Utilisez l'attribut `size` pour régler la taille avec `medium`, `small` ou `min
:::demo Réglez `controls-position` pour déterminer la position des boutons.
```html
<template>
<el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
<el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
</template>
<script>
export default {
data() {
return {
num8: 1
num: 1
};
},
methods: {
......
examples/docs/zh-CN/checkbox.md
View file @ b4190041
......@@ -127,7 +127,7 @@
```html
<template>
<el-checkbox-group
v-model="checkedCities1"
v-model="checkedCities"
:min="1"
:max="2">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
......@@ -138,7 +138,7 @@
export default {
data() {
return {
checkedCities1: ['上海', '北京'],
checkedCities: ['上海', '北京'],
cities: cityOptions
};
}
......@@ -199,21 +199,21 @@
```html
<template>
<div>
<el-checkbox v-model="checked3" label="备选项1" border></el-checkbox>
<el-checkbox v-model="checked4" label="备选项2" border></el-checkbox>
<el-checkbox v-model="checked1" label="备选项1" border></el-checkbox>
<el-checkbox v-model="checked2" label="备选项2" border></el-checkbox>
</div>
<div style="margin-top: 20px">
<el-checkbox v-model="checked5" label="备选项1" border size="medium"></el-checkbox>
<el-checkbox v-model="checked6" label="备选项2" border size="medium"></el-checkbox>
<el-checkbox v-model="checked3" label="备选项1" border size="medium"></el-checkbox>
<el-checkbox v-model="checked4" label="备选项2" border size="medium"></el-checkbox>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup5" size="small">
<el-checkbox-group v-model="checkboxGroup1" size="small">
<el-checkbox label="备选项1" border></el-checkbox>
<el-checkbox label="备选项2" border disabled></el-checkbox>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>
<el-checkbox-group v-model="checkboxGroup2" size="mini" disabled>
<el-checkbox label="备选项1" border></el-checkbox>
<el-checkbox label="备选项2" border></el-checkbox>
</el-checkbox-group>
......@@ -224,12 +224,12 @@
export default {
data () {
return {
checked3: true,
checked4: false,
checked5: false,
checked6: true,
checkboxGroup5: [],
checkboxGroup6: []
checked1: true,
checked2: false,
checked3: false,
checked4: true,
checkboxGroup1: [],
checkboxGroup2: []
};
}
}
......
examples/docs/zh-CN/color-picker.md
View file @ b4190041
......@@ -32,13 +32,13 @@
:::demo ColorPicker 支持普通颜色，也支持带 Alpha 通道的颜色，通过`show-alpha`属性即可控制是否支持透明度的选择。
```html
<el-color-picker v-model="color3" show-alpha></el-color-picker>
<el-color-picker v-model="color" show-alpha></el-color-picker>
<script>
export default {
data() {
return {
color3: 'rgba(19, 206, 102, 0.8)'
color: 'rgba(19, 206, 102, 0.8)'
}
}
};
......@@ -51,7 +51,7 @@
:::demo ColorPicker 支持预定义颜色
```html
<el-color-picker
v-model="color5"
v-model="color"
show-alpha
:predefine="predefineColors">
</el-color-picker>
......@@ -60,7 +60,7 @@
export default {
data() {
return {
color5: 'rgba(255, 69, 0, 0.68)',
color: 'rgba(255, 69, 0, 0.68)',
predefineColors: [
'#ff4500',
'#ff8c00',
......@@ -88,16 +88,16 @@
:::demo
```html
<el-color-picker v-model="color4"></el-color-picker>
<el-color-picker v-model="color4" size="medium"></el-color-picker>
<el-color-picker v-model="color4" size="small"></el-color-picker>
<el-color-picker v-model="color4" size="mini"></el-color-picker>
<el-color-picker v-model="color"></el-color-picker>
<el-color-picker v-model="color" size="medium"></el-color-picker>
<el-color-picker v-model="color" size="small"></el-color-picker>
<el-color-picker v-model="color" size="mini"></el-color-picker>
<script>
export default {
data() {
return {
color4: '#409EFF'
color: '#409EFF'
}
}
};
......
examples/docs/zh-CN/date-picker.md
View file @ b4190041
......@@ -25,7 +25,7 @@
align="right"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions1">
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
......@@ -34,7 +34,7 @@
export default {
data() {
return {
pickerOptions1: {
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
......@@ -78,7 +78,7 @@
<div class="block">
<span class="demonstration">周</span>
<el-date-picker
v-model="value3"
v-model="value1"
type="week"
format="yyyy 第 WW 周"
placeholder="选择周">
......@@ -87,7 +87,7 @@
<div class="block">
<span class="demonstration">月</span>
<el-date-picker
v-model="value4"
v-model="value2"
type="month"
placeholder="选择月">
</el-date-picker>
......@@ -97,7 +97,7 @@
<div class="block">
<span class="demonstration">年</span>
<el-date-picker
v-model="value5"
v-model="value3"
type="year"
placeholder="选择年">
</el-date-picker>
......@@ -106,7 +106,7 @@
<span class="demonstration">多个日期</span>
<el-date-picker
type="dates"
v-model="value14"
v-model="value4"
placeholder="选择一个或多个日期">
</el-date-picker>
</div>
......@@ -116,10 +116,10 @@
export default {
data() {
return {
value1: '',
value2: '',
value3: '',
value4: '',
value5: '',
value14: ''
value4: ''
};
}
};
......@@ -137,7 +137,7 @@
<div class="block">
<span class="demonstration">默认</span>
<el-date-picker
v-model="value6"
v-model="value1"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
......@@ -147,14 +147,14 @@
<div class="block">
<span class="demonstration">带快捷选项</span>
<el-date-picker
v-model="value7"
v-model="value2"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions2">
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
......@@ -163,7 +163,7 @@
export default {
data() {
return {
pickerOptions2: {
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
......@@ -190,8 +190,8 @@
}
}]
},
value6: '',
value7: ''
value1: '',
value2: ''
};
}
};
......@@ -210,7 +210,7 @@
<div class="block">
<span class="demonstration">默认</span>
<el-date-picker
v-model="value15"
v-model="value1"
type="monthrange"
range-separator="至"
start-placeholder="开始月份"
......@@ -220,14 +220,14 @@
<div class="block">
<span class="demonstration">带快捷选项</span>
<el-date-picker
v-model="value16"
v-model="value2"
type="monthrange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始月份"
end-placeholder="结束月份"
:picker-options="pickerOptions3">
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
......@@ -236,7 +236,7 @@
export default {
data() {
return {
pickerOptions3: {
pickerOptions: {
shortcuts: [{
text: '本月',
onClick(picker) {
......@@ -259,8 +259,8 @@
}
}]
},
value15: '',
value16: ''
value1: '',
value2: ''
};
}
};
......@@ -305,9 +305,9 @@
<template>
<div class="block">
<span class="demonstration">默认为 Date 对象</span>
<div class="demonstration">值：{{ value10 }}</div>
<div class="demonstration">值：{{ value1 }}</div>
<el-date-picker
v-model="value10"
v-model="value1"
type="date"
placeholder="选择日期"
format="yyyy 年 MM 月 dd 日">
......@@ -315,9 +315,9 @@
</div>
<div class="block">
<span class="demonstration">使用 value-format</span>
<div class="demonstration">值：{{ value11 }}</div>
<div class="demonstration">值：{{ value2 }}</div>
<el-date-picker
v-model="value11"
v-model="value2"
type="date"
placeholder="选择日期"
format="yyyy 年 MM 月 dd 日"
......@@ -326,9 +326,9 @@
</div>
<div class="block">
<span class="demonstration">时间戳</span>
<div class="demonstration">值：{{ value12 }}</div>
<div class="demonstration">值：{{ value3 }}</div>
<el-date-picker
v-model="value12"
v-model="value3"
type="date"
placeholder="选择日期"
format="yyyy 年 MM 月 dd 日"
......@@ -341,9 +341,9 @@
export default {
data() {
return {
value10: '',
value11: '',
value12: ''
value1: '',
value2: '',
value3: ''
};
}
};
......@@ -359,9 +359,9 @@
```html
<template>
<div class="block">
<p>组件值：{{ value13 }}</p>
<p>组件值：{{ value }}</p>
<el-date-picker
v-model="value13"
v-model="value"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
......@@ -374,7 +374,7 @@
export default {
data() {
return {
value13: ''
value: ''
};
}
};
......
examples/docs/zh-CN/input-number.md
View file @ b4190041
......@@ -7,13 +7,13 @@
:::demo 要使用它，只需要在`el-input-number`元素中使用`v-model`绑定变量即可，变量的初始值即为默认值。
```html
<template>
<el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
<el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
</template>
<script>
export default {
data() {
return {
num1: 1
num: 1
};
},
methods: {
......@@ -32,13 +32,13 @@
```html
<template>
<el-input-number v-model="num2" :disabled="true"></el-input-number>
<el-input-number v-model="num" :disabled="true"></el-input-number>
</template>
<script>
export default {
data() {
return {
num2: 1
num: 1
}
}
};
......@@ -54,13 +54,13 @@
```html
<template>
<el-input-number v-model="num3" :step="2"></el-input-number>
<el-input-number v-model="num" :step="2"></el-input-number>
</template>
<script>
export default {
data() {
return {
num3: 5
num: 5
}
}
};
......@@ -74,13 +74,13 @@
```html
<template>
<el-input-number v-model="num9" :precision="2" :step="0.1" :max="10"></el-input-number>
<el-input-number v-model="num" :precision="2" :step="0.1" :max="10"></el-input-number>
</template>
<script>
export default {
data() {
return {
num9: 1
num: 1
}
}
};
......@@ -101,19 +101,19 @@
```html
<template>
<el-input-number v-model="num4"></el-input-number>
<el-input-number size="medium" v-model="num5"></el-input-number>
<el-input-number size="small" v-model="num6"></el-input-number>
<el-input-number size="mini" v-model="num7"></el-input-number>
<el-input-number v-model="num1"></el-input-number>
<el-input-number size="medium" v-model="num2"></el-input-number>
<el-input-number size="small" v-model="num3"></el-input-number>
<el-input-number size="mini" v-model="num4"></el-input-number>
</template>
<script>
export default {
data() {
return {
num4: 1,
num5: 1,
num6: 1,
num7: 1
num1: 1,
num2: 1,
num3: 1,
num4: 1
}
}
};
......@@ -126,13 +126,13 @@
:::demo 设置 `controls-position` 属性可以控制按钮位置。
```html
<template>
<el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
<el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
</template>
<script>
export default {
data() {
return {
num8: 1
num: 1
};
},
methods: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment