Commit 87929cc9 authored by 刘鹏龙's avatar 刘鹏龙 Committed by hetech

Docs:rename variable name (#15003)

parent 88b628bd
...@@ -70,7 +70,7 @@ You can customize loading text, loading spinner and background color. ...@@ -70,7 +70,7 @@ You can customize loading text, loading spinner and background color.
```html ```html
<template> <template>
<el-table <el-table
v-loading="loading2" v-loading="loading"
element-loading-text="Loading..." element-loading-text="Loading..."
element-loading-spinner="el-icon-loading" element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)" element-loading-background="rgba(0, 0, 0, 0.8)"
...@@ -110,7 +110,7 @@ You can customize loading text, loading spinner and background color. ...@@ -110,7 +110,7 @@ You can customize loading text, loading spinner and background color.
name: 'John Smith', name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District' address: 'No.1518, Jinshajiang Road, Putuo District'
}], }],
loading2: true loading: true
}; };
} }
}; };
...@@ -134,7 +134,7 @@ Show a full screen animation while loading data. ...@@ -134,7 +134,7 @@ Show a full screen animation while loading data.
</el-button> </el-button>
<el-button <el-button
type="primary" type="primary"
@click="openFullScreen2"> @click="openFullScreen">
As a service As a service
</el-button> </el-button>
</template> </template>
...@@ -153,7 +153,7 @@ Show a full screen animation while loading data. ...@@ -153,7 +153,7 @@ Show a full screen animation while loading data.
this.fullscreenLoading = false; this.fullscreenLoading = false;
}, 2000); }, 2000);
}, },
openFullScreen2() { openFullScreen() {
const loading = this.$loading({ const loading = this.$loading({
lock: true, lock: true,
text: 'Loading', text: 'Loading',
......
...@@ -44,13 +44,13 @@ Confirm is used to ask users' confirmation. ...@@ -44,13 +44,13 @@ Confirm is used to ask users' confirmation.
```html ```html
<template> <template>
<el-button type="text" @click="open2">Click to open the Message Box</el-button> <el-button type="text" @click="open">Click to open the Message Box</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open2() { open() {
this.$confirm('This will permanently delete the file. Continue?', 'Warning', { this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
confirmButtonText: 'OK', confirmButtonText: 'OK',
cancelButtonText: 'Cancel', cancelButtonText: 'Cancel',
...@@ -82,13 +82,13 @@ Prompt is used when user input is required. ...@@ -82,13 +82,13 @@ Prompt is used when user input is required.
```html ```html
<template> <template>
<el-button type="text" @click="open3">Click to open Message Box</el-button> <el-button type="text" @click="open">Click to open Message Box</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open3() { open() {
this.$prompt('Please input your e-mail', 'Tip', { this.$prompt('Please input your e-mail', 'Tip', {
confirmButtonText: 'OK', confirmButtonText: 'OK',
cancelButtonText: 'Cancel', cancelButtonText: 'Cancel',
...@@ -120,13 +120,13 @@ Can be customized to show various content. ...@@ -120,13 +120,13 @@ Can be customized to show various content.
```html ```html
<template> <template>
<el-button type="text" @click="open4">Click to open Message Box</el-button> <el-button type="text" @click="open">Click to open Message Box</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open4() { open() {
const h = this.$createElement; const h = this.$createElement;
this.$msgbox({ this.$msgbox({
title: 'Message', title: 'Message',
...@@ -176,13 +176,13 @@ The content of MessageBox can be `VNode`, allowing us to pass custom components. ...@@ -176,13 +176,13 @@ The content of MessageBox can be `VNode`, allowing us to pass custom components.
```html ```html
<template> <template>
<el-button type="text" @click="open5">Click to open Message Box</el-button> <el-button type="text" @click="open">Click to open Message Box</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open5() { open() {
this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', { this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {
dangerouslyUseHTMLString: true dangerouslyUseHTMLString: true
}); });
...@@ -205,13 +205,13 @@ In some cases, clicking the cancel button and close button may have different me ...@@ -205,13 +205,13 @@ In some cases, clicking the cancel button and close button may have different me
```html ```html
<template> <template>
<el-button type="text" @click="open6">Click to open Message Box</el-button> <el-button type="text" @click="open">Click to open Message Box</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open6() { open() {
this.$confirm('You have unsaved changes, save and proceed?', 'Confirm', { this.$confirm('You have unsaved changes, save and proceed?', 'Confirm', {
distinguishCancelAndClose: true, distinguishCancelAndClose: true,
confirmButtonText: 'Save', confirmButtonText: 'Save',
...@@ -245,13 +245,13 @@ Content of MessageBox can be centered. ...@@ -245,13 +245,13 @@ Content of MessageBox can be centered.
```html ```html
<template> <template>
<el-button type="text" @click="open7">Click to open Message Box</el-button> <el-button type="text" @click="open">Click to open Message Box</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open7() { open() {
this.$confirm('This will permanently delete the file. Continue?', 'Warning', { this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
confirmButtonText: 'OK', confirmButtonText: 'OK',
cancelButtonText: 'Cancel', cancelButtonText: 'Cancel',
......
...@@ -32,15 +32,15 @@ Radio should not have too many options. Otherwise, use the Select component inst ...@@ -32,15 +32,15 @@ Radio should not have too many options. Otherwise, use the Select component inst
:::demo You just need to add the `disabled` attribute. :::demo You just need to add the `disabled` attribute.
```html ```html
<template> <template>
<el-radio disabled v-model="radio1" label="disabled">Option A</el-radio> <el-radio disabled v-model="radio" label="disabled">Option A</el-radio>
<el-radio disabled v-model="radio1" label="selected and disabled">Option B</el-radio> <el-radio disabled v-model="radio" label="selected and disabled">Option B</el-radio>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
radio1: 'selected and disabled' radio: 'selected and disabled'
}; };
} }
} }
...@@ -55,7 +55,7 @@ Suitable for choosing from some mutually exclusive options. ...@@ -55,7 +55,7 @@ Suitable for choosing from some mutually exclusive options.
:::demo Combine `el-radio-group` with `el-radio` to display a radio group. Bind a variable with `v-model` of `el-radio-group` element and set label value in `el-radio`. It also provides `change` event with the current value as its parameter. :::demo Combine `el-radio-group` with `el-radio` to display a radio group. Bind a variable with `v-model` of `el-radio-group` element and set label value in `el-radio`. It also provides `change` event with the current value as its parameter.
```html ```html
<el-radio-group v-model="radio2"> <el-radio-group v-model="radio">
<el-radio :label="3">Option A</el-radio> <el-radio :label="3">Option A</el-radio>
<el-radio :label="6">Option B</el-radio> <el-radio :label="6">Option B</el-radio>
<el-radio :label="9">Option C</el-radio> <el-radio :label="9">Option C</el-radio>
...@@ -65,7 +65,7 @@ Suitable for choosing from some mutually exclusive options. ...@@ -65,7 +65,7 @@ Suitable for choosing from some mutually exclusive options.
export default { export default {
data () { data () {
return { return {
radio2: 3 radio: 3
}; };
} }
} }
...@@ -81,7 +81,7 @@ Radio with button styles. ...@@ -81,7 +81,7 @@ Radio with button styles.
```html ```html
<template> <template>
<div> <div>
<el-radio-group v-model="radio3"> <el-radio-group v-model="radio1">
<el-radio-button label="New York"></el-radio-button> <el-radio-button label="New York"></el-radio-button>
<el-radio-button label="Washington"></el-radio-button> <el-radio-button label="Washington"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button> <el-radio-button label="Los Angeles"></el-radio-button>
...@@ -89,7 +89,7 @@ Radio with button styles. ...@@ -89,7 +89,7 @@ Radio with button styles.
</el-radio-group> </el-radio-group>
</div> </div>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<el-radio-group v-model="radio4" size="medium"> <el-radio-group v-model="radio2" size="medium">
<el-radio-button label="New York" ></el-radio-button> <el-radio-button label="New York" ></el-radio-button>
<el-radio-button label="Washington"></el-radio-button> <el-radio-button label="Washington"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button> <el-radio-button label="Los Angeles"></el-radio-button>
...@@ -97,7 +97,7 @@ Radio with button styles. ...@@ -97,7 +97,7 @@ Radio with button styles.
</el-radio-group> </el-radio-group>
</div> </div>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<el-radio-group v-model="radio5" size="small"> <el-radio-group v-model="radio3" size="small">
<el-radio-button label="New York"></el-radio-button> <el-radio-button label="New York"></el-radio-button>
<el-radio-button label="Washington" disabled ></el-radio-button> <el-radio-button label="Washington" disabled ></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button> <el-radio-button label="Los Angeles"></el-radio-button>
...@@ -105,7 +105,7 @@ Radio with button styles. ...@@ -105,7 +105,7 @@ Radio with button styles.
</el-radio-group> </el-radio-group>
</div> </div>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<el-radio-group v-model="radio6" disabled size="mini"> <el-radio-group v-model="radio4" disabled size="mini">
<el-radio-button label="New York"></el-radio-button> <el-radio-button label="New York"></el-radio-button>
<el-radio-button label="Washington"></el-radio-button> <el-radio-button label="Washington"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button> <el-radio-button label="Los Angeles"></el-radio-button>
...@@ -118,10 +118,10 @@ Radio with button styles. ...@@ -118,10 +118,10 @@ Radio with button styles.
export default { export default {
data () { data () {
return { return {
radio1: 'New York',
radio2: 'New York',
radio3: 'New York', radio3: 'New York',
radio4: 'New York', radio4: 'New York'
radio5: 'New York',
radio6: 'New York'
}; };
} }
} }
...@@ -135,21 +135,21 @@ Radio with button styles. ...@@ -135,21 +135,21 @@ Radio with button styles.
```html ```html
<template> <template>
<div> <div>
<el-radio v-model="radio7" label="1" border>Option A</el-radio> <el-radio v-model="radio1" label="1" border>Option A</el-radio>
<el-radio v-model="radio7" label="2" border>Option B</el-radio> <el-radio v-model="radio1" label="2" border>Option B</el-radio>
</div> </div>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<el-radio v-model="radio8" label="1" border size="medium">Option A</el-radio> <el-radio v-model="radio2" label="1" border size="medium">Option A</el-radio>
<el-radio v-model="radio8" label="2" border size="medium">Option B</el-radio> <el-radio v-model="radio2" label="2" border size="medium">Option B</el-radio>
</div> </div>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<el-radio-group v-model="radio9" size="small"> <el-radio-group v-model="radio3" size="small">
<el-radio label="1" border>Option A</el-radio> <el-radio label="1" border>Option A</el-radio>
<el-radio label="2" border disabled>Option B</el-radio> <el-radio label="2" border disabled>Option B</el-radio>
</el-radio-group> </el-radio-group>
</div> </div>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<el-radio-group v-model="radio10" size="mini" disabled> <el-radio-group v-model="radio4" size="mini" disabled>
<el-radio label="1" border>Option A</el-radio> <el-radio label="1" border>Option A</el-radio>
<el-radio label="2" border>Option B</el-radio> <el-radio label="2" border>Option B</el-radio>
</el-radio-group> </el-radio-group>
...@@ -160,10 +160,10 @@ Radio with button styles. ...@@ -160,10 +160,10 @@ Radio with button styles.
export default { export default {
data () { data () {
return { return {
radio7: '1', radio1: '1',
radio8: '1', radio2: '1',
radio9: '1', radio3: '1',
radio10: '1' radio4: '1'
}; };
} }
} }
......
...@@ -40,7 +40,7 @@ Using text to indicate rating score ...@@ -40,7 +40,7 @@ Using text to indicate rating score
```html ```html
<el-rate <el-rate
v-model="value3" v-model="value"
:texts="['oops', 'disappointed', 'normal', 'good', 'great']" :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
show-text> show-text>
</el-rate> </el-rate>
...@@ -49,7 +49,7 @@ Using text to indicate rating score ...@@ -49,7 +49,7 @@ Using text to indicate rating score
export default { export default {
data() { data() {
return { return {
value3: null value: null
} }
} }
} }
...@@ -65,7 +65,7 @@ You can use different icons to distinguish different rate components. ...@@ -65,7 +65,7 @@ You can use different icons to distinguish different rate components.
```html ```html
<el-rate <el-rate
v-model="value4" v-model="value"
:icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']" :icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
void-icon-class="icon-rate-face-off" void-icon-class="icon-rate-face-off"
:colors="['#99A9BF', '#F7BA2A', '#FF9900']"> :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
...@@ -75,7 +75,7 @@ You can use different icons to distinguish different rate components. ...@@ -75,7 +75,7 @@ You can use different icons to distinguish different rate components.
export default { export default {
data() { data() {
return { return {
value4: null value: null
} }
} }
} }
...@@ -91,7 +91,7 @@ Read-only Rate is for displaying rating score. Half star is supported. ...@@ -91,7 +91,7 @@ Read-only Rate is for displaying rating score. Half star is supported.
```html ```html
<el-rate <el-rate
v-model="value5" v-model="value"
disabled disabled
show-score show-score
text-color="#ff9900" text-color="#ff9900"
...@@ -102,7 +102,7 @@ Read-only Rate is for displaying rating score. Half star is supported. ...@@ -102,7 +102,7 @@ Read-only Rate is for displaying rating score. Half star is supported.
export default { export default {
data() { data() {
return { return {
value5: 3.7 value: 3.7
} }
} }
} }
......
...@@ -52,9 +52,9 @@ When there are plenty of options, use a drop-down menu to display and select des ...@@ -52,9 +52,9 @@ When there are plenty of options, use a drop-down menu to display and select des
```html ```html
<template> <template>
<el-select v-model="value2" placeholder="Select"> <el-select v-model="value" placeholder="Select">
<el-option <el-option
v-for="item in options2" v-for="item in options"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value"
...@@ -67,7 +67,7 @@ When there are plenty of options, use a drop-down menu to display and select des ...@@ -67,7 +67,7 @@ When there are plenty of options, use a drop-down menu to display and select des
export default { export default {
data() { data() {
return { return {
options2: [{ options: [{
value: 'Option1', value: 'Option1',
label: 'Option1' label: 'Option1'
}, { }, {
...@@ -84,7 +84,7 @@ When there are plenty of options, use a drop-down menu to display and select des ...@@ -84,7 +84,7 @@ When there are plenty of options, use a drop-down menu to display and select des
value: 'Option5', value: 'Option5',
label: 'Option5' label: 'Option5'
}], }],
value2: '' value: ''
} }
} }
} }
...@@ -99,7 +99,7 @@ Disable the whole component. ...@@ -99,7 +99,7 @@ Disable the whole component.
:::demo Set `disabled` of `el-select` to make it disabled. :::demo Set `disabled` of `el-select` to make it disabled.
```html ```html
<template> <template>
<el-select v-model="value3" disabled placeholder="Select"> <el-select v-model="value" disabled placeholder="Select">
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.value"
...@@ -129,7 +129,7 @@ Disable the whole component. ...@@ -129,7 +129,7 @@ Disable the whole component.
value: 'Option5', value: 'Option5',
label: 'Option5' label: 'Option5'
}], }],
value3: '' value: ''
} }
} }
} }
...@@ -144,7 +144,7 @@ You can clear Select using a clear icon. ...@@ -144,7 +144,7 @@ You can clear Select using a clear icon.
:::demo Set `clearable` attribute for `el-select` and a clear icon will appear. Note that `clearable` is only for single select. :::demo Set `clearable` attribute for `el-select` and a clear icon will appear. Note that `clearable` is only for single select.
```html ```html
<template> <template>
<el-select v-model="value4" clearable placeholder="Select"> <el-select v-model="value" clearable placeholder="Select">
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.value"
...@@ -174,7 +174,7 @@ You can clear Select using a clear icon. ...@@ -174,7 +174,7 @@ You can clear Select using a clear icon.
value: 'Option5', value: 'Option5',
label: 'Option5' label: 'Option5'
}], }],
value4: '' value: ''
} }
} }
} }
...@@ -250,7 +250,7 @@ You can customize HTML templates for options. ...@@ -250,7 +250,7 @@ You can customize HTML templates for options.
```html ```html
<template> <template>
<el-select v-model="value6" placeholder="Select"> <el-select v-model="value" placeholder="Select">
<el-option <el-option
v-for="item in cities" v-for="item in cities"
:key="item.value" :key="item.value"
...@@ -285,7 +285,7 @@ You can customize HTML templates for options. ...@@ -285,7 +285,7 @@ You can customize HTML templates for options.
value: 'Guangzhou', value: 'Guangzhou',
label: 'Guangzhou' label: 'Guangzhou'
}], }],
value6: '' value: ''
} }
} }
} }
...@@ -301,9 +301,9 @@ Display options in groups. ...@@ -301,9 +301,9 @@ Display options in groups.
```html ```html
<template> <template>
<el-select v-model="value7" placeholder="Select"> <el-select v-model="value" placeholder="Select">
<el-option-group <el-option-group
v-for="group in options3" v-for="group in options"
:key="group.label" :key="group.label"
:label="group.label"> :label="group.label">
<el-option <el-option
...@@ -320,7 +320,7 @@ Display options in groups. ...@@ -320,7 +320,7 @@ Display options in groups.
export default { export default {
data() { data() {
return { return {
options3: [{ options: [{
label: 'Popular cities', label: 'Popular cities',
options: [{ options: [{
value: 'Shanghai', value: 'Shanghai',
...@@ -345,7 +345,7 @@ Display options in groups. ...@@ -345,7 +345,7 @@ Display options in groups.
label: 'Dalian' label: 'Dalian'
}] }]
}], }],
value7: '' value: ''
} }
} }
} }
...@@ -360,7 +360,7 @@ You can filter options for your desired ones. ...@@ -360,7 +360,7 @@ You can filter options for your desired ones.
:::demo Adding `filterable` to `el-select` enables filtering. By default, Select will find all the options whose `label` attribute contains the input value. If you prefer other filtering strategies, you can pass the `filter-method`. `filter-method` is a `Function` that gets called when the input value changes, and its parameter is the current input value. :::demo Adding `filterable` to `el-select` enables filtering. By default, Select will find all the options whose `label` attribute contains the input value. If you prefer other filtering strategies, you can pass the `filter-method`. `filter-method` is a `Function` that gets called when the input value changes, and its parameter is the current input value.
```html ```html
<template> <template>
<el-select v-model="value8" filterable placeholder="Select"> <el-select v-model="value" filterable placeholder="Select">
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.value"
...@@ -390,7 +390,7 @@ You can filter options for your desired ones. ...@@ -390,7 +390,7 @@ You can filter options for your desired ones.
value: 'Option5', value: 'Option5',
label: 'Option5' label: 'Option5'
}], }],
value8: '' value: ''
} }
} }
} }
...@@ -407,7 +407,7 @@ Enter keywords and search data from server. ...@@ -407,7 +407,7 @@ Enter keywords and search data from server.
```html ```html
<template> <template>
<el-select <el-select
v-model="value9" v-model="value"
multiple multiple
filterable filterable
remote remote
...@@ -416,7 +416,7 @@ Enter keywords and search data from server. ...@@ -416,7 +416,7 @@ Enter keywords and search data from server.
:remote-method="remoteMethod" :remote-method="remoteMethod"
:loading="loading"> :loading="loading">
<el-option <el-option
v-for="item in options4" v-for="item in options"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value">
...@@ -428,8 +428,8 @@ Enter keywords and search data from server. ...@@ -428,8 +428,8 @@ Enter keywords and search data from server.
export default { export default {
data() { data() {
return { return {
options4: [], options: [],
value9: [], value: [],
list: [], list: [],
loading: false, loading: false,
states: ["Alabama", "Alaska", "Arizona", states: ["Alabama", "Alaska", "Arizona",
...@@ -462,13 +462,13 @@ Enter keywords and search data from server. ...@@ -462,13 +462,13 @@ Enter keywords and search data from server.
this.loading = true; this.loading = true;
setTimeout(() => { setTimeout(() => {
this.loading = false; this.loading = false;
this.options4 = this.list.filter(item => { this.options = this.list.filter(item => {
return item.label.toLowerCase() return item.label.toLowerCase()
.indexOf(query.toLowerCase()) > -1; .indexOf(query.toLowerCase()) > -1;
}); });
}, 200); }, 200);
} else { } else {
this.options4 = []; this.options = [];
} }
} }
} }
...@@ -483,14 +483,14 @@ Create and select new items that are not included in select options ...@@ -483,14 +483,14 @@ Create and select new items that are not included in select options
```html ```html
<template> <template>
<el-select <el-select
v-model="value10" v-model="value"
multiple multiple
filterable filterable
allow-create allow-create
default-first-option default-first-option
placeholder="Choose tags for your article"> placeholder="Choose tags for your article">
<el-option <el-option
v-for="item in options5" v-for="item in options"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value">
...@@ -502,7 +502,7 @@ Create and select new items that are not included in select options ...@@ -502,7 +502,7 @@ Create and select new items that are not included in select options
export default { export default {
data() { data() {
return { return {
options5: [{ options: [{
value: 'HTML', value: 'HTML',
label: 'HTML' label: 'HTML'
}, { }, {
...@@ -512,7 +512,7 @@ Create and select new items that are not included in select options ...@@ -512,7 +512,7 @@ Create and select new items that are not included in select options
value: 'JavaScript', value: 'JavaScript',
label: 'JavaScript' label: 'JavaScript'
}], }],
value10: [] value: []
} }
} }
} }
......
...@@ -70,7 +70,7 @@ Puede personalizar el texto de carga, spinner de carga y color de fondo. ...@@ -70,7 +70,7 @@ Puede personalizar el texto de carga, spinner de carga y color de fondo.
```html ```html
<template> <template>
<el-table <el-table
v-loading="loading2" v-loading="loading"
element-loading-text="Loading..." element-loading-text="Loading..."
element-loading-spinner="el-icon-loading" element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)" element-loading-background="rgba(0, 0, 0, 0.8)"
...@@ -110,7 +110,7 @@ Puede personalizar el texto de carga, spinner de carga y color de fondo. ...@@ -110,7 +110,7 @@ Puede personalizar el texto de carga, spinner de carga y color de fondo.
name: 'John Smith', name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District' address: 'No.1518, Jinshajiang Road, Putuo District'
}], }],
loading2: true loading: true
}; };
} }
}; };
...@@ -134,7 +134,7 @@ Muestra una animación de pantalla completa mientras se cargan los datos ...@@ -134,7 +134,7 @@ Muestra una animación de pantalla completa mientras se cargan los datos
</el-button> </el-button>
<el-button <el-button
type="primary" type="primary"
@click="openFullScreen2"> @click="openFullScreen">
Como servicio Como servicio
</el-button> </el-button>
</template> </template>
...@@ -153,7 +153,7 @@ Muestra una animación de pantalla completa mientras se cargan los datos ...@@ -153,7 +153,7 @@ Muestra una animación de pantalla completa mientras se cargan los datos
this.fullscreenLoading = false; this.fullscreenLoading = false;
}, 2000); }, 2000);
}, },
openFullScreen2() { openFullScreen() {
const loading = this.$loading({ const loading = this.$loading({
lock: true, lock: true,
text: 'Loading', text: 'Loading',
......
...@@ -45,13 +45,13 @@ Confirm es utilizado para preguntar al usuario y recibir una confirmacion. ...@@ -45,13 +45,13 @@ Confirm es utilizado para preguntar al usuario y recibir una confirmacion.
```html ```html
<template> <template>
<el-button type="text" @click="open2">Click to open the Message Box</el-button> <el-button type="text" @click="open">Click to open the Message Box</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open2() { open() {
this.$confirm('This will permanently delete the file. Continue?', 'Warning', { this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
confirmButtonText: 'OK', confirmButtonText: 'OK',
cancelButtonText: 'Cancel', cancelButtonText: 'Cancel',
...@@ -83,13 +83,13 @@ Prompt es utilizado cuando se requiere entrada de informacion del usuario. ...@@ -83,13 +83,13 @@ Prompt es utilizado cuando se requiere entrada de informacion del usuario.
```html ```html
<template> <template>
<el-button type="text" @click="open3">Click to open Message Box</el-button> <el-button type="text" @click="open">Click to open Message Box</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open3() { open() {
this.$prompt('Please input your e-mail', 'Tip', { this.$prompt('Please input your e-mail', 'Tip', {
confirmButtonText: 'OK', confirmButtonText: 'OK',
cancelButtonText: 'Cancel', cancelButtonText: 'Cancel',
...@@ -121,13 +121,13 @@ Puede ser personalizado para mostrar diversos contenidos. ...@@ -121,13 +121,13 @@ Puede ser personalizado para mostrar diversos contenidos.
```html ```html
<template> <template>
<el-button type="text" @click="open4">Click to open Message Box</el-button> <el-button type="text" @click="open">Click to open Message Box</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open4() { open() {
const h = this.$createElement; const h = this.$createElement;
this.$msgbox({ this.$msgbox({
title: 'Message', title: 'Message',
...@@ -179,13 +179,13 @@ El contenido de MessageBox puede ser `VNode`, permitiéndonos pasar componentes ...@@ -179,13 +179,13 @@ El contenido de MessageBox puede ser `VNode`, permitiéndonos pasar componentes
```html ```html
<template> <template>
<el-button type="text" @click="open5">Click to open Message Box</el-button> <el-button type="text" @click="open">Click to open Message Box</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open5() { open() {
this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', { this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {
dangerouslyUseHTMLString: true dangerouslyUseHTMLString: true
}); });
...@@ -209,13 +209,13 @@ En algunos casos, hacer clic en el botón Cancelar y en el botón Cerrar puede t ...@@ -209,13 +209,13 @@ En algunos casos, hacer clic en el botón Cancelar y en el botón Cerrar puede t
```html ```html
<template> <template>
<el-button type="text" @click="open6">Click to open Message Box</el-button> <el-button type="text" @click="open">Click to open Message Box</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open6() { open() {
this.$confirm('You have unsaved changes, save and proceed?', 'Confirm', { this.$confirm('You have unsaved changes, save and proceed?', 'Confirm', {
distinguishCancelAndClose: true, distinguishCancelAndClose: true,
confirmButtonText: 'Save', confirmButtonText: 'Save',
...@@ -249,13 +249,13 @@ El contenido del componente MessageBox puede ser centrado. ...@@ -249,13 +249,13 @@ El contenido del componente MessageBox puede ser centrado.
```html ```html
<template> <template>
<el-button type="text" @click="open7">Click to open Message Box</el-button> <el-button type="text" @click="open">Click to open Message Box</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open7() { open() {
this.$confirm('This will permanently delete the file. Continue?', 'Warning', { this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
confirmButtonText: 'OK', confirmButtonText: 'OK',
cancelButtonText: 'Cancel', cancelButtonText: 'Cancel',
......
...@@ -30,15 +30,15 @@ El atributo `disabled` es utilizado para deshabilitar un Radio. ...@@ -30,15 +30,15 @@ El atributo `disabled` es utilizado para deshabilitar un Radio.
:::demo Solo necesita agregar el atributo `disabled`. :::demo Solo necesita agregar el atributo `disabled`.
```html ```html
<template> <template>
<el-radio disabled v-model="radio1" label="disabled">Option A</el-radio> <el-radio disabled v-model="radio" label="disabled">Option A</el-radio>
<el-radio disabled v-model="radio1" label="selected and disabled">Option B</el-radio> <el-radio disabled v-model="radio" label="selected and disabled">Option B</el-radio>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
radio1: 'selected and disabled' radio: 'selected and disabled'
}; };
} }
} }
...@@ -53,7 +53,7 @@ Recomendado para seleccionar opciones que se excluyen mutuamente. ...@@ -53,7 +53,7 @@ Recomendado para seleccionar opciones que se excluyen mutuamente.
:::demo Combine `el-radio-group` con `el-radio` para mostrar un grupo de Radios. Enlace la variable con `v-model` del elemento `el-radio-group` y asigne el valor del `label` en `el-radio`. Se provee el evento `change` con el valor actual como parámetro. :::demo Combine `el-radio-group` con `el-radio` para mostrar un grupo de Radios. Enlace la variable con `v-model` del elemento `el-radio-group` y asigne el valor del `label` en `el-radio`. Se provee el evento `change` con el valor actual como parámetro.
```html ```html
<el-radio-group v-model="radio2"> <el-radio-group v-model="radio">
<el-radio :label="3">Option A</el-radio> <el-radio :label="3">Option A</el-radio>
<el-radio :label="6">Option B</el-radio> <el-radio :label="6">Option B</el-radio>
<el-radio :label="9">Option C</el-radio> <el-radio :label="9">Option C</el-radio>
...@@ -63,7 +63,7 @@ Recomendado para seleccionar opciones que se excluyen mutuamente. ...@@ -63,7 +63,7 @@ Recomendado para seleccionar opciones que se excluyen mutuamente.
export default { export default {
data () { data () {
return { return {
radio2: 3 radio: 3
}; };
} }
} }
...@@ -79,7 +79,7 @@ Radio con estilo de botón. ...@@ -79,7 +79,7 @@ Radio con estilo de botón.
```html ```html
<template> <template>
<div> <div>
<el-radio-group v-model="radio3"> <el-radio-group v-model="radio1">
<el-radio-button label="New York"></el-radio-button> <el-radio-button label="New York"></el-radio-button>
<el-radio-button label="Washington"></el-radio-button> <el-radio-button label="Washington"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button> <el-radio-button label="Los Angeles"></el-radio-button>
...@@ -87,7 +87,7 @@ Radio con estilo de botón. ...@@ -87,7 +87,7 @@ Radio con estilo de botón.
</el-radio-group> </el-radio-group>
</div> </div>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<el-radio-group v-model="radio4" size="medium"> <el-radio-group v-model="radio2" size="medium">
<el-radio-button label="New York" ></el-radio-button> <el-radio-button label="New York" ></el-radio-button>
<el-radio-button label="Washington"></el-radio-button> <el-radio-button label="Washington"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button> <el-radio-button label="Los Angeles"></el-radio-button>
...@@ -95,7 +95,7 @@ Radio con estilo de botón. ...@@ -95,7 +95,7 @@ Radio con estilo de botón.
</el-radio-group> </el-radio-group>
</div> </div>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<el-radio-group v-model="radio5" size="small"> <el-radio-group v-model="radio3" size="small">
<el-radio-button label="New York"></el-radio-button> <el-radio-button label="New York"></el-radio-button>
<el-radio-button label="Washington" disabled ></el-radio-button> <el-radio-button label="Washington" disabled ></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button> <el-radio-button label="Los Angeles"></el-radio-button>
...@@ -103,7 +103,7 @@ Radio con estilo de botón. ...@@ -103,7 +103,7 @@ Radio con estilo de botón.
</el-radio-group> </el-radio-group>
</div> </div>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<el-radio-group v-model="radio6" disabled size="mini"> <el-radio-group v-model="radio4" disabled size="mini">
<el-radio-button label="New York"></el-radio-button> <el-radio-button label="New York"></el-radio-button>
<el-radio-button label="Washington"></el-radio-button> <el-radio-button label="Washington"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button> <el-radio-button label="Los Angeles"></el-radio-button>
...@@ -116,10 +116,10 @@ Radio con estilo de botón. ...@@ -116,10 +116,10 @@ Radio con estilo de botón.
export default { export default {
data () { data () {
return { return {
radio1: 'New York',
radio2: 'New York',
radio3: 'New York', radio3: 'New York',
radio4: 'New York', radio4: 'New York'
radio5: 'New York',
radio6: 'New York'
}; };
} }
} }
...@@ -133,21 +133,21 @@ Radio con estilo de botón. ...@@ -133,21 +133,21 @@ Radio con estilo de botón.
```html ```html
<template> <template>
<div> <div>
<el-radio v-model="radio7" label="1" border>Option A</el-radio> <el-radio v-model="radio1" label="1" border>Option A</el-radio>
<el-radio v-model="radio7" label="2" border>Option B</el-radio> <el-radio v-model="radio1" label="2" border>Option B</el-radio>
</div> </div>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<el-radio v-model="radio8" label="1" border size="medium">Option A</el-radio> <el-radio v-model="radio2" label="1" border size="medium">Option A</el-radio>
<el-radio v-model="radio8" label="2" border size="medium">Option B</el-radio> <el-radio v-model="radio2" label="2" border size="medium">Option B</el-radio>
</div> </div>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<el-radio-group v-model="radio9" size="small"> <el-radio-group v-model="radio3" size="small">
<el-radio label="1" border>Option A</el-radio> <el-radio label="1" border>Option A</el-radio>
<el-radio label="2" border disabled>Option B</el-radio> <el-radio label="2" border disabled>Option B</el-radio>
</el-radio-group> </el-radio-group>
</div> </div>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<el-radio-group v-model="radio10" size="mini" disabled> <el-radio-group v-model="radio4" size="mini" disabled>
<el-radio label="1" border>Option A</el-radio> <el-radio label="1" border>Option A</el-radio>
<el-radio label="2" border>Option B</el-radio> <el-radio label="2" border>Option B</el-radio>
</el-radio-group> </el-radio-group>
...@@ -158,10 +158,10 @@ Radio con estilo de botón. ...@@ -158,10 +158,10 @@ Radio con estilo de botón.
export default { export default {
data () { data () {
return { return {
radio7: '1', radio1: '1',
radio8: '1', radio2: '1',
radio9: '1', radio3: '1',
radio10: '1' radio4: '1'
}; };
} }
} }
......
...@@ -41,7 +41,7 @@ Usa texto para indicar la puntuación ...@@ -41,7 +41,7 @@ Usa texto para indicar la puntuación
```html ```html
<el-rate <el-rate
v-model="value3" v-model="value"
:texts="['oops', 'disappointed', 'normal', 'good', 'great']" :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
show-text> show-text>
</el-rate> </el-rate>
...@@ -50,7 +50,7 @@ Usa texto para indicar la puntuación ...@@ -50,7 +50,7 @@ Usa texto para indicar la puntuación
export default { export default {
data() { data() {
return { return {
value3: null value: null
} }
} }
} }
...@@ -66,7 +66,7 @@ Puede utilizar iconos para diferenciar cada componente. ...@@ -66,7 +66,7 @@ Puede utilizar iconos para diferenciar cada componente.
```html ```html
<el-rate <el-rate
v-model="value4" v-model="value"
:icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']" :icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
void-icon-class="icon-rate-face-off" void-icon-class="icon-rate-face-off"
:colors="['#99A9BF', '#F7BA2A', '#FF9900']"> :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
...@@ -76,7 +76,7 @@ Puede utilizar iconos para diferenciar cada componente. ...@@ -76,7 +76,7 @@ Puede utilizar iconos para diferenciar cada componente.
export default { export default {
data() { data() {
return { return {
value4: null value: null
} }
} }
} }
...@@ -92,7 +92,7 @@ La calificación de solo lectura es para mostrar la puntuación. Soporta media e ...@@ -92,7 +92,7 @@ La calificación de solo lectura es para mostrar la puntuación. Soporta media e
```html ```html
<el-rate <el-rate
v-model="value5" v-model="value"
disabled disabled
show-score show-score
text-color="#ff9900" text-color="#ff9900"
...@@ -103,7 +103,7 @@ La calificación de solo lectura es para mostrar la puntuación. Soporta media e ...@@ -103,7 +103,7 @@ La calificación de solo lectura es para mostrar la puntuación. Soporta media e
export default { export default {
data() { data() {
return { return {
value5: 3.7 value: 3.7
} }
} }
} }
......
...@@ -52,9 +52,9 @@ Cuando haya muchas opciones, utilice un menú desplegable para mostrar y selecci ...@@ -52,9 +52,9 @@ Cuando haya muchas opciones, utilice un menú desplegable para mostrar y selecci
```html ```html
<template> <template>
<el-select v-model="value2" placeholder="Select"> <el-select v-model="value" placeholder="Select">
<el-option <el-option
v-for="item in options2" v-for="item in options"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value"
...@@ -67,7 +67,7 @@ Cuando haya muchas opciones, utilice un menú desplegable para mostrar y selecci ...@@ -67,7 +67,7 @@ Cuando haya muchas opciones, utilice un menú desplegable para mostrar y selecci
export default { export default {
data() { data() {
return { return {
options2: [{ options: [{
value: 'Option1', value: 'Option1',
label: 'Option1' label: 'Option1'
}, { }, {
...@@ -84,7 +84,7 @@ Cuando haya muchas opciones, utilice un menú desplegable para mostrar y selecci ...@@ -84,7 +84,7 @@ Cuando haya muchas opciones, utilice un menú desplegable para mostrar y selecci
value: 'Option5', value: 'Option5',
label: 'Option5' label: 'Option5'
}], }],
value2: '' value: ''
} }
} }
} }
...@@ -100,7 +100,7 @@ Desactivar todo el componente. ...@@ -100,7 +100,7 @@ Desactivar todo el componente.
```html ```html
<template> <template>
<el-select v-model="value3" disabled placeholder="Select"> <el-select v-model="value" disabled placeholder="Select">
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.value"
...@@ -130,7 +130,7 @@ Desactivar todo el componente. ...@@ -130,7 +130,7 @@ Desactivar todo el componente.
value: 'Option5', value: 'Option5',
label: 'Option5' label: 'Option5'
}], }],
value3: '' value: ''
} }
} }
} }
...@@ -146,7 +146,7 @@ Puede limpiar un Select con un icono. ...@@ -146,7 +146,7 @@ Puede limpiar un Select con un icono.
```html ```html
<template> <template>
<el-select v-model="value4" clearable placeholder="Select"> <el-select v-model="value" clearable placeholder="Select">
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.value"
...@@ -176,7 +176,7 @@ Puede limpiar un Select con un icono. ...@@ -176,7 +176,7 @@ Puede limpiar un Select con un icono.
value: 'Option5', value: 'Option5',
label: 'Option5' label: 'Option5'
}], }],
value4: '' value: ''
} }
} }
} }
...@@ -236,7 +236,8 @@ Selección multiple utiliza tags para mostrar las opciones seleccionadas. ...@@ -236,7 +236,8 @@ Selección multiple utiliza tags para mostrar las opciones seleccionadas.
value: 'Option5', value: 'Option5',
label: 'Option5' label: 'Option5'
}], }],
value5: [] value5: [],
value11: []
} }
} }
} }
...@@ -252,7 +253,7 @@ Puede personalizar templates HTML para las opciones. ...@@ -252,7 +253,7 @@ Puede personalizar templates HTML para las opciones.
```html ```html
<template> <template>
<el-select v-model="value6" placeholder="Select"> <el-select v-model="value" placeholder="Select">
<el-option <el-option
v-for="item in cities" v-for="item in cities"
:key="item.value" :key="item.value"
...@@ -287,7 +288,7 @@ Puede personalizar templates HTML para las opciones. ...@@ -287,7 +288,7 @@ Puede personalizar templates HTML para las opciones.
value: 'Guangzhou', value: 'Guangzhou',
label: 'Guangzhou' label: 'Guangzhou'
}], }],
value6: '' value: ''
} }
} }
} }
...@@ -303,9 +304,9 @@ Mostrar opciones en grupos. ...@@ -303,9 +304,9 @@ Mostrar opciones en grupos.
```html ```html
<template> <template>
<el-select v-model="value7" placeholder="Select"> <el-select v-model="value" placeholder="Select">
<el-option-group <el-option-group
v-for="group in options3" v-for="group in options"
:key="group.label" :key="group.label"
:label="group.label"> :label="group.label">
<el-option <el-option
...@@ -322,7 +323,7 @@ Mostrar opciones en grupos. ...@@ -322,7 +323,7 @@ Mostrar opciones en grupos.
export default { export default {
data() { data() {
return { return {
options3: [{ options: [{
label: 'Popular cities', label: 'Popular cities',
options: [{ options: [{
value: 'Shanghai', value: 'Shanghai',
...@@ -347,7 +348,7 @@ Mostrar opciones en grupos. ...@@ -347,7 +348,7 @@ Mostrar opciones en grupos.
label: 'Dalian' label: 'Dalian'
}] }]
}], }],
value7: '' value: ''
} }
} }
} }
...@@ -363,7 +364,7 @@ Puede filtrar opciones como lo desee. ...@@ -363,7 +364,7 @@ Puede filtrar opciones como lo desee.
```html ```html
<template> <template>
<el-select v-model="value8" filterable placeholder="Select"> <el-select v-model="value" filterable placeholder="Select">
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.value"
...@@ -393,7 +394,7 @@ Puede filtrar opciones como lo desee. ...@@ -393,7 +394,7 @@ Puede filtrar opciones como lo desee.
value: 'Option5', value: 'Option5',
label: 'Option5' label: 'Option5'
}], }],
value8: '' value: ''
} }
} }
} }
...@@ -410,7 +411,7 @@ Introduzca palabras y datos para buscar desde el servidor. ...@@ -410,7 +411,7 @@ Introduzca palabras y datos para buscar desde el servidor.
```html ```html
<template> <template>
<el-select <el-select
v-model="value9" v-model="value"
multiple multiple
filterable filterable
remote remote
...@@ -419,7 +420,7 @@ Introduzca palabras y datos para buscar desde el servidor. ...@@ -419,7 +420,7 @@ Introduzca palabras y datos para buscar desde el servidor.
:remote-method="remoteMethod" :remote-method="remoteMethod"
:loading="loading"> :loading="loading">
<el-option <el-option
v-for="item in options4" v-for="item in options"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value">
...@@ -431,8 +432,8 @@ Introduzca palabras y datos para buscar desde el servidor. ...@@ -431,8 +432,8 @@ Introduzca palabras y datos para buscar desde el servidor.
export default { export default {
data() { data() {
return { return {
options4: [], options: [],
value9: [], value: [],
list: [], list: [],
loading: false, loading: false,
states: ["Alabama", "Alaska", "Arizona", states: ["Alabama", "Alaska", "Arizona",
...@@ -465,13 +466,13 @@ Introduzca palabras y datos para buscar desde el servidor. ...@@ -465,13 +466,13 @@ Introduzca palabras y datos para buscar desde el servidor.
this.loading = true; this.loading = true;
setTimeout(() => { setTimeout(() => {
this.loading = false; this.loading = false;
this.options4 = this.list.filter(item => { this.options = this.list.filter(item => {
return item.label.toLowerCase() return item.label.toLowerCase()
.indexOf(query.toLowerCase()) > -1; .indexOf(query.toLowerCase()) > -1;
}); });
}, 200); }, 200);
} else { } else {
this.options4 = []; this.options = [];
} }
} }
} }
...@@ -488,13 +489,13 @@ Crear y seleccionar nuevos items que no están incluidas en las opciones de sele ...@@ -488,13 +489,13 @@ Crear y seleccionar nuevos items que no están incluidas en las opciones de sele
```html ```html
<template> <template>
<el-select <el-select
v-model="value10" v-model="value"
multiple multiple
filterable filterable
allow-create allow-create
placeholder="Choose tags for your article"> placeholder="Choose tags for your article">
<el-option <el-option
v-for="item in options5" v-for="item in options"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value">
...@@ -506,7 +507,7 @@ Crear y seleccionar nuevos items que no están incluidas en las opciones de sele ...@@ -506,7 +507,7 @@ Crear y seleccionar nuevos items que no están incluidas en las opciones de sele
export default { export default {
data() { data() {
return { return {
options5: [{ options: [{
value: 'HTML', value: 'HTML',
label: 'HTML' label: 'HTML'
}, { }, {
...@@ -516,7 +517,7 @@ Crear y seleccionar nuevos items que no están incluidas en las opciones de sele ...@@ -516,7 +517,7 @@ Crear y seleccionar nuevos items que no están incluidas en las opciones de sele
value: 'JavaScript', value: 'JavaScript',
label: 'JavaScript' label: 'JavaScript'
}], }],
value10: [] value: []
} }
} }
} }
......
...@@ -70,7 +70,7 @@ Vous pouvez personnaliser le texte, le spinner et la couleur de fond. ...@@ -70,7 +70,7 @@ Vous pouvez personnaliser le texte, le spinner et la couleur de fond.
```html ```html
<template> <template>
<el-table <el-table
v-loading="loading2" v-loading="loading"
element-loading-text="Loading..." element-loading-text="Loading..."
element-loading-spinner="el-icon-loading" element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)" element-loading-background="rgba(0, 0, 0, 0.8)"
...@@ -110,7 +110,7 @@ Vous pouvez personnaliser le texte, le spinner et la couleur de fond. ...@@ -110,7 +110,7 @@ Vous pouvez personnaliser le texte, le spinner et la couleur de fond.
name: 'John Smith', name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District' address: 'No.1518, Jinshajiang Road, Putuo District'
}], }],
loading2: true loading: true
}; };
} }
}; };
...@@ -134,7 +134,7 @@ Affichez une animation en plein écran quand vous charger des données. ...@@ -134,7 +134,7 @@ Affichez une animation en plein écran quand vous charger des données.
</el-button> </el-button>
<el-button <el-button
type="primary" type="primary"
@click="openFullScreen2"> @click="openFullScreen">
Comme service Comme service
</el-button> </el-button>
</template> </template>
...@@ -153,7 +153,7 @@ Affichez une animation en plein écran quand vous charger des données. ...@@ -153,7 +153,7 @@ Affichez une animation en plein écran quand vous charger des données.
this.fullscreenLoading = false; this.fullscreenLoading = false;
}, 2000); }, 2000);
}, },
openFullScreen2() { openFullScreen() {
const loading = this.$loading({ const loading = this.$loading({
lock: true, lock: true,
text: 'Loading', text: 'Loading',
......
...@@ -45,13 +45,13 @@ Confirm est utilisé pour demander une confirmation à l'utilisateur. ...@@ -45,13 +45,13 @@ Confirm est utilisé pour demander une confirmation à l'utilisateur.
```html ```html
<template> <template>
<el-button type="text" @click="open2">Cliquez pour ouvrir la MessageBox</el-button> <el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open2() { open() {
this.$confirm('Ceci effacera le fichier. Continuer?', 'Warning', { this.$confirm('Ceci effacera le fichier. Continuer?', 'Warning', {
confirmButtonText: 'OK', confirmButtonText: 'OK',
cancelButtonText: 'Annuler', cancelButtonText: 'Annuler',
...@@ -83,13 +83,13 @@ Prompt est utilisé lorsqu'un utilisateur. ...@@ -83,13 +83,13 @@ Prompt est utilisé lorsqu'un utilisateur.
```html ```html
<template> <template>
<el-button type="text" @click="open3">Cliquez pour ouvrir la MessageBox</el-button> <el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open3() { open() {
this.$prompt('Entrez votre e-mail', 'Astuce', { this.$prompt('Entrez votre e-mail', 'Astuce', {
confirmButtonText: 'OK', confirmButtonText: 'OK',
cancelButtonText: 'Annuler', cancelButtonText: 'Annuler',
...@@ -121,13 +121,13 @@ Il est possible d'afficher du contenu un peu plus varié et personnalisé. ...@@ -121,13 +121,13 @@ Il est possible d'afficher du contenu un peu plus varié et personnalisé.
```html ```html
<template> <template>
<el-button type="text" @click="open4">Cliquez pour ouvrir la MessageBox</el-button> <el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open4() { open() {
const h = this.$createElement; const h = this.$createElement;
this.$msgbox({ this.$msgbox({
title: 'Message', title: 'Message',
...@@ -177,13 +177,13 @@ Le contenu de MessageBox peut être `VNode`, Vous permettant de passer des compo ...@@ -177,13 +177,13 @@ Le contenu de MessageBox peut être `VNode`, Vous permettant de passer des compo
```html ```html
<template> <template>
<el-button type="text" @click="open5">Cliquez pour ouvrir la MessageBox</el-button> <el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open5() { open() {
this.$alert('<strong>Ceci est du <i>HTML</i></strong>', 'HTML', { this.$alert('<strong>Ceci est du <i>HTML</i></strong>', 'HTML', {
dangerouslyUseHTMLString: true dangerouslyUseHTMLString: true
}); });
...@@ -206,13 +206,13 @@ Dans certains cas, les boutons fermer et annuler peuvent avoir des sens différe ...@@ -206,13 +206,13 @@ Dans certains cas, les boutons fermer et annuler peuvent avoir des sens différe
```html ```html
<template> <template>
<el-button type="text" @click="open6">Cliquez pour ouvrir la MessageBox</el-button> <el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open6() { open() {
this.$confirm('Vous avez du travail non-enregistré, enregistrer et quitter?', 'Confirm', { this.$confirm('Vous avez du travail non-enregistré, enregistrer et quitter?', 'Confirm', {
distinguishCancelAndClose: true, distinguishCancelAndClose: true,
confirmButtonText: 'Enregistrer', confirmButtonText: 'Enregistrer',
...@@ -247,13 +247,13 @@ le contenu de MessageBox peut être centré. ...@@ -247,13 +247,13 @@ le contenu de MessageBox peut être centré.
```html ```html
<template> <template>
<el-button type="text" @click="open7">Cliquez pour ouvrir la MessageBox</el-button> <el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open7() { open() {
this.$confirm('Ceci effacera le fichier, continuer?' , 'Warning', { this.$confirm('Ceci effacera le fichier, continuer?' , 'Warning', {
confirmButtonText: 'OK', confirmButtonText: 'OK',
cancelButtonText: 'Annuler', cancelButtonText: 'Annuler',
......
...@@ -32,15 +32,15 @@ L'attribut `disabled` désactive le radio. ...@@ -32,15 +32,15 @@ L'attribut `disabled` désactive le radio.
:::demo Ajoutez simplement l'attribut `disabled` au radio. :::demo Ajoutez simplement l'attribut `disabled` au radio.
```html ```html
<template> <template>
<el-radio disabled v-model="radio1" label="disabled">Option A</el-radio> <el-radio disabled v-model="radio" label="disabled">Option A</el-radio>
<el-radio disabled v-model="radio1" label="selected and disabled">Option B</el-radio> <el-radio disabled v-model="radio" label="selected and disabled">Option B</el-radio>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
radio1: 'selected and disabled' radio: 'selected and disabled'
}; };
} }
} }
...@@ -55,7 +55,7 @@ Utile pour choisir entre plusieurs groupes d'options mutuellement exclusives. ...@@ -55,7 +55,7 @@ Utile pour choisir entre plusieurs groupes d'options mutuellement exclusives.
:::demo Combinez `el-radio-group` avec `el-radio` pour afficher un groupe de radios. Liez une variable au `v-model` de `el-radio-group` et configurez le label dans `el-radio`. Cet élément fournit aussi l'évènement `change` qui a en paramètre la valeur courante. :::demo Combinez `el-radio-group` avec `el-radio` pour afficher un groupe de radios. Liez une variable au `v-model` de `el-radio-group` et configurez le label dans `el-radio`. Cet élément fournit aussi l'évènement `change` qui a en paramètre la valeur courante.
```html ```html
<el-radio-group v-model="radio2"> <el-radio-group v-model="radio">
<el-radio :label="3">Option A</el-radio> <el-radio :label="3">Option A</el-radio>
<el-radio :label="6">Option B</el-radio> <el-radio :label="6">Option B</el-radio>
<el-radio :label="9">Option C</el-radio> <el-radio :label="9">Option C</el-radio>
...@@ -65,7 +65,7 @@ Utile pour choisir entre plusieurs groupes d'options mutuellement exclusives. ...@@ -65,7 +65,7 @@ Utile pour choisir entre plusieurs groupes d'options mutuellement exclusives.
export default { export default {
data () { data () {
return { return {
radio2: 3 radio: 3
}; };
} }
} }
...@@ -81,7 +81,7 @@ Des radios affichés comme des boutons standards. ...@@ -81,7 +81,7 @@ Des radios affichés comme des boutons standards.
```html ```html
<template> <template>
<div> <div>
<el-radio-group v-model="radio3"> <el-radio-group v-model="radio1">
<el-radio-button label="New York"></el-radio-button> <el-radio-button label="New York"></el-radio-button>
<el-radio-button label="Washington"></el-radio-button> <el-radio-button label="Washington"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button> <el-radio-button label="Los Angeles"></el-radio-button>
...@@ -89,7 +89,7 @@ Des radios affichés comme des boutons standards. ...@@ -89,7 +89,7 @@ Des radios affichés comme des boutons standards.
</el-radio-group> </el-radio-group>
</div> </div>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<el-radio-group v-model="radio4" size="medium"> <el-radio-group v-model="radio2" size="medium">
<el-radio-button label="New York" ></el-radio-button> <el-radio-button label="New York" ></el-radio-button>
<el-radio-button label="Washington"></el-radio-button> <el-radio-button label="Washington"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button> <el-radio-button label="Los Angeles"></el-radio-button>
...@@ -97,7 +97,7 @@ Des radios affichés comme des boutons standards. ...@@ -97,7 +97,7 @@ Des radios affichés comme des boutons standards.
</el-radio-group> </el-radio-group>
</div> </div>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<el-radio-group v-model="radio5" size="small"> <el-radio-group v-model="radio3" size="small">
<el-radio-button label="New York"></el-radio-button> <el-radio-button label="New York"></el-radio-button>
<el-radio-button label="Washington" disabled ></el-radio-button> <el-radio-button label="Washington" disabled ></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button> <el-radio-button label="Los Angeles"></el-radio-button>
...@@ -105,7 +105,7 @@ Des radios affichés comme des boutons standards. ...@@ -105,7 +105,7 @@ Des radios affichés comme des boutons standards.
</el-radio-group> </el-radio-group>
</div> </div>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<el-radio-group v-model="radio6" disabled size="mini"> <el-radio-group v-model="radio4" disabled size="mini">
<el-radio-button label="New York"></el-radio-button> <el-radio-button label="New York"></el-radio-button>
<el-radio-button label="Washington"></el-radio-button> <el-radio-button label="Washington"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button> <el-radio-button label="Los Angeles"></el-radio-button>
...@@ -118,10 +118,10 @@ Des radios affichés comme des boutons standards. ...@@ -118,10 +118,10 @@ Des radios affichés comme des boutons standards.
export default { export default {
data () { data () {
return { return {
radio1: 'New York',
radio2: 'New York',
radio3: 'New York', radio3: 'New York',
radio4: 'New York', radio4: 'New York'
radio5: 'New York',
radio6: 'New York'
}; };
} }
} }
...@@ -135,21 +135,21 @@ Des radios affichés comme des boutons standards. ...@@ -135,21 +135,21 @@ Des radios affichés comme des boutons standards.
```html ```html
<template> <template>
<div> <div>
<el-radio v-model="radio7" label="1" border>Option A</el-radio> <el-radio v-model="radio1" label="1" border>Option A</el-radio>
<el-radio v-model="radio7" label="2" border>Option B</el-radio> <el-radio v-model="radio1" label="2" border>Option B</el-radio>
</div> </div>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<el-radio v-model="radio8" label="1" border size="medium">Option A</el-radio> <el-radio v-model="radio2" label="1" border size="medium">Option A</el-radio>
<el-radio v-model="radio8" label="2" border size="medium">Option B</el-radio> <el-radio v-model="radio2" label="2" border size="medium">Option B</el-radio>
</div> </div>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<el-radio-group v-model="radio9" size="small"> <el-radio-group v-model="radio3" size="small">
<el-radio label="1" border>Option A</el-radio> <el-radio label="1" border>Option A</el-radio>
<el-radio label="2" border disabled>Option B</el-radio> <el-radio label="2" border disabled>Option B</el-radio>
</el-radio-group> </el-radio-group>
</div> </div>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<el-radio-group v-model="radio10" size="mini" disabled> <el-radio-group v-model="radio4" size="mini" disabled>
<el-radio label="1" border>Option A</el-radio> <el-radio label="1" border>Option A</el-radio>
<el-radio label="2" border>Option B</el-radio> <el-radio label="2" border>Option B</el-radio>
</el-radio-group> </el-radio-group>
...@@ -160,10 +160,10 @@ Des radios affichés comme des boutons standards. ...@@ -160,10 +160,10 @@ Des radios affichés comme des boutons standards.
export default { export default {
data () { data () {
return { return {
radio7: '1', radio1: '1',
radio8: '1', radio2: '1',
radio9: '1', radio3: '1',
radio10: '1' radio4: '1'
}; };
} }
} }
......
...@@ -40,7 +40,7 @@ Vous pouvez ajouter du texte à chaque score. ...@@ -40,7 +40,7 @@ Vous pouvez ajouter du texte à chaque score.
```html ```html
<el-rate <el-rate
v-model="value3" v-model="value"
:texts="['oops', 'disappointed', 'normal', 'good', 'great']" :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
show-text> show-text>
</el-rate> </el-rate>
...@@ -49,7 +49,7 @@ Vous pouvez ajouter du texte à chaque score. ...@@ -49,7 +49,7 @@ Vous pouvez ajouter du texte à chaque score.
export default { export default {
data() { data() {
return { return {
value3: null value: null
} }
} }
} }
...@@ -65,7 +65,7 @@ Vous pouvez utiliser différentes icônes pour chaque ...@@ -65,7 +65,7 @@ Vous pouvez utiliser différentes icônes pour chaque
```html ```html
<el-rate <el-rate
v-model="value4" v-model="value"
:icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']" :icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
void-icon-class="icon-rate-face-off" void-icon-class="icon-rate-face-off"
:colors="['#99A9BF', '#F7BA2A', '#FF9900']"> :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
...@@ -75,7 +75,7 @@ Vous pouvez utiliser différentes icônes pour chaque ...@@ -75,7 +75,7 @@ Vous pouvez utiliser différentes icônes pour chaque
export default { export default {
data() { data() {
return { return {
value4: null value: null
} }
} }
} }
...@@ -91,7 +91,7 @@ Le score peut être en lecture seule. Les demi-étoiles sont supportées. ...@@ -91,7 +91,7 @@ Le score peut être en lecture seule. Les demi-étoiles sont supportées.
```html ```html
<el-rate <el-rate
v-model="value5" v-model="value"
disabled disabled
show-score show-score
text-color="#ff9900" text-color="#ff9900"
...@@ -102,7 +102,7 @@ Le score peut être en lecture seule. Les demi-étoiles sont supportées. ...@@ -102,7 +102,7 @@ Le score peut être en lecture seule. Les demi-étoiles sont supportées.
export default { export default {
data() { data() {
return { return {
value5: 3.7 value: 3.7
} }
} }
} }
......
...@@ -52,9 +52,9 @@ Utile lorsqu'il faut sélectionner des options parmi un large choix, affiché gr ...@@ -52,9 +52,9 @@ Utile lorsqu'il faut sélectionner des options parmi un large choix, affiché gr
```html ```html
<template> <template>
<el-select v-model="value2" placeholder="Select"> <el-select v-model="value" placeholder="Select">
<el-option <el-option
v-for="item in options2" v-for="item in options"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value"
...@@ -67,7 +67,7 @@ Utile lorsqu'il faut sélectionner des options parmi un large choix, affiché gr ...@@ -67,7 +67,7 @@ Utile lorsqu'il faut sélectionner des options parmi un large choix, affiché gr
export default { export default {
data() { data() {
return { return {
options2: [{ options: [{
value: 'Option1', value: 'Option1',
label: 'Option1' label: 'Option1'
}, { }, {
...@@ -84,7 +84,7 @@ Utile lorsqu'il faut sélectionner des options parmi un large choix, affiché gr ...@@ -84,7 +84,7 @@ Utile lorsqu'il faut sélectionner des options parmi un large choix, affiché gr
value: 'Option5', value: 'Option5',
label: 'Option5' label: 'Option5'
}], }],
value2: '' value: ''
} }
} }
} }
...@@ -99,7 +99,7 @@ Vous pouvez désactiver le composant lui-même. ...@@ -99,7 +99,7 @@ Vous pouvez désactiver le composant lui-même.
:::demo Ajoutez `disabled` à `el-select` pour le désactiver. :::demo Ajoutez `disabled` à `el-select` pour le désactiver.
```html ```html
<template> <template>
<el-select v-model="value3" disabled placeholder="Select"> <el-select v-model="value" disabled placeholder="Select">
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.value"
...@@ -129,7 +129,7 @@ Vous pouvez désactiver le composant lui-même. ...@@ -129,7 +129,7 @@ Vous pouvez désactiver le composant lui-même.
value: 'Option5', value: 'Option5',
label: 'Option5' label: 'Option5'
}], }],
value3: '' value: ''
} }
} }
} }
...@@ -144,7 +144,7 @@ Vous pouvez ajouter un bouton pour effacer la sélection. ...@@ -144,7 +144,7 @@ Vous pouvez ajouter un bouton pour effacer la sélection.
:::demo Ajoutez l'attribut `clearable` à `el-select` et l'icône de fermeture s'affichera après une sélection. Notez que `clearable` ne marche qu'avec les sélecteurs à choix unique. :::demo Ajoutez l'attribut `clearable` à `el-select` et l'icône de fermeture s'affichera après une sélection. Notez que `clearable` ne marche qu'avec les sélecteurs à choix unique.
```html ```html
<template> <template>
<el-select v-model="value4" clearable placeholder="Select"> <el-select v-model="value" clearable placeholder="Select">
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.value"
...@@ -174,7 +174,7 @@ Vous pouvez ajouter un bouton pour effacer la sélection. ...@@ -174,7 +174,7 @@ Vous pouvez ajouter un bouton pour effacer la sélection.
value: 'Option5', value: 'Option5',
label: 'Option5' label: 'Option5'
}], }],
value4: '' value: ''
} }
} }
} }
...@@ -250,7 +250,7 @@ Vous pouvez définir un template HTML pour l'affichage des options. ...@@ -250,7 +250,7 @@ Vous pouvez définir un template HTML pour l'affichage des options.
```html ```html
<template> <template>
<el-select v-model="value6" placeholder="Select"> <el-select v-model="value" placeholder="Select">
<el-option <el-option
v-for="item in cities" v-for="item in cities"
:key="item.value" :key="item.value"
...@@ -285,7 +285,7 @@ Vous pouvez définir un template HTML pour l'affichage des options. ...@@ -285,7 +285,7 @@ Vous pouvez définir un template HTML pour l'affichage des options.
value: 'Guangzhou', value: 'Guangzhou',
label: 'Guangzhou' label: 'Guangzhou'
}], }],
value6: '' value: ''
} }
} }
} }
...@@ -301,9 +301,9 @@ Vous pouvez définir des groupes pour les options du menu. ...@@ -301,9 +301,9 @@ Vous pouvez définir des groupes pour les options du menu.
```html ```html
<template> <template>
<el-select v-model="value7" placeholder="Select"> <el-select v-model="value" placeholder="Select">
<el-option-group <el-option-group
v-for="group in options3" v-for="group in options"
:key="group.label" :key="group.label"
:label="group.label"> :label="group.label">
<el-option <el-option
...@@ -320,7 +320,7 @@ Vous pouvez définir des groupes pour les options du menu. ...@@ -320,7 +320,7 @@ Vous pouvez définir des groupes pour les options du menu.
export default { export default {
data() { data() {
return { return {
options3: [{ options: [{
label: 'Villes célèbres', label: 'Villes célèbres',
options: [{ options: [{
value: 'Shanghai', value: 'Shanghai',
...@@ -345,7 +345,7 @@ Vous pouvez définir des groupes pour les options du menu. ...@@ -345,7 +345,7 @@ Vous pouvez définir des groupes pour les options du menu.
label: 'Dalian' label: 'Dalian'
}] }]
}], }],
value7: '' value: ''
} }
} }
} }
...@@ -360,7 +360,7 @@ Vous pouvez ajouter un mode de filtrage pour trouver les options désirées plus ...@@ -360,7 +360,7 @@ Vous pouvez ajouter un mode de filtrage pour trouver les options désirées plus
:::demo Ajoutez `filterable` à `el-select` pour activer le filtrage. Par défaut, Select cherchera les options dont le `label` contient la valeur du filtre. Si vous préférez une autre stratégie de filtrage, utilisez `filter-method`. C'est une `Function` qui est appelée quand la valeur change, avec pour paramètre la valeur courante. :::demo Ajoutez `filterable` à `el-select` pour activer le filtrage. Par défaut, Select cherchera les options dont le `label` contient la valeur du filtre. Si vous préférez une autre stratégie de filtrage, utilisez `filter-method`. C'est une `Function` qui est appelée quand la valeur change, avec pour paramètre la valeur courante.
```html ```html
<template> <template>
<el-select v-model="value8" filterable placeholder="Select"> <el-select v-model="value" filterable placeholder="Select">
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.value"
...@@ -390,7 +390,7 @@ Vous pouvez ajouter un mode de filtrage pour trouver les options désirées plus ...@@ -390,7 +390,7 @@ Vous pouvez ajouter un mode de filtrage pour trouver les options désirées plus
value: 'Option5', value: 'Option5',
label: 'Option5' label: 'Option5'
}], }],
value8: '' value: ''
} }
} }
} }
...@@ -407,7 +407,7 @@ Vous pouvez aller chercher les options sur le serveur de manière dynamique. ...@@ -407,7 +407,7 @@ Vous pouvez aller chercher les options sur le serveur de manière dynamique.
```html ```html
<template> <template>
<el-select <el-select
v-model="value9" v-model="value"
multiple multiple
filterable filterable
remote remote
...@@ -416,7 +416,7 @@ Vous pouvez aller chercher les options sur le serveur de manière dynamique. ...@@ -416,7 +416,7 @@ Vous pouvez aller chercher les options sur le serveur de manière dynamique.
:remote-method="remoteMethod" :remote-method="remoteMethod"
:loading="loading"> :loading="loading">
<el-option <el-option
v-for="item in options4" v-for="item in options"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value">
...@@ -428,8 +428,8 @@ Vous pouvez aller chercher les options sur le serveur de manière dynamique. ...@@ -428,8 +428,8 @@ Vous pouvez aller chercher les options sur le serveur de manière dynamique.
export default { export default {
data() { data() {
return { return {
options4: [], options: [],
value9: [], value: [],
list: [], list: [],
loading: false, loading: false,
states: ["Alabama", "Alaska", "Arizona", states: ["Alabama", "Alaska", "Arizona",
...@@ -462,13 +462,13 @@ Vous pouvez aller chercher les options sur le serveur de manière dynamique. ...@@ -462,13 +462,13 @@ Vous pouvez aller chercher les options sur le serveur de manière dynamique.
this.loading = true; this.loading = true;
setTimeout(() => { setTimeout(() => {
this.loading = false; this.loading = false;
this.options4 = this.list.filter(item => { this.options = this.list.filter(item => {
return item.label.toLowerCase() return item.label.toLowerCase()
.indexOf(query.toLowerCase()) > -1; .indexOf(query.toLowerCase()) > -1;
}); });
}, 200); }, 200);
} else { } else {
this.options4 = []; this.options = [];
} }
} }
} }
...@@ -485,14 +485,14 @@ Vous pouvez entrer des choix dans le champ de sélection qui ne sont pas incluse ...@@ -485,14 +485,14 @@ Vous pouvez entrer des choix dans le champ de sélection qui ne sont pas incluse
```html ```html
<template> <template>
<el-select <el-select
v-model="value10" v-model="value"
multiple multiple
filterable filterable
allow-create allow-create
default-first-option default-first-option
placeholder="Choisissez les tags de vos articles"> placeholder="Choisissez les tags de vos articles">
<el-option <el-option
v-for="item in options5" v-for="item in options"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value">
...@@ -504,7 +504,7 @@ Vous pouvez entrer des choix dans le champ de sélection qui ne sont pas incluse ...@@ -504,7 +504,7 @@ Vous pouvez entrer des choix dans le champ de sélection qui ne sont pas incluse
export default { export default {
data() { data() {
return { return {
options5: [{ options: [{
value: 'HTML', value: 'HTML',
label: 'HTML' label: 'HTML'
}, { }, {
...@@ -514,7 +514,7 @@ Vous pouvez entrer des choix dans le champ de sélection qui ne sont pas incluse ...@@ -514,7 +514,7 @@ Vous pouvez entrer des choix dans le champ de sélection qui ne sont pas incluse
value: 'JavaScript', value: 'JavaScript',
label: 'JavaScript' label: 'JavaScript'
}], }],
value10: [] value: []
} }
} }
} }
......
...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
```html ```html
<template> <template>
<el-table <el-table
v-loading="loading2" v-loading="loading"
element-loading-text="拼命加载中" element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading" element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)" element-loading-background="rgba(0, 0, 0, 0.8)"
...@@ -109,7 +109,7 @@ ...@@ -109,7 +109,7 @@
name: '王小虎', name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄' address: '上海市普陀区金沙江路 1518 弄'
}], }],
loading2: true loading: true
}; };
} }
}; };
...@@ -133,7 +133,7 @@ ...@@ -133,7 +133,7 @@
</el-button> </el-button>
<el-button <el-button
type="primary" type="primary"
@click="openFullScreen2"> @click="openFullScreen">
服务方式 服务方式
</el-button> </el-button>
</template> </template>
...@@ -152,7 +152,7 @@ ...@@ -152,7 +152,7 @@
this.fullscreenLoading = false; this.fullscreenLoading = false;
}, 2000); }, 2000);
}, },
openFullScreen2() { openFullScreen() {
const loading = this.$loading({ const loading = this.$loading({
lock: true, lock: true,
text: 'Loading', text: 'Loading',
......
...@@ -43,13 +43,13 @@ ...@@ -43,13 +43,13 @@
```html ```html
<template> <template>
<el-button type="text" @click="open2">点击打开 Message Box</el-button> <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open2() { open() {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
...@@ -80,13 +80,13 @@ ...@@ -80,13 +80,13 @@
```html ```html
<template> <template>
<el-button type="text" @click="open3">点击打开 Message Box</el-button> <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open3() { open() {
this.$prompt('请输入邮箱', '提示', { this.$prompt('请输入邮箱', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
...@@ -118,13 +118,13 @@ ...@@ -118,13 +118,13 @@
```html ```html
<template> <template>
<el-button type="text" @click="open4">点击打开 Message Box</el-button> <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open4() { open() {
const h = this.$createElement; const h = this.$createElement;
this.$msgbox({ this.$msgbox({
title: '消息', title: '消息',
...@@ -174,13 +174,13 @@ ...@@ -174,13 +174,13 @@
```html ```html
<template> <template>
<el-button type="text" @click="open5">点击打开 Message Box</el-button> <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open5() { open() {
this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', { this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {
dangerouslyUseHTMLString: true dangerouslyUseHTMLString: true
}); });
...@@ -203,13 +203,13 @@ ...@@ -203,13 +203,13 @@
```html ```html
<template> <template>
<el-button type="text" @click="open6">点击打开 Message Box</el-button> <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open6() { open() {
this.$confirm('检测到未保存的内容,是否在离开页面前保存修改?', '确认信息', { this.$confirm('检测到未保存的内容,是否在离开页面前保存修改?', '确认信息', {
distinguishCancelAndClose: true, distinguishCancelAndClose: true,
confirmButtonText: '保存', confirmButtonText: '保存',
...@@ -243,13 +243,13 @@ ...@@ -243,13 +243,13 @@
```html ```html
<template> <template>
<el-button type="text" @click="open7">点击打开 Message Box</el-button> <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open7() { open() {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
......
...@@ -33,15 +33,15 @@ ...@@ -33,15 +33,15 @@
:::demo 只要在`el-radio`元素中设置`disabled`属性即可,它接受一个`Boolean``true`为禁用。 :::demo 只要在`el-radio`元素中设置`disabled`属性即可,它接受一个`Boolean``true`为禁用。
```html ```html
<template> <template>
<el-radio disabled v-model="radio1" label="禁用">备选项</el-radio> <el-radio disabled v-model="radio" label="禁用">备选项</el-radio>
<el-radio disabled v-model="radio1" label="选中且禁用">备选项</el-radio> <el-radio disabled v-model="radio" label="选中且禁用">备选项</el-radio>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
radio1: '选中且禁用' radio: '选中且禁用'
}; };
} }
} }
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
```html ```html
<template> <template>
<el-radio-group v-model="radio2"> <el-radio-group v-model="radio">
<el-radio :label="3">备选项</el-radio> <el-radio :label="3">备选项</el-radio>
<el-radio :label="6">备选项</el-radio> <el-radio :label="6">备选项</el-radio>
<el-radio :label="9">备选项</el-radio> <el-radio :label="9">备选项</el-radio>
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
export default { export default {
data () { data () {
return { return {
radio2: 3 radio: 3
}; };
} }
} }
...@@ -84,7 +84,7 @@ ...@@ -84,7 +84,7 @@
```html ```html
<template> <template>
<div> <div>
<el-radio-group v-model="radio3"> <el-radio-group v-model="radio1">
<el-radio-button label="上海"></el-radio-button> <el-radio-button label="上海"></el-radio-button>
<el-radio-button label="北京"></el-radio-button> <el-radio-button label="北京"></el-radio-button>
<el-radio-button label="广州"></el-radio-button> <el-radio-button label="广州"></el-radio-button>
...@@ -92,7 +92,7 @@ ...@@ -92,7 +92,7 @@
</el-radio-group> </el-radio-group>
</div> </div>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<el-radio-group v-model="radio4" size="medium"> <el-radio-group v-model="radio2" size="medium">
<el-radio-button label="上海" ></el-radio-button> <el-radio-button label="上海" ></el-radio-button>
<el-radio-button label="北京"></el-radio-button> <el-radio-button label="北京"></el-radio-button>
<el-radio-button label="广州"></el-radio-button> <el-radio-button label="广州"></el-radio-button>
...@@ -100,7 +100,7 @@ ...@@ -100,7 +100,7 @@
</el-radio-group> </el-radio-group>
</div> </div>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<el-radio-group v-model="radio5" size="small"> <el-radio-group v-model="radio3" size="small">
<el-radio-button label="上海"></el-radio-button> <el-radio-button label="上海"></el-radio-button>
<el-radio-button label="北京" disabled ></el-radio-button> <el-radio-button label="北京" disabled ></el-radio-button>
<el-radio-button label="广州"></el-radio-button> <el-radio-button label="广州"></el-radio-button>
...@@ -108,7 +108,7 @@ ...@@ -108,7 +108,7 @@
</el-radio-group> </el-radio-group>
</div> </div>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<el-radio-group v-model="radio6" disabled size="mini"> <el-radio-group v-model="radio4" disabled size="mini">
<el-radio-button label="上海"></el-radio-button> <el-radio-button label="上海"></el-radio-button>
<el-radio-button label="北京"></el-radio-button> <el-radio-button label="北京"></el-radio-button>
<el-radio-button label="广州"></el-radio-button> <el-radio-button label="广州"></el-radio-button>
...@@ -121,10 +121,10 @@ ...@@ -121,10 +121,10 @@
export default { export default {
data () { data () {
return { return {
radio1: '上海',
radio2: '上海',
radio3: '上海', radio3: '上海',
radio4: '上海', radio4: '上海'
radio5: '上海',
radio6: '上海'
}; };
} }
} }
...@@ -138,21 +138,21 @@ ...@@ -138,21 +138,21 @@
```html ```html
<template> <template>
<div> <div>
<el-radio v-model="radio7" label="1" border>备选项1</el-radio> <el-radio v-model="radio1" label="1" border>备选项1</el-radio>
<el-radio v-model="radio7" label="2" border>备选项2</el-radio> <el-radio v-model="radio1" label="2" border>备选项2</el-radio>
</div> </div>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<el-radio v-model="radio8" label="1" border size="medium">备选项1</el-radio> <el-radio v-model="radio2" label="1" border size="medium">备选项1</el-radio>
<el-radio v-model="radio8" label="2" border size="medium">备选项2</el-radio> <el-radio v-model="radio2" label="2" border size="medium">备选项2</el-radio>
</div> </div>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<el-radio-group v-model="radio9" size="small"> <el-radio-group v-model="radio3" size="small">
<el-radio label="1" border>备选项1</el-radio> <el-radio label="1" border>备选项1</el-radio>
<el-radio label="2" border disabled>备选项2</el-radio> <el-radio label="2" border disabled>备选项2</el-radio>
</el-radio-group> </el-radio-group>
</div> </div>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<el-radio-group v-model="radio10" size="mini" disabled> <el-radio-group v-model="radio4" size="mini" disabled>
<el-radio label="1" border>备选项1</el-radio> <el-radio label="1" border>备选项1</el-radio>
<el-radio label="2" border>备选项2</el-radio> <el-radio label="2" border>备选项2</el-radio>
</el-radio-group> </el-radio-group>
...@@ -163,10 +163,10 @@ ...@@ -163,10 +163,10 @@
export default { export default {
data () { data () {
return { return {
radio7: '1', radio1: '1',
radio8: '1', radio2: '1',
radio9: '1', radio3: '1',
radio10: '1' radio4: '1'
}; };
} }
} }
......
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
:::demo 为组件设置 `show-text` 属性会在右侧显示辅助文字。通过设置 `texts` 可以为每一个分值指定对应的辅助文字。`texts` 为一个数组,长度应等于最大值 `max` :::demo 为组件设置 `show-text` 属性会在右侧显示辅助文字。通过设置 `texts` 可以为每一个分值指定对应的辅助文字。`texts` 为一个数组,长度应等于最大值 `max`
```html ```html
<el-rate <el-rate
v-model="value3" v-model="value"
show-text> show-text>
</el-rate> </el-rate>
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
export default { export default {
data() { data() {
return { return {
value3: null value: null
} }
} }
} }
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
:::demo 设置`icon-classes`属性可以自定义对应 3 个不同分段的图标。本例还使用`void-icon-class`指定了未选中时的图标类名。 :::demo 设置`icon-classes`属性可以自定义对应 3 个不同分段的图标。本例还使用`void-icon-class`指定了未选中时的图标类名。
```html ```html
<el-rate <el-rate
v-model="value4" v-model="value"
:icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']" :icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
void-icon-class="icon-rate-face-off" void-icon-class="icon-rate-face-off"
:colors="['#99A9BF', '#F7BA2A', '#FF9900']"> :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
export default { export default {
data() { data() {
return { return {
value4: null value: null
} }
} }
} }
...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,7 @@
:::demo 为组件设置 `disabled` 属性表示组件为只读,支持小数分值。此时若设置 `show-score`,则会在右侧显示目前的分值。可以提供 `score-template` 作为显示模板,模板为一个包含了 `{value}` 的字符串,`{value}` 会被解析为分值。 :::demo 为组件设置 `disabled` 属性表示组件为只读,支持小数分值。此时若设置 `show-score`,则会在右侧显示目前的分值。可以提供 `score-template` 作为显示模板,模板为一个包含了 `{value}` 的字符串,`{value}` 会被解析为分值。
```html ```html
<el-rate <el-rate
v-model="value5" v-model="value"
disabled disabled
show-score show-score
text-color="#ff9900" text-color="#ff9900"
...@@ -97,7 +97,7 @@ ...@@ -97,7 +97,7 @@
export default { export default {
data() { data() {
return { return {
value5: 3.7 value: 3.7
} }
} }
} }
......
...@@ -51,9 +51,9 @@ ...@@ -51,9 +51,9 @@
:::demo 在`el-option`中,设定`disabled`值为 true,即可禁用该选项 :::demo 在`el-option`中,设定`disabled`值为 true,即可禁用该选项
```html ```html
<template> <template>
<el-select v-model="value2" placeholder="请选择"> <el-select v-model="value" placeholder="请选择">
<el-option <el-option
v-for="item in options2" v-for="item in options"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value"
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
export default { export default {
data() { data() {
return { return {
options2: [{ options: [{
value: '选项1', value: '选项1',
label: '黄金糕' label: '黄金糕'
}, { }, {
...@@ -83,7 +83,7 @@ ...@@ -83,7 +83,7 @@
value: '选项5', value: '选项5',
label: '北京烤鸭' label: '北京烤鸭'
}], }],
value2: '' value: ''
} }
} }
} }
...@@ -98,7 +98,7 @@ ...@@ -98,7 +98,7 @@
:::demo 为`el-select`设置`disabled`属性,则整个选择器不可用 :::demo 为`el-select`设置`disabled`属性,则整个选择器不可用
```html ```html
<template> <template>
<el-select v-model="value3" disabled placeholder="请选择"> <el-select v-model="value" disabled placeholder="请选择">
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.value"
...@@ -128,7 +128,7 @@ ...@@ -128,7 +128,7 @@
value: '选项5', value: '选项5',
label: '北京烤鸭' label: '北京烤鸭'
}], }],
value3: '' value: ''
} }
} }
} }
...@@ -143,7 +143,7 @@ ...@@ -143,7 +143,7 @@
:::demo 为`el-select`设置`clearable`属性,则可将选择器清空。需要注意的是,`clearable`属性仅适用于单选。 :::demo 为`el-select`设置`clearable`属性,则可将选择器清空。需要注意的是,`clearable`属性仅适用于单选。
```html ```html
<template> <template>
<el-select v-model="value4" clearable placeholder="请选择"> <el-select v-model="value" clearable placeholder="请选择">
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.value"
...@@ -173,7 +173,7 @@ ...@@ -173,7 +173,7 @@
value: '选项5', value: '选项5',
label: '北京烤鸭' label: '北京烤鸭'
}], }],
value4: '' value: ''
} }
} }
} }
...@@ -248,7 +248,7 @@ ...@@ -248,7 +248,7 @@
:::demo 将自定义的 HTML 模板插入`el-option`的 slot 中即可。 :::demo 将自定义的 HTML 模板插入`el-option`的 slot 中即可。
```html ```html
<template> <template>
<el-select v-model="value6" placeholder="请选择"> <el-select v-model="value" placeholder="请选择">
<el-option <el-option
v-for="item in cities" v-for="item in cities"
:key="item.value" :key="item.value"
...@@ -283,7 +283,7 @@ ...@@ -283,7 +283,7 @@
value: 'Guangzhou', value: 'Guangzhou',
label: '广州' label: '广州'
}], }],
value6: '' value: ''
} }
} }
} }
...@@ -298,9 +298,9 @@ ...@@ -298,9 +298,9 @@
:::demo 使用`el-option-group`对备选项进行分组,它的`label`属性为分组名 :::demo 使用`el-option-group`对备选项进行分组,它的`label`属性为分组名
```html ```html
<template> <template>
<el-select v-model="value7" placeholder="请选择"> <el-select v-model="value" placeholder="请选择">
<el-option-group <el-option-group
v-for="group in options3" v-for="group in options"
:key="group.label" :key="group.label"
:label="group.label"> :label="group.label">
<el-option <el-option
...@@ -317,7 +317,7 @@ ...@@ -317,7 +317,7 @@
export default { export default {
data() { data() {
return { return {
options3: [{ options: [{
label: '热门城市', label: '热门城市',
options: [{ options: [{
value: 'Shanghai', value: 'Shanghai',
...@@ -342,7 +342,7 @@ ...@@ -342,7 +342,7 @@
label: '大连' label: '大连'
}] }]
}], }],
value7: '' value: ''
} }
} }
} }
...@@ -357,7 +357,7 @@ ...@@ -357,7 +357,7 @@
:::demo 为`el-select`添加`filterable`属性即可启用搜索功能。默认情况下,Select 会找出所有`label`属性包含输入值的选项。如果希望使用其他的搜索逻辑,可以通过传入一个`filter-method`来实现。`filter-method`为一个`Function`,它会在输入值发生变化时调用,参数为当前输入值。 :::demo 为`el-select`添加`filterable`属性即可启用搜索功能。默认情况下,Select 会找出所有`label`属性包含输入值的选项。如果希望使用其他的搜索逻辑,可以通过传入一个`filter-method`来实现。`filter-method`为一个`Function`,它会在输入值发生变化时调用,参数为当前输入值。
```html ```html
<template> <template>
<el-select v-model="value8" filterable placeholder="请选择"> <el-select v-model="value" filterable placeholder="请选择">
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.value"
...@@ -387,7 +387,7 @@ ...@@ -387,7 +387,7 @@
value: '选项5', value: '选项5',
label: '北京烤鸭' label: '北京烤鸭'
}], }],
value8: '' value: ''
} }
} }
} }
...@@ -402,7 +402,7 @@ ...@@ -402,7 +402,7 @@
```html ```html
<template> <template>
<el-select <el-select
v-model="value9" v-model="value"
multiple multiple
filterable filterable
remote remote
...@@ -411,7 +411,7 @@ ...@@ -411,7 +411,7 @@
:remote-method="remoteMethod" :remote-method="remoteMethod"
:loading="loading"> :loading="loading">
<el-option <el-option
v-for="item in options4" v-for="item in options"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value">
...@@ -423,8 +423,8 @@ ...@@ -423,8 +423,8 @@
export default { export default {
data() { data() {
return { return {
options4: [], options: [],
value9: [], value: [],
list: [], list: [],
loading: false, loading: false,
states: ["Alabama", "Alaska", "Arizona", states: ["Alabama", "Alaska", "Arizona",
...@@ -457,13 +457,13 @@ ...@@ -457,13 +457,13 @@
this.loading = true; this.loading = true;
setTimeout(() => { setTimeout(() => {
this.loading = false; this.loading = false;
this.options4 = this.list.filter(item => { this.options = this.list.filter(item => {
return item.label.toLowerCase() return item.label.toLowerCase()
.indexOf(query.toLowerCase()) > -1; .indexOf(query.toLowerCase()) > -1;
}); });
}, 200); }, 200);
} else { } else {
this.options4 = []; this.options = [];
} }
} }
} }
...@@ -478,14 +478,14 @@ ...@@ -478,14 +478,14 @@
```html ```html
<template> <template>
<el-select <el-select
v-model="value10" v-model="value"
multiple multiple
filterable filterable
allow-create allow-create
default-first-option default-first-option
placeholder="请选择文章标签"> placeholder="请选择文章标签">
<el-option <el-option
v-for="item in options5" v-for="item in options"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value">
...@@ -497,7 +497,7 @@ ...@@ -497,7 +497,7 @@
export default { export default {
data() { data() {
return { return {
options5: [{ options: [{
value: 'HTML', value: 'HTML',
label: 'HTML' label: 'HTML'
}, { }, {
...@@ -507,7 +507,7 @@ ...@@ -507,7 +507,7 @@
value: 'JavaScript', value: 'JavaScript',
label: 'JavaScript' label: 'JavaScript'
}], }],
value10: [] value: []
} }
} }
} }
......
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