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

Docs: Rename variable in docs (#15185)

Browse Source
This commit is contained in:
刘鹏龙 2019-05-07 18:48:41 +08:00 committed by hetech
parent 8bb1e0a2d5
commit b240f0e670
29 changed files with 304 additions and 305 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
examples/docs/en-US/message.md
View File

@ -45,14 +45,14 @@ Used to show the feedback of Success, Warning, Message and Error activities.
<template> <template>
<el-button :plain="true" @click="open2">success</el-button> <el-button :plain="true" @click="open2">success</el-button>
<el-button :plain="true" @click="open3">warning</el-button> <el-button :plain="true" @click="open3">warning</el-button>
<el-button :plain="true" @click="open">message</el-button> <el-button :plain="true" @click="open1">message</el-button>
<el-button :plain="true" @click="open4">error</el-button> <el-button :plain="true" @click="open4">error</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open() { open1() {
this.$message('This is a message.'); this.$message('This is a message.');
}, },
open2() { open2() {
@ -85,23 +85,23 @@ A close button can be added.
:::demo A default Message cannot be closed manually. If you need a closable message, you can set `showClose` field. Besides, same as notification, message has a controllable `duration`. Default duration is 3000 ms, and it won't disappear when set to `0`. :::demo A default Message cannot be closed manually. If you need a closable message, you can set `showClose` field. Besides, same as notification, message has a controllable `duration`. Default duration is 3000 ms, and it won't disappear when set to `0`.
```html ```html
<template> <template>
<el-button :plain="true" @click="open5">message</el-button> <el-button :plain="true" @click="open1">message</el-button>
<el-button :plain="true" @click="open6">success</el-button> <el-button :plain="true" @click="open2">success</el-button>
<el-button :plain="true" @click="open7">warning</el-button> <el-button :plain="true" @click="open3">warning</el-button>
<el-button :plain="true" @click="open8">error</el-button> <el-button :plain="true" @click="open4">error</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open5() { open1() {
this.$message({ this.$message({
showClose: true, showClose: true,
message: 'This is a message.' message: 'This is a message.'
}); });
}, },
open6() { open2() {
this.$message({ this.$message({
showClose: true, showClose: true,
message: 'Congrats, this is a success message.', message: 'Congrats, this is a success message.',
@ -109,7 +109,7 @@ A close button can be added.
}); });
}, },
open7() { open3() {
this.$message({ this.$message({
showClose: true, showClose: true,
message: 'Warning, this is a warning message.', message: 'Warning, this is a warning message.',
@ -117,7 +117,7 @@ A close button can be added.
}); });
}, },
open8() { open4() {
this.$message({ this.$message({
showClose: true, showClose: true,
message: 'Oops, this is a error message.', message: 'Oops, this is a error message.',

50
examples/docs/en-US/notification.md
View File

@ -10,7 +10,7 @@ Displays a global notification message at a corner of the page.
<template> <template>
<el-button <el-button
plain plain
@click="open"> @click="open1">
Closes automatically Closes automatically
</el-button> </el-button>
<el-button <el-button
@ -23,7 +23,7 @@ Displays a global notification message at a corner of the page.
<script> <script>
export default { export default {
methods: { methods: {
open() { open1() {
const h = this.$createElement; const h = this.$createElement;
this.$notify({ this.$notify({
@ -49,27 +49,27 @@ Displays a global notification message at a corner of the page.
We provide four types: success, warning, info and error. We provide four types: success, warning, info and error.
:::demo Element provides four notification types: `success`, `warning`, `info` and `error`. They are set by the `type` field, and other values will be ignored. We also registered methods for these types that can be invoked directly like `open5` and `open6` without passing a `type` field. :::demo Element provides four notification types: `success`, `warning`, `info` and `error`. They are set by the `type` field, and other values will be ignored. We also registered methods for these types that can be invoked directly like `open3` and `open4` without passing a `type` field.
```html ```html
<template> <template>
<el-button <el-button
plain plain
@click="open3"> @click="open1">
Success Success
</el-button> </el-button>
<el-button <el-button
plain plain
@click="open4"> @click="open2">
Warning Warning
</el-button> </el-button>
<el-button <el-button
plain plain
@click="open5"> @click="open3">
Info Info
</el-button> </el-button>
<el-button <el-button
plain plain
@click="open6"> @click="open4">
Error Error
</el-button> </el-button>
</template> </template>
@ -77,7 +77,7 @@ We provide four types: success, warning, info and error.
<script> <script>
export default { export default {
methods: { methods: {
open3() { open1() {
this.$notify({ this.$notify({
title: 'Success', title: 'Success',
message: 'This is a success message', message: 'This is a success message',
@ -85,7 +85,7 @@ We provide four types: success, warning, info and error.
}); });
}, },
open4() { open2() {
this.$notify({ this.$notify({
title: 'Warning', title: 'Warning',
message: 'This is a warning message', message: 'This is a warning message',
@ -93,14 +93,14 @@ We provide four types: success, warning, info and error.
}); });
}, },
open5() { open3() {
this.$notify.info({ this.$notify.info({
title: 'Info', title: 'Info',
message: 'This is an info message' message: 'This is an info message'
}); });
}, },
open6() { open4() {
this.$notify.error({ this.$notify.error({
title: 'Error', title: 'Error',
message: 'This is an error message' message: 'This is an error message'
@ -121,22 +121,22 @@ Notification can emerge from any corner you like.
<template> <template>
<el-button <el-button
plain plain
@click="open7"> @click="open1">
Top Right Top Right
</el-button> </el-button>
<el-button <el-button
plain plain
@click="open8"> @click="open2">
Bottom Right Bottom Right
</el-button> </el-button>
<el-button <el-button
plain plain
@click="open9"> @click="open3">
Bottom Left Bottom Left
</el-button> </el-button>
<el-button <el-button
plain plain
@click="open10"> @click="open4">
Top Left Top Left
</el-button> </el-button>
</template> </template>
@ -144,14 +144,14 @@ Notification can emerge from any corner you like.
<script> <script>
export default { export default {
methods: { methods: {
open7() { open1() {
this.$notify({ this.$notify({
title: 'Custom Position', title: 'Custom Position',
message: 'I\'m at the top right corner' message: 'I\'m at the top right corner'
}); });
}, },
open8() { open2() {
this.$notify({ this.$notify({
title: 'Custom Position', title: 'Custom Position',
message: 'I\'m at the bottom right corner', message: 'I\'m at the bottom right corner',
@ -159,7 +159,7 @@ Notification can emerge from any corner you like.
}); });
}, },
open9() { open3() {
this.$notify({ this.$notify({
title: 'Custom Position', title: 'Custom Position',
message: 'I\'m at the bottom left corner', message: 'I\'m at the bottom left corner',
@ -167,7 +167,7 @@ Notification can emerge from any corner you like.
}); });
}, },
open10() { open4() {
this.$notify({ this.$notify({
title: 'Custom Position', title: 'Custom Position',
message: 'I\'m at the top left corner', message: 'I\'m at the top left corner',
@ -189,7 +189,7 @@ Customize Notification's offset from the edge of the screen.
<template> <template>
<el-button <el-button
plain plain
@click="open11"> @click="open">
Notification with offset Notification with offset
</el-button> </el-button>
</template> </template>
@ -197,7 +197,7 @@ Customize Notification's offset from the edge of the screen.
<script> <script>
export default { export default {
methods: { methods: {
open11() { open() {
this.$notify.success({ this.$notify.success({
title: 'Success', title: 'Success',
message: 'This is a success message', message: 'This is a success message',
@ -218,7 +218,7 @@ Customize Notification's offset from the edge of the screen.
<template> <template>
<el-button <el-button
plain plain
@click="open12"> @click="open">
Use HTML String Use HTML String
</el-button> </el-button>
</template> </template>
@ -226,7 +226,7 @@ Customize Notification's offset from the edge of the screen.
<script> <script>
export default { export default {
methods: { methods: {
open12() { open() {
this.$notify({ this.$notify({
title: 'HTML String', title: 'HTML String',
dangerouslyUseHTMLString: true, dangerouslyUseHTMLString: true,
@ -252,7 +252,7 @@ It is possible to hide the close button
<template> <template>
<el-button <el-button
plain plain
@click="open13"> @click="open">
Hide close button Hide close button
</el-button> </el-button>
</template> </template>
@ -260,7 +260,7 @@ It is possible to hide the close button
<script> <script>
export default { export default {
methods: { methods: {
open13() { open() {
this.$notify.success({ this.$notify.success({
title: 'Info', title: 'Info',
message: 'This is a message without close button', message: 'This is a message without close button',

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

@ -115,11 +115,11 @@ Of course, you can nest other operations. It's more light-weight than using a di
<el-popover <el-popover
placement="top" placement="top"
width="160" width="160"
v-model="visible2"> v-model="visible">
<p>Are you sure to delete this?</p> <p>Are you sure to delete this?</p>
<div style="text-align: right; margin: 0"> <div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="visible2 = false">cancel</el-button> <el-button size="mini" type="text" @click="visible = false">cancel</el-button>
<el-button type="primary" size="mini" @click="visible2 = false">confirm</el-button> <el-button type="primary" size="mini" @click="visible = false">confirm</el-button>
</div> </div>
<el-button slot="reference">Delete</el-button> <el-button slot="reference">Delete</el-button>
</el-popover> </el-popover>
@ -128,7 +128,7 @@ Of course, you can nest other operations. It's more light-weight than using a di
export default { export default {
data() { data() {
return { return {
visible2: false, visible: false,
}; };
} }
} }

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

@ -189,7 +189,7 @@ Multiple select uses tags to display selected options.
:::demo Set `multiple` attribute for `el-select` to enable multiple mode. In this case, the value of `v-model` will be an array of selected options. By default the selected options will be displayed as Tags. You can collapse them to a text by using `collapse-tags` attribute. :::demo Set `multiple` attribute for `el-select` to enable multiple mode. In this case, the value of `v-model` will be an array of selected options. By default the selected options will be displayed as Tags. You can collapse them to a text by using `collapse-tags` attribute.
```html ```html
<template> <template>
<el-select v-model="value5" multiple placeholder="Select"> <el-select v-model="value1" multiple placeholder="Select">
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.value"
@ -199,7 +199,7 @@ Multiple select uses tags to display selected options.
</el-select> </el-select>
<el-select <el-select
v-model="value11" v-model="value2"
multiple multiple
collapse-tags collapse-tags
style="margin-left: 20px;" style="margin-left: 20px;"
@ -233,8 +233,8 @@ Multiple select uses tags to display selected options.
value: 'Option5', value: 'Option5',
label: 'Option5' label: 'Option5'
}], }],
value5: [], value1: [],
value11: [] value2: []
} }
} }
} }

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

@ -32,13 +32,13 @@ Switch is used for switching between two opposing states.
```html ```html
<el-switch <el-switch
v-model="value3" v-model="value1"
active-text="Pay by month" active-text="Pay by month"
inactive-text="Pay by year"> inactive-text="Pay by year">
</el-switch> </el-switch>
<el-switch <el-switch
style="display: block" style="display: block"
v-model="value4" v-model="value2"
active-color="#13ce66" active-color="#13ce66"
inactive-color="#ff4949" inactive-color="#ff4949"
active-text="Pay by month" active-text="Pay by month"
@ -49,8 +49,8 @@ Switch is used for switching between two opposing states.
export default { export default {
data() { data() {
return { return {
value3: true, value1: true,
value4: true value2: true
} }
} }
}; };
@ -63,9 +63,9 @@ Switch is used for switching between two opposing states.
:::demo You can set `active-value` and `inactive-value` attributes. They both receive a `Boolean`, `String` or `Number` typed value. :::demo You can set `active-value` and `inactive-value` attributes. They both receive a `Boolean`, `String` or `Number` typed value.
```html ```html
<el-tooltip :content="'Switch value: ' + value5" placement="top"> <el-tooltip :content="'Switch value: ' + value" placement="top">
<el-switch <el-switch
v-model="value5" v-model="value"
active-color="#13ce66" active-color="#13ce66"
inactive-color="#ff4949" inactive-color="#ff4949"
active-value="100" active-value="100"
@ -77,7 +77,7 @@ Switch is used for switching between two opposing states.
export default { export default {
data() { data() {
return { return {
value5: '100' value: '100'
} }
} }
}; };
@ -92,11 +92,11 @@ Switch is used for switching between two opposing states.
```html ```html
<el-switch <el-switch
v-model="value6" v-model="value1"
disabled> disabled>
</el-switch> </el-switch>
<el-switch <el-switch
v-model="value7" v-model="value2"
disabled> disabled>
</el-switch> </el-switch>
@ -104,8 +104,8 @@ Switch is used for switching between two opposing states.
export default { export default {
data() { data() {
return { return {
value6: true, value1: true,
value7: false value2: false
} }
} }
}; };

20
examples/docs/en-US/time-picker.md
View File

@ -9,7 +9,7 @@ Provide a list of fixed time for users to choose.
:::demo Use `el-time-select` label, then assign start time, end time and time step with `start`, `end` and `step`. :::demo Use `el-time-select` label, then assign start time, end time and time step with `start`, `end` and `step`.
```html ```html
<el-time-select <el-time-select
v-model="value1" v-model="value"
:picker-options="{ :picker-options="{
start: '08:30', start: '08:30',
step: '00:15', step: '00:15',
@ -22,7 +22,7 @@ Provide a list of fixed time for users to choose.
export default { export default {
data() { data() {
return { return {
value1: '' value: ''
}; };
} }
} }
@ -39,7 +39,7 @@ Can pick an arbitrary time.
```html ```html
<template> <template>
<el-time-picker <el-time-picker
v-model="value2" v-model="value1"
:picker-options="{ :picker-options="{
selectableRange: '18:30:00 - 20:30:00' selectableRange: '18:30:00 - 20:30:00'
}" }"
@ -47,7 +47,7 @@ Can pick an arbitrary time.
</el-time-picker> </el-time-picker>
<el-time-picker <el-time-picker
arrow-control arrow-control
v-model="value3" v-model="value2"
:picker-options="{ :picker-options="{
selectableRange: '18:30:00 - 20:30:00' selectableRange: '18:30:00 - 20:30:00'
}" }"
@ -59,8 +59,8 @@ Can pick an arbitrary time.
export default { export default {
data() { data() {
return { return {
value2: new Date(2016, 9, 10, 18, 40), value1: new Date(2016, 9, 10, 18, 40),
value3: new Date(2016, 9, 10, 18, 40) value2: new Date(2016, 9, 10, 18, 40)
}; };
} }
} }
@ -118,7 +118,7 @@ Can pick an arbitrary time range.
<template> <template>
<el-time-picker <el-time-picker
is-range is-range
v-model="value4" v-model="value1"
range-separator="To" range-separator="To"
start-placeholder="Start time" start-placeholder="Start time"
end-placeholder="End time"> end-placeholder="End time">
@ -126,7 +126,7 @@ Can pick an arbitrary time range.
<el-time-picker <el-time-picker
is-range is-range
arrow-control arrow-control
v-model="value5" v-model="value2"
range-separator="To" range-separator="To"
start-placeholder="Start time" start-placeholder="Start time"
end-placeholder="End time"> end-placeholder="End time">
@ -137,8 +137,8 @@ Can pick an arbitrary time range.
export default { export default {
data() { data() {
return { return {
value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)], value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)] value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
}; };
} }
} }

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

@ -139,7 +139,7 @@ Used for node selection.
```html ```html
<el-tree <el-tree
:props="props" :props="props"
:load="loadNode1" :load="loadNode"
lazy lazy
show-checkbox> show-checkbox>
</el-tree> </el-tree>
@ -156,7 +156,7 @@ Used for node selection.
}; };
}, },
methods: { methods: {
loadNode1(node, resolve) { loadNode(node, resolve) {
if (node.level === 0) { if (node.level === 0) {
return resolve([{ name: 'region' }]); return resolve([{ name: 'region' }]);
} }
@ -547,14 +547,14 @@ Tree nodes can be filtered
:props="defaultProps" :props="defaultProps"
default-expand-all default-expand-all
:filter-node-method="filterNode" :filter-node-method="filterNode"
ref="tree2"> ref="tree">
</el-tree> </el-tree>
<script> <script>
export default { export default {
watch: { watch: {
filterText(val) { filterText(val) {
this.$refs.tree2.filter(val); this.$refs.tree.filter(val);
} }
}, },

20
examples/docs/es/message.md
View File

@ -45,14 +45,14 @@ Utilizados para mostrar retroalimentacion de Success, Warning, Message y Error a
<template> <template>
<el-button :plain="true" @click="open2">success</el-button> <el-button :plain="true" @click="open2">success</el-button>
<el-button :plain="true" @click="open3">warning</el-button> <el-button :plain="true" @click="open3">warning</el-button>
<el-button :plain="true" @click="open">message</el-button> <el-button :plain="true" @click="open1">message</el-button>
<el-button :plain="true" @click="open4">error</el-button> <el-button :plain="true" @click="open4">error</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open() { open1() {
this.$message('This is a message.'); this.$message('This is a message.');
}, },
open2() { open2() {
@ -85,23 +85,23 @@ Un boton para cerrar que puede ser agregado.
:::demo Un componente Message predeterminado no se puede cerrar manualmente. Si necesitas un componente message que pueda cerrarse, puedes establecer el campo `showClose`. Ademas, al igual que las notificaciones, message tiene un atriubuto `duration` que puede ser controlado. Por defecto la duracion es de 3000 ms, y no desaparecera al llegar a `0`. :::demo Un componente Message predeterminado no se puede cerrar manualmente. Si necesitas un componente message que pueda cerrarse, puedes establecer el campo `showClose`. Ademas, al igual que las notificaciones, message tiene un atriubuto `duration` que puede ser controlado. Por defecto la duracion es de 3000 ms, y no desaparecera al llegar a `0`.
```html ```html
<template> <template>
<el-button :plain="true" @click="open5">message</el-button> <el-button :plain="true" @click="open1">message</el-button>
<el-button :plain="true" @click="open6">success</el-button> <el-button :plain="true" @click="open2">success</el-button>
<el-button :plain="true" @click="open7">warning</el-button> <el-button :plain="true" @click="open3">warning</el-button>
<el-button :plain="true" @click="open8">error</el-button> <el-button :plain="true" @click="open4">error</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open5() { open1() {
this.$message({ this.$message({
showClose: true, showClose: true,
message: 'This is a message.' message: 'This is a message.'
}); });
}, },
open6() { open2() {
this.$message({ this.$message({
showClose: true, showClose: true,
message: 'Congrats, this is a success message.', message: 'Congrats, this is a success message.',
@ -109,7 +109,7 @@ Un boton para cerrar que puede ser agregado.
}); });
}, },
open7() { open3() {
this.$message({ this.$message({
showClose: true, showClose: true,
message: 'Warning, this is a warning message.', message: 'Warning, this is a warning message.',
@ -117,7 +117,7 @@ Un boton para cerrar que puede ser agregado.
}); });
}, },
open8() { open4() {
this.$message({ this.$message({
showClose: true, showClose: true,
message: 'Oops, this is a error message.', message: 'Oops, this is a error message.',

50
examples/docs/es/notification.md
View File

@ -10,7 +10,7 @@ Muestra un mensaje de notificación global en una esquina de la página.
<template> <template>
<el-button <el-button
plain plain
@click="open"> @click="open1">
Closes automatically Closes automatically
</el-button> </el-button>
<el-button <el-button
@ -23,7 +23,7 @@ Muestra un mensaje de notificación global en una esquina de la página.
<script> <script>
export default { export default {
methods: { methods: {
open() { open1() {
const h = this.$createElement; const h = this.$createElement;
this.$notify({ this.$notify({
@ -49,28 +49,28 @@ Muestra un mensaje de notificación global en una esquina de la página.
Proporcionamos cuatro tipos: success, warning, info y error. Proporcionamos cuatro tipos: success, warning, info y error.
:::demo Element proporciona cuatro tipos de notificación: `success`, `warning`, `info` y `error`. Se definen por el campo `type` y se ignorarán otros valores. También se han registrado métodos para estos tipos que se pueden invocar directamente como en el ejemplo `open5` y `open6` sin pasar un campo `type`. :::demo Element proporciona cuatro tipos de notificación: `success`, `warning`, `info` y `error`. Se definen por el campo `type` y se ignorarán otros valores. También se han registrado métodos para estos tipos que se pueden invocar directamente como en el ejemplo `open3` y `open4` sin pasar un campo `type`.
```html ```html
<template> <template>
<el-button <el-button
plain plain
@click="open3"> @click="open1">
Success Success
</el-button> </el-button>
<el-button <el-button
plain plain
@click="open4"> @click="open2">
Warning Warning
</el-button> </el-button>
<el-button <el-button
plain plain
@click="open5"> @click="open3">
Info Info
</el-button> </el-button>
<el-button <el-button
plain plain
@click="open6"> @click="open4">
Error Error
</el-button> </el-button>
</template> </template>
@ -78,7 +78,7 @@ Proporcionamos cuatro tipos: success, warning, info y error.
<script> <script>
export default { export default {
methods: { methods: {
open3() { open1() {
this.$notify({ this.$notify({
title: 'Success', title: 'Success',
message: 'This is a success message', message: 'This is a success message',
@ -86,7 +86,7 @@ Proporcionamos cuatro tipos: success, warning, info y error.
}); });
}, },
open4() { open2() {
this.$notify({ this.$notify({
title: 'Warning', title: 'Warning',
message: 'This is a warning message', message: 'This is a warning message',
@ -94,14 +94,14 @@ Proporcionamos cuatro tipos: success, warning, info y error.
}); });
}, },
open5() { open3() {
this.$notify.info({ this.$notify.info({
title: 'Info', title: 'Info',
message: 'This is an info message' message: 'This is an info message'
}); });
}, },
open6() { open4() {
this.$notify.error({ this.$notify.error({
title: 'Error', title: 'Error',
message: 'This is an error message' message: 'This is an error message'
@ -123,22 +123,22 @@ La notificación puede surgir de cualquier rincón que uno desee.
<template> <template>
<el-button <el-button
plain plain
@click="open7"> @click="open1">
Top Right Top Right
</el-button> </el-button>
<el-button <el-button
plain plain
@click="open8"> @click="open2">
Bottom Right Bottom Right
</el-button> </el-button>
<el-button <el-button
plain plain
@click="open9"> @click="open3">
Bottom Left Bottom Left
</el-button> </el-button>
<el-button <el-button
plain plain
@click="open10"> @click="open4">
Top Left Top Left
</el-button> </el-button>
</template> </template>
@ -146,14 +146,14 @@ La notificación puede surgir de cualquier rincón que uno desee.
<script> <script>
export default { export default {
methods: { methods: {
open7() { open1() {
this.$notify({ this.$notify({
title: 'Custom Position', title: 'Custom Position',
message: 'I\'m at the top right corner' message: 'I\'m at the top right corner'
}); });
}, },
open8() { open2() {
this.$notify({ this.$notify({
title: 'Custom Position', title: 'Custom Position',
message: 'I\'m at the bottom right corner', message: 'I\'m at the bottom right corner',
@ -161,7 +161,7 @@ La notificación puede surgir de cualquier rincón que uno desee.
}); });
}, },
open9() { open3() {
this.$notify({ this.$notify({
title: 'Custom Position', title: 'Custom Position',
message: 'I\'m at the bottom left corner', message: 'I\'m at the bottom left corner',
@ -169,7 +169,7 @@ La notificación puede surgir de cualquier rincón que uno desee.
}); });
}, },
open10() { open4() {
this.$notify({ this.$notify({
title: 'Custom Position', title: 'Custom Position',
message: 'I\'m at the top left corner', message: 'I\'m at the top left corner',
@ -192,7 +192,7 @@ Personalizar el desplazamiento de notificación desde el borde de la pantalla.
<template> <template>
<el-button <el-button
plain plain
@click="open11"> @click="open">
Notification with offset Notification with offset
</el-button> </el-button>
</template> </template>
@ -200,7 +200,7 @@ Personalizar el desplazamiento de notificación desde el borde de la pantalla.
<script> <script>
export default { export default {
methods: { methods: {
open11() { open() {
this.$notify.success({ this.$notify.success({
title: 'Success', title: 'Success',
message: 'This is a success message', message: 'This is a success message',
@ -222,7 +222,7 @@ Personalizar el desplazamiento de notificación desde el borde de la pantalla.
<template> <template>
<el-button <el-button
plain plain
@click="open12"> @click="open">
Use HTML String Use HTML String
</el-button> </el-button>
</template> </template>
@ -230,7 +230,7 @@ Personalizar el desplazamiento de notificación desde el borde de la pantalla.
<script> <script>
export default { export default {
methods: { methods: {
open12() { open() {
this.$notify({ this.$notify({
title: 'HTML String', title: 'HTML String',
dangerouslyUseHTMLString: true, dangerouslyUseHTMLString: true,
@ -259,7 +259,7 @@ Es posible ocultar el botón de cerrar
<template> <template>
<el-button <el-button
plain plain
@click="open13"> @click="open">
Hide close button Hide close button
</el-button> </el-button>
</template> </template>
@ -267,7 +267,7 @@ Es posible ocultar el botón de cerrar
<script> <script>
export default { export default {
methods: { methods: {
open13() { open() {
this.$notify.success({ this.$notify.success({
title: 'Info', title: 'Info',
message: 'This is a message without close button', message: 'This is a message without close button',

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

@ -114,11 +114,11 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
<el-popover <el-popover
placement="top" placement="top"
width="160" width="160"
v-model="visible2"> v-model="visible">
<p>Are you sure to delete this?</p> <p>Are you sure to delete this?</p>
<div style="text-align: right; margin: 0"> <div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="visible2 = false">cancel</el-button> <el-button size="mini" type="text" @click="visible = false">cancel</el-button>
<el-button type="primary" size="mini" @click="visible2 = false">confirm</el-button> <el-button type="primary" size="mini" @click="visible = false">confirm</el-button>
</div> </div>
<el-button slot="reference">Delete</el-button> <el-button slot="reference">Delete</el-button>
</el-popover> </el-popover>
@ -127,7 +127,7 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
export default { export default {
data() { data() {
return { return {
visible2: false, visible: false,
}; };
} }
} }

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

@ -192,7 +192,7 @@ Selección multiple utiliza tags para mostrar las opciones seleccionadas.
```html ```html
<template> <template>
<el-select v-model="value5" multiple placeholder="Select"> <el-select v-model="value1" multiple placeholder="Select">
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.value"
@ -202,7 +202,7 @@ Selección multiple utiliza tags para mostrar las opciones seleccionadas.
</el-select> </el-select>
<el-select <el-select
v-model="value11" v-model="value2"
multiple multiple
collapse-tags collapse-tags
style="margin-left: 20px;" style="margin-left: 20px;"
@ -236,8 +236,8 @@ Selección multiple utiliza tags para mostrar las opciones seleccionadas.
value: 'Option5', value: 'Option5',
label: 'Option5' label: 'Option5'
}], }],
value5: [], value1: [],
value11: [] value2: []
} }
} }
} }

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

@ -64,14 +64,14 @@ Las opciones pueden ser discretas.
<div class="block"> <div class="block">
<span class="demonstration">Breakpoints not displayed</span> <span class="demonstration">Breakpoints not displayed</span>
<el-slider <el-slider
v-model="value" v-model="value1"
:step="10"> :step="10">
</el-slider> </el-slider>
</div> </div>
<div class="block"> <div class="block">
<span class="demonstration">Breakpoints displayed</span> <span class="demonstration">Breakpoints displayed</span>
<el-slider <el-slider
v-model="value" v-model="value2"
:step="10" :step="10"
show-stops> show-stops>
</el-slider> </el-slider>
@ -82,8 +82,8 @@ Las opciones pueden ser discretas.
export default { export default {
data() { data() {
return { return {
value: 0, value1: 0,
value: 0 value2: 0
} }
} }
} }

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

@ -33,13 +33,13 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
```html ```html
<el-switch <el-switch
v-model="value3" v-model="value1"
active-text="Pay by month" active-text="Pay by month"
inactive-text="Pay by year"> inactive-text="Pay by year">
</el-switch> </el-switch>
<el-switch <el-switch
style="display: block" style="display: block"
v-model="value4" v-model="value2"
active-color="#13ce66" active-color="#13ce66"
inactive-color="#ff4949" inactive-color="#ff4949"
active-text="Pay by month" active-text="Pay by month"
@ -50,8 +50,8 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
export default { export default {
data() { data() {
return { return {
value3: true, value1: true,
value4: true value2: true
} }
} }
}; };
@ -64,9 +64,9 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
:::demo Puede establecer los atributos `active-value` y `inactive-value`. Ambos reciben valores de tipo `Boolean`, `String` o `Number`. :::demo Puede establecer los atributos `active-value` y `inactive-value`. Ambos reciben valores de tipo `Boolean`, `String` o `Number`.
```html ```html
<el-tooltip :content="'Switch value: ' + value5" placement="top"> <el-tooltip :content="'Switch value: ' + value" placement="top">
<el-switch <el-switch
v-model="value5" v-model="value"
active-color="#13ce66" active-color="#13ce66"
inactive-color="#ff4949" inactive-color="#ff4949"
active-value="100" active-value="100"
@ -78,7 +78,7 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
export default { export default {
data() { data() {
return { return {
value5: '100' value: '100'
} }
} }
}; };
@ -93,11 +93,11 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
```html ```html
<el-switch <el-switch
v-model="value6" v-model="value1"
disabled> disabled>
</el-switch> </el-switch>
<el-switch <el-switch
v-model="value7" v-model="value2"
disabled> disabled>
</el-switch> </el-switch>
@ -105,8 +105,8 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
export default { export default {
data() { data() {
return { return {
value6: true, value1: true,
value7: false value2: false
} }
} }
}; };

20
examples/docs/es/time-picker.md
View File

@ -9,7 +9,7 @@ Provee una lista de tiempo fijo para que los usuarios escogan.
:::demo Use el tag `el-time-select`, se pueden asignar tiempo de inicio, tiempo de finalización y salto de tiempo con `start`, `end` y `step`. :::demo Use el tag `el-time-select`, se pueden asignar tiempo de inicio, tiempo de finalización y salto de tiempo con `start`, `end` y `step`.
```html ```html
<el-time-select <el-time-select
v-model="value1" v-model="value"
:picker-options="{ :picker-options="{
start: '08:30', start: '08:30',
step: '00:15', step: '00:15',
@ -22,7 +22,7 @@ Provee una lista de tiempo fijo para que los usuarios escogan.
export default { export default {
data() { data() {
return { return {
value1: '' value: ''
}; };
} }
} }
@ -39,7 +39,7 @@ Un tiempo arbitrario puede ser escogido.
```html ```html
<template> <template>
<el-time-picker <el-time-picker
v-model="value2" v-model="value1"
:picker-options="{ :picker-options="{
selectableRange: '18:30:00 - 20:30:00' selectableRange: '18:30:00 - 20:30:00'
}" }"
@ -47,7 +47,7 @@ Un tiempo arbitrario puede ser escogido.
</el-time-picker> </el-time-picker>
<el-time-picker <el-time-picker
arrow-control arrow-control
v-model="value3" v-model="value2"
:picker-options="{ :picker-options="{
selectableRange: '18:30:00 - 20:30:00' selectableRange: '18:30:00 - 20:30:00'
}" }"
@ -59,8 +59,8 @@ Un tiempo arbitrario puede ser escogido.
export default { export default {
data() { data() {
return { return {
value2: new Date(2016, 9, 10, 18, 40), value1: new Date(2016, 9, 10, 18, 40),
value3: new Date(2016, 9, 10, 18, 40) value2: new Date(2016, 9, 10, 18, 40)
}; };
} }
} }
@ -118,7 +118,7 @@ Es posible escoger un rango de tiempo arbitrario.
<template> <template>
<el-time-picker <el-time-picker
is-range is-range
v-model="value4" v-model="value1"
range-separator="To" range-separator="To"
start-placeholder="Start time" start-placeholder="Start time"
end-placeholder="End time"> end-placeholder="End time">
@ -126,7 +126,7 @@ Es posible escoger un rango de tiempo arbitrario.
<el-time-picker <el-time-picker
is-range is-range
arrow-control arrow-control
v-model="value5" v-model="value2"
range-separator="To" range-separator="To"
start-placeholder="Start time" start-placeholder="Start time"
end-placeholder="End time"> end-placeholder="End time">
@ -137,8 +137,8 @@ Es posible escoger un rango de tiempo arbitrario.
export default { export default {
data() { data() {
return { return {
value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)], value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)] value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
}; };
} }
} }

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

@ -139,7 +139,7 @@ Usado para la selección de nodos.
```html ```html
<el-tree <el-tree
:props="props" :props="props"
:load="loadNode1" :load="loadNode"
lazy lazy
show-checkbox> show-checkbox>
</el-tree> </el-tree>
@ -156,7 +156,7 @@ Usado para la selección de nodos.
}; };
}, },
methods: { methods: {
loadNode1(node, resolve) { loadNode(node, resolve) {
if (node.level === 0) { if (node.level === 0) {
return resolve([{ name: 'region' }]); return resolve([{ name: 'region' }]);
} }
@ -547,14 +547,14 @@ Los nodos del árbol se pueden filtrar.
:props="defaultProps" :props="defaultProps"
default-expand-all default-expand-all
:filter-node-method="filterNode" :filter-node-method="filterNode"
ref="tree2"> ref="tree">
</el-tree> </el-tree>
<script> <script>
export default { export default {
watch: { watch: {
filterText(val) { filterText(val) {
this.$refs.tree2.filter(val); this.$refs.tree.filter(val);
} }
}, },

20
examples/docs/fr-FR/message.md
View File

@ -45,14 +45,14 @@ Utilisé pour montrer un retour d'activités Success, Warning, Message ou Error.
<template> <template>
<el-button :plain="true" @click="open2">success</el-button> <el-button :plain="true" @click="open2">success</el-button>
<el-button :plain="true" @click="open3">warning</el-button> <el-button :plain="true" @click="open3">warning</el-button>
<el-button :plain="true" @click="open">message</el-button> <el-button :plain="true" @click="open1">message</el-button>
<el-button :plain="true" @click="open4">error</el-button> <el-button :plain="true" @click="open4">error</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open() { open1() {
this.$message('Ceci est un message.'); this.$message('Ceci est un message.');
}, },
open2() { open2() {
@ -85,23 +85,23 @@ Un bouton de fermeture peut être ajouté.
:::demo Un Message ne peut être fermé par défaut. Utiliséez `showClose` si vous avez besoin de pouvoir le fermer. De plus, tout comme Notification, Message possède une `duration` réglable. La durée par défaut est de 3000 ms, et infinie si à `0`. :::demo Un Message ne peut être fermé par défaut. Utiliséez `showClose` si vous avez besoin de pouvoir le fermer. De plus, tout comme Notification, Message possède une `duration` réglable. La durée par défaut est de 3000 ms, et infinie si à `0`.
```html ```html
<template> <template>
<el-button :plain="true" @click="open5">message</el-button> <el-button :plain="true" @click="open1">message</el-button>
<el-button :plain="true" @click="open6">success</el-button> <el-button :plain="true" @click="open2">success</el-button>
<el-button :plain="true" @click="open7">warning</el-button> <el-button :plain="true" @click="open3">warning</el-button>
<el-button :plain="true" @click="open8">error</el-button> <el-button :plain="true" @click="open4">error</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open5() { open1() {
this.$message({ this.$message({
showClose: true, showClose: true,
message: 'Ceci est un message.' message: 'Ceci est un message.'
}); });
}, },
open6() { open2() {
this.$message({ this.$message({
showClose: true, showClose: true,
message: 'Félicitations, ceci est un message de succès.', message: 'Félicitations, ceci est un message de succès.',
@ -109,7 +109,7 @@ Un bouton de fermeture peut être ajouté.
}); });
}, },
open7() { open3() {
this.$message({ this.$message({
showClose: true, showClose: true,
message: 'Attention, ceci est un avertissement.', message: 'Attention, ceci est un avertissement.',
@ -117,7 +117,7 @@ Un bouton de fermeture peut être ajouté.
}); });
}, },
open8() { open4() {
this.$message({ this.$message({
showClose: true, showClose: true,
message: 'Ouups, ceci est une erreur.', message: 'Ouups, ceci est une erreur.',

50
examples/docs/fr-FR/notification.md
View File

@ -10,7 +10,7 @@ Affiche une notification globale dans un coin de la page.
<template> <template>
<el-button <el-button
plain plain
@click="open"> @click="open1">
Se ferme automatiquement Se ferme automatiquement
</el-button> </el-button>
<el-button <el-button
@ -23,7 +23,7 @@ Affiche une notification globale dans un coin de la page.
<script> <script>
export default { export default {
methods: { methods: {
open() { open1() {
const h = this.$createElement; const h = this.$createElement;
this.$notify({ this.$notify({
@ -49,27 +49,27 @@ Affiche une notification globale dans un coin de la page.
We provide four types: success, warning, info and error. We provide four types: success, warning, info and error.
:::demo Element fournit quatre types de notifications: `success`, `warning`, `info` et `error`. Il sont choisis grâce au champs `type`, et n'importe quelle autre valeur sera ignorée. Il existe des méthodes enregistrées pour chaque type, comme dans `open5` et `open6`, qui ne nécessitent donc pas le champs `type`. :::demo Element fournit quatre types de notifications: `success`, `warning`, `info` et `error`. Il sont choisis grâce au champs `type`, et n'importe quelle autre valeur sera ignorée. Il existe des méthodes enregistrées pour chaque type, comme dans `open3` et `open4`, qui ne nécessitent donc pas le champs `type`.
```html ```html
<template> <template>
<el-button <el-button
plain plain
@click="open3"> @click="open1">
Success Success
</el-button> </el-button>
<el-button <el-button
plain plain
@click="open4"> @click="open2">
Warning Warning
</el-button> </el-button>
<el-button <el-button
plain plain
@click="open5"> @click="open3">
Info Info
</el-button> </el-button>
<el-button <el-button
plain plain
@click="open6"> @click="open4">
Error Error
</el-button> </el-button>
</template> </template>
@ -77,7 +77,7 @@ We provide four types: success, warning, info and error.
<script> <script>
export default { export default {
methods: { methods: {
open3() { open1() {
this.$notify({ this.$notify({
title: 'Success', title: 'Success',
message: 'Ceci est un message de succès', message: 'Ceci est un message de succès',
@ -85,7 +85,7 @@ We provide four types: success, warning, info and error.
}); });
}, },
open4() { open2() {
this.$notify({ this.$notify({
title: 'Warning', title: 'Warning',
message: 'Ceci est un avertissement', message: 'Ceci est un avertissement',
@ -93,14 +93,14 @@ We provide four types: success, warning, info and error.
}); });
}, },
open5() { open3() {
this.$notify.info({ this.$notify.info({
title: 'Info', title: 'Info',
message: 'Ceci est une information' message: 'Ceci est une information'
}); });
}, },
open6() { open4() {
this.$notify.error({ this.$notify.error({
title: 'Error', title: 'Error',
message: 'Ceci est une erreur' message: 'Ceci est une erreur'
@ -121,22 +121,22 @@ La notification peut apparaître dans le coin de votre choix.
<template> <template>
<el-button <el-button
plain plain
@click="open7"> @click="open1">
Top Right Top Right
</el-button> </el-button>
<el-button <el-button
plain plain
@click="open8"> @click="open2">
Bottom Right Bottom Right
</el-button> </el-button>
<el-button <el-button
plain plain
@click="open9"> @click="open3">
Bottom Left Bottom Left
</el-button> </el-button>
<el-button <el-button
plain plain
@click="open10"> @click="open4">
Top Left Top Left
</el-button> </el-button>
</template> </template>
@ -144,14 +144,14 @@ La notification peut apparaître dans le coin de votre choix.
<script> <script>
export default { export default {
methods: { methods: {
open7() { open1() {
this.$notify({ this.$notify({
title: 'Custom Position', title: 'Custom Position',
message: 'Je suis dans le coin supérieur droit' message: 'Je suis dans le coin supérieur droit'
}); });
}, },
open8() { open2() {
this.$notify({ this.$notify({
title: 'Custom Position', title: 'Custom Position',
message: 'Je suis dans le coin inférieur droit', message: 'Je suis dans le coin inférieur droit',
@ -159,7 +159,7 @@ La notification peut apparaître dans le coin de votre choix.
}); });
}, },
open9() { open3() {
this.$notify({ this.$notify({
title: 'Custom Position', title: 'Custom Position',
message: 'Je suis dans le coin inférieur gauche', message: 'Je suis dans le coin inférieur gauche',
@ -167,7 +167,7 @@ La notification peut apparaître dans le coin de votre choix.
}); });
}, },
open10() { open4() {
this.$notify({ this.$notify({
title: 'Custom Position', title: 'Custom Position',
message: 'Je suis dans le coin supérieur gauche', message: 'Je suis dans le coin supérieur gauche',
@ -189,7 +189,7 @@ Vous pouvez décaler l'emplacement de la notification par rapport au bord de la
<template> <template>
<el-button <el-button
plain plain
@click="open11"> @click="open">
Notification avec décalage Notification avec décalage
</el-button> </el-button>
</template> </template>
@ -197,7 +197,7 @@ Vous pouvez décaler l'emplacement de la notification par rapport au bord de la
<script> <script>
export default { export default {
methods: { methods: {
open11() { open() {
this.$notify.success({ this.$notify.success({
title: 'Success', title: 'Success',
message: 'Ceci est un message de succès', message: 'Ceci est un message de succès',
@ -220,7 +220,7 @@ L'attribut `message` supporte le HTML.
<template> <template>
<el-button <el-button
plain plain
@click="open12"> @click="open">
Utiliser du HTML Utiliser du HTML
</el-button> </el-button>
</template> </template>
@ -228,7 +228,7 @@ L'attribut `message` supporte le HTML.
<script> <script>
export default { export default {
methods: { methods: {
open12() { open() {
this.$notify({ this.$notify({
title: 'HTML String', title: 'HTML String',
dangerouslyUseHTMLString: true, dangerouslyUseHTMLString: true,
@ -255,7 +255,7 @@ Il est possible de cacher le bouton de fermeture.
<template> <template>
<el-button <el-button
plain plain
@click="open13"> @click="open">
Bouton de fermeture caché Bouton de fermeture caché
</el-button> </el-button>
</template> </template>
@ -263,7 +263,7 @@ Il est possible de cacher le bouton de fermeture.
<script> <script>
export default { export default {
methods: { methods: {
open13() { open() {
this.$notify.success({ this.$notify.success({
title: 'Info', title: 'Info',
message: 'Ceci est un message sans bouton de fermeture', message: 'Ceci est un message sans bouton de fermeture',

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

@ -115,11 +115,11 @@ Vous pouvez aussi imbriquer des opérations. Procéder ainsi est plus léger que
<el-popover <el-popover
placement="top" placement="top"
width="160" width="160"
v-model="visible2"> v-model="visible">
<p>Voulez-vous vraiment supprimer ceci?</p> <p>Voulez-vous vraiment supprimer ceci?</p>
<div style="text-align: right; margin: 0"> <div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="visible2 = false">Annuler</el-button> <el-button size="mini" type="text" @click="visible = false">Annuler</el-button>
<el-button type="primary" size="mini" @click="visible2 = false">Confirmer</el-button> <el-button type="primary" size="mini" @click="visible = false">Confirmer</el-button>
</div> </div>
<el-button slot="reference">Supprimer</el-button> <el-button slot="reference">Supprimer</el-button>
</el-popover> </el-popover>
@ -128,7 +128,7 @@ Vous pouvez aussi imbriquer des opérations. Procéder ainsi est plus léger que
export default { export default {
data() { data() {
return { return {
visible2: false, visible: false,
}; };
} }
} }

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

@ -189,7 +189,7 @@ Les sélecteurs multiples utilisent des tags pour afficher les différentes opti
:::demo Ajoutez `multiple` à `el-select` pour le changer en sélecteur multiple. La valeur de `v-model` devient un tableau contenant toutes les options. Par défaut les différents choix sont affichés sous forme de tags. Vous pouvez réduire leur nombre en utilisant l'attribut `collapse-tags`. :::demo Ajoutez `multiple` à `el-select` pour le changer en sélecteur multiple. La valeur de `v-model` devient un tableau contenant toutes les options. Par défaut les différents choix sont affichés sous forme de tags. Vous pouvez réduire leur nombre en utilisant l'attribut `collapse-tags`.
```html ```html
<template> <template>
<el-select v-model="value5" multiple placeholder="Select"> <el-select v-model="value1" multiple placeholder="Select">
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.value"
@ -199,7 +199,7 @@ Les sélecteurs multiples utilisent des tags pour afficher les différentes opti
</el-select> </el-select>
<el-select <el-select
v-model="value11" v-model="value2"
multiple multiple
collapse-tags collapse-tags
style="margin-left: 20px;" style="margin-left: 20px;"
@ -233,8 +233,8 @@ Les sélecteurs multiples utilisent des tags pour afficher les différentes opti
value: 'Option5', value: 'Option5',
label: 'Option5' label: 'Option5'
}], }],
value5: [], value1: [],
value11: [] value2: []
} }
} }
} }

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

@ -34,13 +34,13 @@ Switch est utilisé pour choisir entre deux états opposés.
```html ```html
<el-switch <el-switch
v-model="value3" v-model="value1"
active-text="Paiement mensuel" active-text="Paiement mensuel"
inactive-text="Paiement annuel"> inactive-text="Paiement annuel">
</el-switch> </el-switch>
<el-switch <el-switch
style="display: block" style="display: block"
v-model="value4" v-model="value2"
active-color="#13ce66" active-color="#13ce66"
inactive-color="#ff4949" inactive-color="#ff4949"
active-text="Paiement mensuel" active-text="Paiement mensuel"
@ -51,8 +51,8 @@ Switch est utilisé pour choisir entre deux états opposés.
export default { export default {
data() { data() {
return { return {
value3: true, value1: true,
value4: true value2: true
} }
} }
}; };
@ -65,9 +65,9 @@ Switch est utilisé pour choisir entre deux états opposés.
:::demo Vous pouvez utiliser `active-value` et `inactive-value` pour déterminer la valeur de chaque état. Ils prennent un `Boolean`, `String` ou `Number`. :::demo Vous pouvez utiliser `active-value` et `inactive-value` pour déterminer la valeur de chaque état. Ils prennent un `Boolean`, `String` ou `Number`.
```html ```html
<el-tooltip :content="'Valeur de l\'état: ' + value5" placement="top"> <el-tooltip :content="'Valeur de l\'état: ' + value" placement="top">
<el-switch <el-switch
v-model="value5" v-model="value"
active-color="#13ce66" active-color="#13ce66"
inactive-color="#ff4949" inactive-color="#ff4949"
active-value="100" active-value="100"
@ -79,7 +79,7 @@ Switch est utilisé pour choisir entre deux états opposés.
export default { export default {
data() { data() {
return { return {
value5: '100' value: '100'
} }
} }
}; };
@ -94,11 +94,11 @@ Switch est utilisé pour choisir entre deux états opposés.
```html ```html
<el-switch <el-switch
v-model="value6" v-model="value1"
disabled> disabled>
</el-switch> </el-switch>
<el-switch <el-switch
v-model="value7" v-model="value2"
disabled> disabled>
</el-switch> </el-switch>
@ -106,8 +106,8 @@ Switch est utilisé pour choisir entre deux états opposés.
export default { export default {
data() { data() {
return { return {
value6: true, value1: true,
value7: false value2: false
} }
} }
}; };

20
examples/docs/fr-FR/time-picker.md
View File

@ -9,7 +9,7 @@ Vous pouvez fournir une liste d'horaires fixés pour que l'utilisateur en choisi
:::demo Utilisez `el-time-select` puis assignez un horaire de début, de fin et un pas grâce aux propriétés `start`, `end` et `step` de l'attribut `picker-options`. :::demo Utilisez `el-time-select` puis assignez un horaire de début, de fin et un pas grâce aux propriétés `start`, `end` et `step` de l'attribut `picker-options`.
```html ```html
<el-time-select <el-time-select
v-model="value1" v-model="value"
:picker-options="{ :picker-options="{
start: '08:30', start: '08:30',
step: '00:15', step: '00:15',
@ -22,7 +22,7 @@ Vous pouvez fournir une liste d'horaires fixés pour que l'utilisateur en choisi
export default { export default {
data() { data() {
return { return {
value1: '' value: ''
}; };
} }
} }
@ -39,7 +39,7 @@ Vous pouvez aussi laisser l'utilisateur choisir librement un horaire.
```html ```html
<template> <template>
<el-time-picker <el-time-picker
v-model="value2" v-model="value1"
:picker-options="{ :picker-options="{
selectableRange: '18:30:00 - 20:30:00' selectableRange: '18:30:00 - 20:30:00'
}" }"
@ -47,7 +47,7 @@ Vous pouvez aussi laisser l'utilisateur choisir librement un horaire.
</el-time-picker> </el-time-picker>
<el-time-picker <el-time-picker
arrow-control arrow-control
v-model="value3" v-model="value2"
:picker-options="{ :picker-options="{
selectableRange: '18:30:00 - 20:30:00' selectableRange: '18:30:00 - 20:30:00'
}" }"
@ -59,8 +59,8 @@ Vous pouvez aussi laisser l'utilisateur choisir librement un horaire.
export default { export default {
data() { data() {
return { return {
value2: new Date(2016, 9, 10, 18, 40), value1: new Date(2016, 9, 10, 18, 40),
value3: new Date(2016, 9, 10, 18, 40) value2: new Date(2016, 9, 10, 18, 40)
}; };
} }
} }
@ -118,7 +118,7 @@ Vous pouvez également définir un intervalle libre.
<template> <template>
<el-time-picker <el-time-picker
is-range is-range
v-model="value4" v-model="value1"
range-separator="To" range-separator="To"
start-placeholder="Horaire de début" start-placeholder="Horaire de début"
end-placeholder="Horaire de fin"> end-placeholder="Horaire de fin">
@ -126,7 +126,7 @@ Vous pouvez également définir un intervalle libre.
<el-time-picker <el-time-picker
is-range is-range
arrow-control arrow-control
v-model="value5" v-model="value2"
range-separator="To" range-separator="To"
start-placeholder="Horaire de début" start-placeholder="Horaire de début"
end-placeholder="Horaire de fin"> end-placeholder="Horaire de fin">
@ -137,8 +137,8 @@ Vous pouvez également définir un intervalle libre.
export default { export default {
data() { data() {
return { return {
value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)], value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)] value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
}; };
} }
} }

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

@ -139,7 +139,7 @@ Vous pouvez activer la sélection des noeuds.
```html ```html
<el-tree <el-tree
:props="props" :props="props"
:load="loadNode1" :load="loadNode"
lazy lazy
show-checkbox> show-checkbox>
</el-tree> </el-tree>
@ -156,7 +156,7 @@ Vous pouvez activer la sélection des noeuds.
}; };
}, },
methods: { methods: {
loadNode1(node, resolve) { loadNode(node, resolve) {
if (node.level === 0) { if (node.level === 0) {
return resolve([{ name: 'region' }]); return resolve([{ name: 'region' }]);
} }
@ -550,14 +550,14 @@ Les noeuds peuvent être filtrés par mot-clé.
:props="defaultProps" :props="defaultProps"
default-expand-all default-expand-all
:filter-node-method="filterNode" :filter-node-method="filterNode"
ref="tree2"> ref="tree">
</el-tree> </el-tree>
<script> <script>
export default { export default {
watch: { watch: {
filterText(val) { filterText(val) {
this.$refs.tree2.filter(val); this.$refs.tree.filter(val);
} }
}, },

20
examples/docs/zh-CN/message.md
View File

@ -45,14 +45,14 @@
<template> <template>
<el-button :plain="true" @click="open2">成功</el-button> <el-button :plain="true" @click="open2">成功</el-button>
<el-button :plain="true" @click="open3">警告</el-button> <el-button :plain="true" @click="open3">警告</el-button>
<el-button :plain="true" @click="open">消息</el-button> <el-button :plain="true" @click="open1">消息</el-button>
<el-button :plain="true" @click="open4">错误</el-button> <el-button :plain="true" @click="open4">错误</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open() { open1() {
this.$message('这是一条消息提示'); this.$message('这是一条消息提示');
}, },
open2() { open2() {
@ -85,23 +85,23 @@
:::demo 默认的 Message 是不可以被人工关闭的，如果需要可手动关闭的 Message，可以使用`showClose`字段。此外，和 Notification 一样，Message 拥有可控的`duration`，设置`0`为不会被自动关闭，默认为 3000 毫秒。 :::demo 默认的 Message 是不可以被人工关闭的，如果需要可手动关闭的 Message，可以使用`showClose`字段。此外，和 Notification 一样，Message 拥有可控的`duration`，设置`0`为不会被自动关闭，默认为 3000 毫秒。
```html ```html
<template> <template>
<el-button :plain="true" @click="open5">消息</el-button> <el-button :plain="true" @click="open1">消息</el-button>
<el-button :plain="true" @click="open6">成功</el-button> <el-button :plain="true" @click="open2">成功</el-button>
<el-button :plain="true" @click="open7">警告</el-button> <el-button :plain="true" @click="open3">警告</el-button>
<el-button :plain="true" @click="open8">错误</el-button> <el-button :plain="true" @click="open4">错误</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open5() { open1() {
this.$message({ this.$message({
showClose: true, showClose: true,
message: '这是一条消息提示' message: '这是一条消息提示'
}); });
}, },
open6() { open2() {
this.$message({ this.$message({
showClose: true, showClose: true,
message: '恭喜你，这是一条成功消息', message: '恭喜你，这是一条成功消息',
@ -109,7 +109,7 @@
}); });
}, },
open7() { open3() {
this.$message({ this.$message({
showClose: true, showClose: true,
message: '警告哦，这是一条警告消息', message: '警告哦，这是一条警告消息',
@ -117,7 +117,7 @@
}); });
}, },
open8() { open4() {
this.$message({ this.$message({
showClose: true, showClose: true,
message: '错了哦，这是一条错误消息', message: '错了哦，这是一条错误消息',

50
examples/docs/zh-CN/notification.md
View File

@ -11,7 +11,7 @@
<template> <template>
<el-button <el-button
plain plain
@click="open"> @click="open1">
可自动关闭 可自动关闭
</el-button> </el-button>
<el-button <el-button
@ -24,7 +24,7 @@
<script> <script>
export default { export default {
methods: { methods: {
open() { open1() {
const h = this.$createElement; const h = this.$createElement;
this.$notify({ this.$notify({
@ -50,27 +50,27 @@
带有 icon，常用来显示「成功、警告、消息、错误」类的系统消息 带有 icon，常用来显示「成功、警告、消息、错误」类的系统消息
:::demo Element 为 Notification 组件准备了四种通知类型：`success`, `warning`, `info`, `error`。通过`type`字段来设置，除此以外的值将被忽略。同时，我们也为 Notification 的各种 type 注册了方法，可以在不传入`type`字段的情况下像`open5`和`open6`那样直接调用。 :::demo Element 为 Notification 组件准备了四种通知类型：`success`, `warning`, `info`, `error`。通过`type`字段来设置，除此以外的值将被忽略。同时，我们也为 Notification 的各种 type 注册了方法，可以在不传入`type`字段的情况下像`open3`和`open4`那样直接调用。
```html ```html
<template> <template>
<el-button <el-button
plain plain
@click="open3"> @click="open1">
成功 成功
</el-button> </el-button>
<el-button <el-button
plain plain
@click="open4"> @click="open2">
警告 警告
</el-button> </el-button>
<el-button <el-button
plain plain
@click="open5"> @click="open3">
消息 消息
</el-button> </el-button>
<el-button <el-button
plain plain
@click="open6"> @click="open4">
错误 错误
</el-button> </el-button>
</template> </template>
@ -78,7 +78,7 @@
<script> <script>
export default { export default {
methods: { methods: {
open3() { open1() {
this.$notify({ this.$notify({
title: '成功', title: '成功',
message: '这是一条成功的提示消息', message: '这是一条成功的提示消息',
@ -86,7 +86,7 @@
}); });
}, },
open4() { open2() {
this.$notify({ this.$notify({
title: '警告', title: '警告',
message: '这是一条警告的提示消息', message: '这是一条警告的提示消息',
@ -94,14 +94,14 @@
}); });
}, },
open5() { open3() {
this.$notify.info({ this.$notify.info({
title: '消息', title: '消息',
message: '这是一条消息的提示消息' message: '这是一条消息的提示消息'
}); });
}, },
open6() { open4() {
this.$notify.error({ this.$notify.error({
title: '错误', title: '错误',
message: '这是一条错误的提示消息' message: '这是一条错误的提示消息'
@ -122,22 +122,22 @@
<template> <template>
<el-button <el-button
plain plain
@click="open7"> @click="open1">
右上角 右上角
</el-button> </el-button>
<el-button <el-button
plain plain
@click="open8"> @click="open2">
右下角 右下角
</el-button> </el-button>
<el-button <el-button
plain plain
@click="open9"> @click="open3">
左下角 左下角
</el-button> </el-button>
<el-button <el-button
plain plain
@click="open10"> @click="open4">
左上角 左上角
</el-button> </el-button>
</template> </template>
@ -145,14 +145,14 @@
<script> <script>
export default { export default {
methods: { methods: {
open7() { open1() {
this.$notify({ this.$notify({
title: '自定义位置', title: '自定义位置',
message: '右上角弹出的消息' message: '右上角弹出的消息'
}); });
}, },
open8() { open2() {
this.$notify({ this.$notify({
title: '自定义位置', title: '自定义位置',
message: '右下角弹出的消息', message: '右下角弹出的消息',
@ -160,7 +160,7 @@
}); });
}, },
open9() { open3() {
this.$notify({ this.$notify({
title: '自定义位置', title: '自定义位置',
message: '左下角弹出的消息', message: '左下角弹出的消息',
@ -168,7 +168,7 @@
}); });
}, },
open10() { open4() {
this.$notify({ this.$notify({
title: '自定义位置', title: '自定义位置',
message: '左上角弹出的消息', message: '左上角弹出的消息',
@ -190,7 +190,7 @@
<template> <template>
<el-button <el-button
plain plain
@click="open11"> @click="open">
偏移的消息 偏移的消息
</el-button> </el-button>
</template> </template>
@ -198,7 +198,7 @@
<script> <script>
export default { export default {
methods: { methods: {
open11() { open() {
this.$notify({ this.$notify({
title: '偏移', title: '偏移',
message: '这是一条带有偏移的提示消息', message: '这是一条带有偏移的提示消息',
@ -219,7 +219,7 @@
<template> <template>
<el-button <el-button
plain plain
@click="open12"> @click="open">
使用 HTML 片段 使用 HTML 片段
</el-button> </el-button>
</template> </template>
@ -227,7 +227,7 @@
<script> <script>
export default { export default {
methods: { methods: {
open12() { open() {
this.$notify({ this.$notify({
title: 'HTML 片段', title: 'HTML 片段',
dangerouslyUseHTMLString: true, dangerouslyUseHTMLString: true,
@ -253,7 +253,7 @@
<template> <template>
<el-button <el-button
plain plain
@click="open13"> @click="open">
隐藏关闭按钮 隐藏关闭按钮
</el-button> </el-button>
</template> </template>
@ -261,7 +261,7 @@
<script> <script>
export default { export default {
methods: { methods: {
open13() { open() {
this.$notify.success({ this.$notify.success({
title: 'Info', title: 'Info',
message: '这是一条没有关闭按钮的消息', message: '这是一条没有关闭按钮的消息',

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

@ -112,11 +112,11 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
<el-popover <el-popover
placement="top" placement="top"
width="160" width="160"
v-model="visible2"> v-model="visible">
<p>这是一段内容这是一段内容确定删除吗？</p> <p>这是一段内容这是一段内容确定删除吗？</p>
<div style="text-align: right; margin: 0"> <div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="visible2 = false">取消</el-button> <el-button size="mini" type="text" @click="visible = false">取消</el-button>
<el-button type="primary" size="mini" @click="visible2 = false">确定</el-button> <el-button type="primary" size="mini" @click="visible = false">确定</el-button>
</div> </div>
<el-button slot="reference">删除</el-button> <el-button slot="reference">删除</el-button>
</el-popover> </el-popover>
@ -125,7 +125,7 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
export default { export default {
data() { data() {
return { return {
visible2: false, visible: false,
}; };
} }
} }

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

@ -188,7 +188,7 @@
:::demo 为`el-select`设置`multiple`属性即可启用多选，此时`v-model`的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置`collapse-tags`属性将它们合并为一段文字。 :::demo 为`el-select`设置`multiple`属性即可启用多选，此时`v-model`的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置`collapse-tags`属性将它们合并为一段文字。
```html ```html
<template> <template>
<el-select v-model="value5" multiple placeholder="请选择"> <el-select v-model="value1" multiple placeholder="请选择">
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.value"
@ -198,7 +198,7 @@
</el-select> </el-select>
<el-select <el-select
v-model="value11" v-model="value2"
multiple multiple
collapse-tags collapse-tags
style="margin-left: 20px;" style="margin-left: 20px;"
@ -232,8 +232,8 @@
value: '选项5', value: '选项5',
label: '北京烤鸭' label: '北京烤鸭'
}], }],
value5: [], value1: [],
value11: [] value2: []
} }
} }
} }

79
examples/docs/zh-CN/switch.md
View File

@ -8,11 +8,42 @@
```html ```html
<el-switch <el-switch
v-model="value2" v-model="value"
active-color="#13ce66" active-color="#13ce66"
inactive-color="#ff4949"> inactive-color="#ff4949">
</el-switch> </el-switch>
<script>
export default {
data() {
return {
value: true
}
}
};
</script>
```
:::
### 文字描述
:::demo 使用`active-text`属性与`inactive-text`属性来设置开关的文字描述。
```html
<el-switch
v-model="value1"
active-text="按月付费"
inactive-text="按年付费">
</el-switch>
<el-switch
style="display: block"
v-model="value2"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="按月付费"
inactive-text="按年付费">
</el-switch>
<script> <script>
export default { export default {
data() { data() {
@ -26,46 +57,14 @@
``` ```
::: :::
### 文字描述
:::demo 使用`active-text`属性与`inactive-text`属性来设置开关的文字描述。
```html
<el-switch
v-model="value3"
active-text="按月付费"
inactive-text="按年付费">
</el-switch>
<el-switch
style="display: block"
v-model="value4"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="按月付费"
inactive-text="按年付费">
</el-switch>
<script>
export default {
data() {
return {
value3: true,
value4: true
}
}
};
</script>
```
:::
### 扩展的 value 类型 ### 扩展的 value 类型
:::demo 设置`active-value`和`inactive-value`属性，接受`Boolean`, `String`或`Number`类型的值。 :::demo 设置`active-value`和`inactive-value`属性，接受`Boolean`, `String`或`Number`类型的值。
```html ```html
<el-tooltip :content="'Switch value: ' + value5" placement="top"> <el-tooltip :content="'Switch value: ' + value" placement="top">
<el-switch <el-switch
v-model="value5" v-model="value"
active-color="#13ce66" active-color="#13ce66"
inactive-color="#ff4949" inactive-color="#ff4949"
active-value="100" active-value="100"
@ -77,7 +76,7 @@
export default { export default {
data() { data() {
return { return {
value5: '100' value: '100'
} }
} }
}; };
@ -93,19 +92,19 @@
```html ```html
<el-switch <el-switch
v-model="value6" v-model="value1"
disabled> disabled>
</el-switch> </el-switch>
<el-switch <el-switch
v-model="value7" v-model="value2"
disabled> disabled>
</el-switch> </el-switch>
<script> <script>
export default { export default {
data() { data() {
return { return {
value6: true, value1: true,
value7: false value2: false
} }
} }
}; };

20
examples/docs/zh-CN/time-picker.md
View File

@ -9,7 +9,7 @@
:::demo 使用 el-time-select 标签，分别通过`star`、`end`和`step`指定可选的起始时间、结束时间和步长 :::demo 使用 el-time-select 标签，分别通过`star`、`end`和`step`指定可选的起始时间、结束时间和步长
```html ```html
<el-time-select <el-time-select
v-model="value1" v-model="value"
:picker-options="{ :picker-options="{
start: '08:30', start: '08:30',
step: '00:15', step: '00:15',
@ -22,7 +22,7 @@
export default { export default {
data() { data() {
return { return {
value1: '' value: ''
}; };
} }
} }
@ -38,7 +38,7 @@
```html ```html
<template> <template>
<el-time-picker <el-time-picker
v-model="value2" v-model="value1"
:picker-options="{ :picker-options="{
selectableRange: '18:30:00 - 20:30:00' selectableRange: '18:30:00 - 20:30:00'
}" }"
@ -46,7 +46,7 @@
</el-time-picker> </el-time-picker>
<el-time-picker <el-time-picker
arrow-control arrow-control
v-model="value3" v-model="value2"
:picker-options="{ :picker-options="{
selectableRange: '18:30:00 - 20:30:00' selectableRange: '18:30:00 - 20:30:00'
}" }"
@ -58,8 +58,8 @@
export default { export default {
data() { data() {
return { return {
value2: new Date(2016, 9, 10, 18, 40), value1: new Date(2016, 9, 10, 18, 40),
value3: new Date(2016, 9, 10, 18, 40) value2: new Date(2016, 9, 10, 18, 40)
}; };
} }
} }
@ -117,7 +117,7 @@
<template> <template>
<el-time-picker <el-time-picker
is-range is-range
v-model="value4" v-model="value1"
range-separator="至" range-separator="至"
start-placeholder="开始时间" start-placeholder="开始时间"
end-placeholder="结束时间" end-placeholder="结束时间"
@ -126,7 +126,7 @@
<el-time-picker <el-time-picker
is-range is-range
arrow-control arrow-control
v-model="value5" v-model="value2"
range-separator="至" range-separator="至"
start-placeholder="开始时间" start-placeholder="开始时间"
end-placeholder="结束时间" end-placeholder="结束时间"
@ -138,8 +138,8 @@
export default { export default {
data() { data() {
return { return {
value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)], value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)] value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
}; };
} }
} }

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

@ -139,7 +139,7 @@
```html ```html
<el-tree <el-tree
:props="props" :props="props"
:load="loadNode1" :load="loadNode"
lazy lazy
show-checkbox> show-checkbox>
</el-tree> </el-tree>
@ -156,7 +156,7 @@
}; };
}, },
methods: { methods: {
loadNode1(node, resolve) { loadNode(node, resolve) {
if (node.level === 0) { if (node.level === 0) {
return resolve([{ name: 'region' }]); return resolve([{ name: 'region' }]);
} }
@ -546,14 +546,14 @@
:props="defaultProps" :props="defaultProps"
default-expand-all default-expand-all
:filter-node-method="filterNode" :filter-node-method="filterNode"
ref="tree2"> ref="tree">
</el-tree> </el-tree>
<script> <script>
export default { export default {
watch: { watch: {
filterText(val) { filterText(val) {
this.$refs.tree2.filter(val); this.$refs.tree.filter(val);
} }
}, },