mirror of https://github.com/ElemeFE/element
Docs:rename variable name in docs (#15094)
刘鹏龙
hetech
parent
60e3e3b188
commit
b419004199
|
|
@ -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: []
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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: []
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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: []
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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: []
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue