mirrors/element
1
0
Fork 0
mirror of https://github.com/ElemeFE/element.git synced 2025-12-16 11:44:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

Docs:rename variable name (#15003)

Browse Source
This commit is contained in:
刘鹏龙
2019-04-12 10:40:46 +08:00
committed by hetech
parent 88b628bd04
commit 87929cc996
20 changed files with 282 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -70,7 +70,7 @@ You can customize loading text, loading spinner and background color.
```html
<template>
<el-table
v-loading="loading2"
v-loading="loading"
element-loading-text="Loading..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
@@ -110,7 +110,7 @@ You can customize loading text, loading spinner and background color.
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District'
}],
loading2: true
loading: true
};
}
};
@@ -134,7 +134,7 @@ Show a full screen animation while loading data.
</el-button>
<el-button
type="primary"
@click="openFullScreen2">
@click="openFullScreen">
As a service
</el-button>
</template>
@@ -153,7 +153,7 @@ Show a full screen animation while loading data.
this.fullscreenLoading = false;
}, 2000);
},
openFullScreen2() {
openFullScreen() {
const loading = this.$loading({
lock: true,
text: 'Loading',

24
examples/docs/en-US/message-box.md
View File

@@ -44,13 +44,13 @@ Confirm is used to ask users' confirmation.
```html
<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>
<script>
export default {
methods: {
open2() {
open() {
this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
@@ -82,13 +82,13 @@ Prompt is used when user input is required.
```html
<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>
<script>
export default {
methods: {
open3() {
open() {
this.$prompt('Please input your e-mail', 'Tip', {
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
@@ -120,13 +120,13 @@ Can be customized to show various content.
```html
<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>
<script>
export default {
methods: {
open4() {
open() {
const h = this.$createElement;
this.$msgbox({
title: 'Message',
@@ -176,13 +176,13 @@ The content of MessageBox can be `VNode`, allowing us to pass custom components.
```html
<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>
<script>
export default {
methods: {
open5() {
open() {
this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {
dangerouslyUseHTMLString: true
});
@@ -205,13 +205,13 @@ In some cases, clicking the cancel button and close button may have different me
```html
<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>
<script>
export default {
methods: {
open6() {
open() {
this.$confirm('You have unsaved changes, save and proceed?', 'Confirm', {
distinguishCancelAndClose: true,
confirmButtonText: 'Save',
@@ -245,13 +245,13 @@ Content of MessageBox can be centered.
```html
<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>
<script>
export default {
methods: {
open7() {
open() {
this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',

44
examples/docs/en-US/radio.md
View File

@@ -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.
```html
<template>
<el-radio disabled v-model="radio1" 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="disabled">Option A</el-radio>
<el-radio disabled v-model="radio" label="selected and disabled">Option B</el-radio>
</template>
<script>
export default {
data () {
return {
radio1: 'selected and disabled'
radio: 'selected and disabled'
};
}
}
@@ -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.
```html
<el-radio-group v-model="radio2">
<el-radio-group v-model="radio">
<el-radio :label="3">Option A</el-radio>
<el-radio :label="6">Option B</el-radio>
<el-radio :label="9">Option C</el-radio>
@@ -65,7 +65,7 @@ Suitable for choosing from some mutually exclusive options.
export default {
data () {
return {
radio2: 3
radio: 3
};
}
}
@@ -81,7 +81,7 @@ Radio with button styles.
```html
<template>
<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="Washington"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button>
@@ -89,7 +89,7 @@ Radio with button styles.
</el-radio-group>
</div>
<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="Washington"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button>
@@ -97,7 +97,7 @@ Radio with button styles.
</el-radio-group>
</div>
<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="Washington" disabled ></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button>
@@ -105,7 +105,7 @@ Radio with button styles.
</el-radio-group>
</div>
<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="Washington"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button>
@@ -118,10 +118,10 @@ Radio with button styles.
export default {
data () {
return {
radio1: 'New York',
radio2: 'New York',
radio3: 'New York',
radio4: 'New York',
radio5: 'New York',
radio6: 'New York'
radio4: 'New York'
};
}
}
@@ -135,21 +135,21 @@ Radio with button styles.
```html
<template>
<div>
<el-radio v-model="radio7" 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="1" border>Option A</el-radio>
<el-radio v-model="radio1" label="2" border>Option B</el-radio>
</div>
<div style="margin-top: 20px">
<el-radio v-model="radio8" 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="1" border size="medium">Option A</el-radio>
<el-radio v-model="radio2" label="2" border size="medium">Option B</el-radio>
</div>
<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="2" border disabled>Option B</el-radio>
</el-radio-group>
</div>
<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="2" border>Option B</el-radio>
</el-radio-group>
@@ -160,10 +160,10 @@ Radio with button styles.
export default {
data () {
return {
radio7: '1',
radio8: '1',
radio9: '1',
radio10: '1'
radio1: '1',
radio2: '1',
radio3: '1',
radio4: '1'
};
}
}

12
examples/docs/en-US/rate.md
View File

@@ -40,7 +40,7 @@ Using text to indicate rating score
```html
<el-rate
v-model="value3"
v-model="value"
:texts="['oops', 'disappointed', 'normal', 'good', 'great']"
show-text>
</el-rate>
@@ -49,7 +49,7 @@ Using text to indicate rating score
export default {
data() {
return {
value3: null
value: null
}
}
}
@@ -65,7 +65,7 @@ You can use different icons to distinguish different rate components.
```html
<el-rate
v-model="value4"
v-model="value"
:icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
void-icon-class="icon-rate-face-off"
:colors="['#99A9BF', '#F7BA2A', '#FF9900']">
@@ -75,7 +75,7 @@ You can use different icons to distinguish different rate components.
export default {
data() {
return {
value4: null
value: null
}
}
}
@@ -91,7 +91,7 @@ Read-only Rate is for displaying rating score. Half star is supported.
```html
<el-rate
v-model="value5"
v-model="value"
disabled
show-score
text-color="#ff9900"
@@ -102,7 +102,7 @@ Read-only Rate is for displaying rating score. Half star is supported.
export default {
data() {
return {
value5: 3.7
value: 3.7
}
}
}

52
examples/docs/en-US/select.md
View File

@@ -52,9 +52,9 @@ When there are plenty of options, use a drop-down menu to display and select des
```html
<template>
<el-select v-model="value2" placeholder="Select">
<el-select v-model="value" placeholder="Select">
<el-option
v-for="item in options2"
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
@@ -67,7 +67,7 @@ When there are plenty of options, use a drop-down menu to display and select des
export default {
data() {
return {
options2: [{
options: [{
value: 'Option1',
label: 'Option1'
}, {
@@ -84,7 +84,7 @@ When there are plenty of options, use a drop-down menu to display and select des
value: 'Option5',
label: 'Option5'
}],
value2: ''
value: ''
}
}
}
@@ -99,7 +99,7 @@ Disable the whole component.
:::demo Set `disabled` of `el-select` to make it disabled.
```html
<template>
<el-select v-model="value3" disabled placeholder="Select">
<el-select v-model="value" disabled placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
@@ -129,7 +129,7 @@ Disable the whole component.
value: 'Option5',
label: 'Option5'
}],
value3: ''
value: ''
}
}
}
@@ -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.
```html
<template>
<el-select v-model="value4" clearable placeholder="Select">
<el-select v-model="value" clearable placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
@@ -174,7 +174,7 @@ You can clear Select using a clear icon.
value: 'Option5',
label: 'Option5'
}],
value4: ''
value: ''
}
}
}
@@ -250,7 +250,7 @@ You can customize HTML templates for options.
```html
<template>
<el-select v-model="value6" placeholder="Select">
<el-select v-model="value" placeholder="Select">
<el-option
v-for="item in cities"
:key="item.value"
@@ -285,7 +285,7 @@ You can customize HTML templates for options.
value: 'Guangzhou',
label: 'Guangzhou'
}],
value6: ''
value: ''
}
}
}
@@ -301,9 +301,9 @@ Display options in groups.
```html
<template>
<el-select v-model="value7" placeholder="Select">
<el-select v-model="value" placeholder="Select">
<el-option-group
v-for="group in options3"
v-for="group in options"
:key="group.label"
:label="group.label">
<el-option
@@ -320,7 +320,7 @@ Display options in groups.
export default {
data() {
return {
options3: [{
options: [{
label: 'Popular cities',
options: [{
value: 'Shanghai',
@@ -345,7 +345,7 @@ Display options in groups.
label: 'Dalian'
}]
}],
value7: ''
value: ''
}
}
}
@@ -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.
```html
<template>
<el-select v-model="value8" filterable placeholder="Select">
<el-select v-model="value" filterable placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
@@ -390,7 +390,7 @@ You can filter options for your desired ones.
value: 'Option5',
label: 'Option5'
}],
value8: ''
value: ''
}
}
}
@@ -407,7 +407,7 @@ Enter keywords and search data from server.
```html
<template>
<el-select
v-model="value9"
v-model="value"
multiple
filterable
remote
@@ -416,7 +416,7 @@ Enter keywords and search data from server.
:remote-method="remoteMethod"
:loading="loading">
<el-option
v-for="item in options4"
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
@@ -428,8 +428,8 @@ Enter keywords and search data from server.
export default {
data() {
return {
options4: [],
value9: [],
options: [],
value: [],
list: [],
loading: false,
states: ["Alabama", "Alaska", "Arizona",
@@ -462,13 +462,13 @@ Enter keywords and search data from server.
this.loading = true;
setTimeout(() => {
this.loading = false;
this.options4 = this.list.filter(item => {
this.options = this.list.filter(item => {
return item.label.toLowerCase()
.indexOf(query.toLowerCase()) > -1;
});
}, 200);
} else {
this.options4 = [];
this.options = [];
}
}
}
@@ -483,14 +483,14 @@ Create and select new items that are not included in select options
```html
<template>
<el-select
v-model="value10"
v-model="value"
multiple
filterable
allow-create
default-first-option
placeholder="Choose tags for your article">
<el-option
v-for="item in options5"
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
@@ -502,7 +502,7 @@ Create and select new items that are not included in select options
export default {
data() {
return {
options5: [{
options: [{
value: 'HTML',
label: 'HTML'
}, {
@@ -512,7 +512,7 @@ Create and select new items that are not included in select options
value: 'JavaScript',
label: 'JavaScript'
}],
value10: []
value: []
}
}
}