mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-12-02 04:08:10 +08:00
Docs: Rename variable in docs (#15185)
This commit is contained in:
刘鹏龙
hetech
parent
8bb1e0a2d5
commit
b240f0e670
@ -45,14 +45,14 @@ Used to show the feedback of Success, Warning, Message and Error activities.
|
||||
<template>
|
||||
<el-button :plain="true" @click="open2">success</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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
open1() {
|
||||
this.$message('This is a message.');
|
||||
},
|
||||
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`.
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click="open5">message</el-button>
|
||||
<el-button :plain="true" @click="open6">success</el-button>
|
||||
<el-button :plain="true" @click="open7">warning</el-button>
|
||||
<el-button :plain="true" @click="open8">error</el-button>
|
||||
<el-button :plain="true" @click="open1">message</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="open4">error</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open5() {
|
||||
open1() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'This is a message.'
|
||||
});
|
||||
},
|
||||
|
||||
open6() {
|
||||
open2() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Congrats, this is a success message.',
|
||||
@ -109,7 +109,7 @@ A close button can be added.
|
||||
});
|
||||
},
|
||||
|
||||
open7() {
|
||||
open3() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Warning, this is a warning message.',
|
||||
@ -117,7 +117,7 @@ A close button can be added.
|
||||
});
|
||||
},
|
||||
|
||||
open8() {
|
||||
open4() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Oops, this is a error message.',
|
||||
|
||||
@ -10,7 +10,7 @@ Displays a global notification message at a corner of the page.
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open">
|
||||
@click="open1">
|
||||
Closes automatically
|
||||
</el-button>
|
||||
<el-button
|
||||
@ -23,7 +23,7 @@ Displays a global notification message at a corner of the page.
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
open1() {
|
||||
const h = this.$createElement;
|
||||
|
||||
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.
|
||||
|
||||
:::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
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open3">
|
||||
@click="open1">
|
||||
Success
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open4">
|
||||
@click="open2">
|
||||
Warning
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open5">
|
||||
@click="open3">
|
||||
Info
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open6">
|
||||
@click="open4">
|
||||
Error
|
||||
</el-button>
|
||||
</template>
|
||||
@ -77,7 +77,7 @@ We provide four types: success, warning, info and error.
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open3() {
|
||||
open1() {
|
||||
this.$notify({
|
||||
title: 'Success',
|
||||
message: 'This is a success message',
|
||||
@ -85,7 +85,7 @@ We provide four types: success, warning, info and error.
|
||||
});
|
||||
},
|
||||
|
||||
open4() {
|
||||
open2() {
|
||||
this.$notify({
|
||||
title: 'Warning',
|
||||
message: 'This is a warning message',
|
||||
@ -93,14 +93,14 @@ We provide four types: success, warning, info and error.
|
||||
});
|
||||
},
|
||||
|
||||
open5() {
|
||||
open3() {
|
||||
this.$notify.info({
|
||||
title: 'Info',
|
||||
message: 'This is an info message'
|
||||
});
|
||||
},
|
||||
|
||||
open6() {
|
||||
open4() {
|
||||
this.$notify.error({
|
||||
title: 'Error',
|
||||
message: 'This is an error message'
|
||||
@ -121,22 +121,22 @@ Notification can emerge from any corner you like.
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open7">
|
||||
@click="open1">
|
||||
Top Right
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open8">
|
||||
@click="open2">
|
||||
Bottom Right
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open9">
|
||||
@click="open3">
|
||||
Bottom Left
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open10">
|
||||
@click="open4">
|
||||
Top Left
|
||||
</el-button>
|
||||
</template>
|
||||
@ -144,14 +144,14 @@ Notification can emerge from any corner you like.
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open7() {
|
||||
open1() {
|
||||
this.$notify({
|
||||
title: 'Custom Position',
|
||||
message: 'I\'m at the top right corner'
|
||||
});
|
||||
},
|
||||
|
||||
open8() {
|
||||
open2() {
|
||||
this.$notify({
|
||||
title: 'Custom Position',
|
||||
message: 'I\'m at the bottom right corner',
|
||||
@ -159,7 +159,7 @@ Notification can emerge from any corner you like.
|
||||
});
|
||||
},
|
||||
|
||||
open9() {
|
||||
open3() {
|
||||
this.$notify({
|
||||
title: 'Custom Position',
|
||||
message: 'I\'m at the bottom left corner',
|
||||
@ -167,7 +167,7 @@ Notification can emerge from any corner you like.
|
||||
});
|
||||
},
|
||||
|
||||
open10() {
|
||||
open4() {
|
||||
this.$notify({
|
||||
title: 'Custom Position',
|
||||
message: 'I\'m at the top left corner',
|
||||
@ -189,7 +189,7 @@ Customize Notification's offset from the edge of the screen.
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open11">
|
||||
@click="open">
|
||||
Notification with offset
|
||||
</el-button>
|
||||
</template>
|
||||
@ -197,7 +197,7 @@ Customize Notification's offset from the edge of the screen.
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open11() {
|
||||
open() {
|
||||
this.$notify.success({
|
||||
title: 'Success',
|
||||
message: 'This is a success message',
|
||||
@ -218,7 +218,7 @@ Customize Notification's offset from the edge of the screen.
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open12">
|
||||
@click="open">
|
||||
Use HTML String
|
||||
</el-button>
|
||||
</template>
|
||||
@ -226,7 +226,7 @@ Customize Notification's offset from the edge of the screen.
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open12() {
|
||||
open() {
|
||||
this.$notify({
|
||||
title: 'HTML String',
|
||||
dangerouslyUseHTMLString: true,
|
||||
@ -252,7 +252,7 @@ It is possible to hide the close button
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open13">
|
||||
@click="open">
|
||||
Hide close button
|
||||
</el-button>
|
||||
</template>
|
||||
@ -260,7 +260,7 @@ It is possible to hide the close button
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open13() {
|
||||
open() {
|
||||
this.$notify.success({
|
||||
title: 'Info',
|
||||
message: 'This is a message without close button',
|
||||
|
||||
@ -115,11 +115,11 @@ Of course, you can nest other operations. It's more light-weight than using a di
|
||||
<el-popover
|
||||
placement="top"
|
||||
width="160"
|
||||
v-model="visible2">
|
||||
v-model="visible">
|
||||
<p>Are you sure to delete this?</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="visible2 = false">cancel</el-button>
|
||||
<el-button type="primary" size="mini" @click="visible2 = false">confirm</el-button>
|
||||
<el-button size="mini" type="text" @click="visible = false">cancel</el-button>
|
||||
<el-button type="primary" size="mini" @click="visible = false">confirm</el-button>
|
||||
</div>
|
||||
<el-button slot="reference">Delete</el-button>
|
||||
</el-popover>
|
||||
@ -128,7 +128,7 @@ Of course, you can nest other operations. It's more light-weight than using a di
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible2: false,
|
||||
visible: false,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -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.
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value5" multiple placeholder="Select">
|
||||
<el-select v-model="value1" multiple placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
@ -199,7 +199,7 @@ Multiple select uses tags to display selected options.
|
||||
</el-select>
|
||||
|
||||
<el-select
|
||||
v-model="value11"
|
||||
v-model="value2"
|
||||
multiple
|
||||
collapse-tags
|
||||
style="margin-left: 20px;"
|
||||
@ -233,8 +233,8 @@ Multiple select uses tags to display selected options.
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value5: [],
|
||||
value11: []
|
||||
value1: [],
|
||||
value2: []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -32,13 +32,13 @@ Switch is used for switching between two opposing states.
|
||||
|
||||
```html
|
||||
<el-switch
|
||||
v-model="value3"
|
||||
v-model="value1"
|
||||
active-text="Pay by month"
|
||||
inactive-text="Pay by year">
|
||||
</el-switch>
|
||||
<el-switch
|
||||
style="display: block"
|
||||
v-model="value4"
|
||||
v-model="value2"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949"
|
||||
active-text="Pay by month"
|
||||
@ -49,8 +49,8 @@ Switch is used for switching between two opposing states.
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value3: true,
|
||||
value4: true
|
||||
value1: 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.
|
||||
|
||||
```html
|
||||
<el-tooltip :content="'Switch value: ' + value5" placement="top">
|
||||
<el-tooltip :content="'Switch value: ' + value" placement="top">
|
||||
<el-switch
|
||||
v-model="value5"
|
||||
v-model="value"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949"
|
||||
active-value="100"
|
||||
@ -77,7 +77,7 @@ Switch is used for switching between two opposing states.
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value5: '100'
|
||||
value: '100'
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -92,11 +92,11 @@ Switch is used for switching between two opposing states.
|
||||
|
||||
```html
|
||||
<el-switch
|
||||
v-model="value6"
|
||||
v-model="value1"
|
||||
disabled>
|
||||
</el-switch>
|
||||
<el-switch
|
||||
v-model="value7"
|
||||
v-model="value2"
|
||||
disabled>
|
||||
</el-switch>
|
||||
|
||||
@ -104,8 +104,8 @@ Switch is used for switching between two opposing states.
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value6: true,
|
||||
value7: false
|
||||
value1: true,
|
||||
value2: false
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -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`.
|
||||
```html
|
||||
<el-time-select
|
||||
v-model="value1"
|
||||
v-model="value"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
@ -22,7 +22,7 @@ Provide a list of fixed time for users to choose.
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: ''
|
||||
value: ''
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -39,7 +39,7 @@ Can pick an arbitrary time.
|
||||
```html
|
||||
<template>
|
||||
<el-time-picker
|
||||
v-model="value2"
|
||||
v-model="value1"
|
||||
:picker-options="{
|
||||
selectableRange: '18:30:00 - 20:30:00'
|
||||
}"
|
||||
@ -47,7 +47,7 @@ Can pick an arbitrary time.
|
||||
</el-time-picker>
|
||||
<el-time-picker
|
||||
arrow-control
|
||||
v-model="value3"
|
||||
v-model="value2"
|
||||
:picker-options="{
|
||||
selectableRange: '18:30:00 - 20:30:00'
|
||||
}"
|
||||
@ -59,8 +59,8 @@ Can pick an arbitrary time.
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value2: new Date(2016, 9, 10, 18, 40),
|
||||
value3: new Date(2016, 9, 10, 18, 40)
|
||||
value1: 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>
|
||||
<el-time-picker
|
||||
is-range
|
||||
v-model="value4"
|
||||
v-model="value1"
|
||||
range-separator="To"
|
||||
start-placeholder="Start time"
|
||||
end-placeholder="End time">
|
||||
@ -126,7 +126,7 @@ Can pick an arbitrary time range.
|
||||
<el-time-picker
|
||||
is-range
|
||||
arrow-control
|
||||
v-model="value5"
|
||||
v-model="value2"
|
||||
range-separator="To"
|
||||
start-placeholder="Start time"
|
||||
end-placeholder="End time">
|
||||
@ -137,8 +137,8 @@ Can pick an arbitrary time range.
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value4: [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)]
|
||||
value1: [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)]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -139,7 +139,7 @@ Used for node selection.
|
||||
```html
|
||||
<el-tree
|
||||
:props="props"
|
||||
:load="loadNode1"
|
||||
:load="loadNode"
|
||||
lazy
|
||||
show-checkbox>
|
||||
</el-tree>
|
||||
@ -156,7 +156,7 @@ Used for node selection.
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
loadNode1(node, resolve) {
|
||||
loadNode(node, resolve) {
|
||||
if (node.level === 0) {
|
||||
return resolve([{ name: 'region' }]);
|
||||
}
|
||||
@ -547,14 +547,14 @@ Tree nodes can be filtered
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
:filter-node-method="filterNode"
|
||||
ref="tree2">
|
||||
ref="tree">
|
||||
</el-tree>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
watch: {
|
||||
filterText(val) {
|
||||
this.$refs.tree2.filter(val);
|
||||
this.$refs.tree.filter(val);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -45,14 +45,14 @@ Utilizados para mostrar retroalimentacion de Success, Warning, Message y Error a
|
||||
<template>
|
||||
<el-button :plain="true" @click="open2">success</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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
open1() {
|
||||
this.$message('This is a message.');
|
||||
},
|
||||
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`.
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click="open5">message</el-button>
|
||||
<el-button :plain="true" @click="open6">success</el-button>
|
||||
<el-button :plain="true" @click="open7">warning</el-button>
|
||||
<el-button :plain="true" @click="open8">error</el-button>
|
||||
<el-button :plain="true" @click="open1">message</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="open4">error</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open5() {
|
||||
open1() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'This is a message.'
|
||||
});
|
||||
},
|
||||
|
||||
open6() {
|
||||
open2() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Congrats, this is a success message.',
|
||||
@ -109,7 +109,7 @@ Un boton para cerrar que puede ser agregado.
|
||||
});
|
||||
},
|
||||
|
||||
open7() {
|
||||
open3() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Warning, this is a warning message.',
|
||||
@ -117,7 +117,7 @@ Un boton para cerrar que puede ser agregado.
|
||||
});
|
||||
},
|
||||
|
||||
open8() {
|
||||
open4() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Oops, this is a error message.',
|
||||
|
||||
@ -10,7 +10,7 @@ Muestra un mensaje de notificación global en una esquina de la página.
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open">
|
||||
@click="open1">
|
||||
Closes automatically
|
||||
</el-button>
|
||||
<el-button
|
||||
@ -23,7 +23,7 @@ Muestra un mensaje de notificación global en una esquina de la página.
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
open1() {
|
||||
const h = this.$createElement;
|
||||
|
||||
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.
|
||||
|
||||
:::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
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open3">
|
||||
@click="open1">
|
||||
Success
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open4">
|
||||
@click="open2">
|
||||
Warning
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open5">
|
||||
@click="open3">
|
||||
Info
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open6">
|
||||
@click="open4">
|
||||
Error
|
||||
</el-button>
|
||||
</template>
|
||||
@ -78,7 +78,7 @@ Proporcionamos cuatro tipos: success, warning, info y error.
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open3() {
|
||||
open1() {
|
||||
this.$notify({
|
||||
title: 'Success',
|
||||
message: 'This is a success message',
|
||||
@ -86,7 +86,7 @@ Proporcionamos cuatro tipos: success, warning, info y error.
|
||||
});
|
||||
},
|
||||
|
||||
open4() {
|
||||
open2() {
|
||||
this.$notify({
|
||||
title: 'Warning',
|
||||
message: 'This is a warning message',
|
||||
@ -94,14 +94,14 @@ Proporcionamos cuatro tipos: success, warning, info y error.
|
||||
});
|
||||
},
|
||||
|
||||
open5() {
|
||||
open3() {
|
||||
this.$notify.info({
|
||||
title: 'Info',
|
||||
message: 'This is an info message'
|
||||
});
|
||||
},
|
||||
|
||||
open6() {
|
||||
open4() {
|
||||
this.$notify.error({
|
||||
title: 'Error',
|
||||
message: 'This is an error message'
|
||||
@ -123,22 +123,22 @@ La notificación puede surgir de cualquier rincón que uno desee.
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open7">
|
||||
@click="open1">
|
||||
Top Right
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open8">
|
||||
@click="open2">
|
||||
Bottom Right
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open9">
|
||||
@click="open3">
|
||||
Bottom Left
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open10">
|
||||
@click="open4">
|
||||
Top Left
|
||||
</el-button>
|
||||
</template>
|
||||
@ -146,14 +146,14 @@ La notificación puede surgir de cualquier rincón que uno desee.
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open7() {
|
||||
open1() {
|
||||
this.$notify({
|
||||
title: 'Custom Position',
|
||||
message: 'I\'m at the top right corner'
|
||||
});
|
||||
},
|
||||
|
||||
open8() {
|
||||
open2() {
|
||||
this.$notify({
|
||||
title: 'Custom Position',
|
||||
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({
|
||||
title: 'Custom Position',
|
||||
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({
|
||||
title: 'Custom Position',
|
||||
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>
|
||||
<el-button
|
||||
plain
|
||||
@click="open11">
|
||||
@click="open">
|
||||
Notification with offset
|
||||
</el-button>
|
||||
</template>
|
||||
@ -200,7 +200,7 @@ Personalizar el desplazamiento de notificación desde el borde de la pantalla.
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open11() {
|
||||
open() {
|
||||
this.$notify.success({
|
||||
title: 'Success',
|
||||
message: 'This is a success message',
|
||||
@ -222,7 +222,7 @@ Personalizar el desplazamiento de notificación desde el borde de la pantalla.
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open12">
|
||||
@click="open">
|
||||
Use HTML String
|
||||
</el-button>
|
||||
</template>
|
||||
@ -230,7 +230,7 @@ Personalizar el desplazamiento de notificación desde el borde de la pantalla.
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open12() {
|
||||
open() {
|
||||
this.$notify({
|
||||
title: 'HTML String',
|
||||
dangerouslyUseHTMLString: true,
|
||||
@ -259,7 +259,7 @@ Es posible ocultar el botón de cerrar
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open13">
|
||||
@click="open">
|
||||
Hide close button
|
||||
</el-button>
|
||||
</template>
|
||||
@ -267,7 +267,7 @@ Es posible ocultar el botón de cerrar
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open13() {
|
||||
open() {
|
||||
this.$notify.success({
|
||||
title: 'Info',
|
||||
message: 'This is a message without close button',
|
||||
|
||||
@ -114,11 +114,11 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
|
||||
<el-popover
|
||||
placement="top"
|
||||
width="160"
|
||||
v-model="visible2">
|
||||
v-model="visible">
|
||||
<p>Are you sure to delete this?</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="visible2 = false">cancel</el-button>
|
||||
<el-button type="primary" size="mini" @click="visible2 = false">confirm</el-button>
|
||||
<el-button size="mini" type="text" @click="visible = false">cancel</el-button>
|
||||
<el-button type="primary" size="mini" @click="visible = false">confirm</el-button>
|
||||
</div>
|
||||
<el-button slot="reference">Delete</el-button>
|
||||
</el-popover>
|
||||
@ -127,7 +127,7 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible2: false,
|
||||
visible: false,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -192,7 +192,7 @@ Selección multiple utiliza tags para mostrar las opciones seleccionadas.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value5" multiple placeholder="Select">
|
||||
<el-select v-model="value1" multiple placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
@ -202,7 +202,7 @@ Selección multiple utiliza tags para mostrar las opciones seleccionadas.
|
||||
</el-select>
|
||||
|
||||
<el-select
|
||||
v-model="value11"
|
||||
v-model="value2"
|
||||
multiple
|
||||
collapse-tags
|
||||
style="margin-left: 20px;"
|
||||
@ -236,8 +236,8 @@ Selección multiple utiliza tags para mostrar las opciones seleccionadas.
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value5: [],
|
||||
value11: []
|
||||
value1: [],
|
||||
value2: []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -64,14 +64,14 @@ Las opciones pueden ser discretas.
|
||||
<div class="block">
|
||||
<span class="demonstration">Breakpoints not displayed</span>
|
||||
<el-slider
|
||||
v-model="value"
|
||||
v-model="value1"
|
||||
:step="10">
|
||||
</el-slider>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Breakpoints displayed</span>
|
||||
<el-slider
|
||||
v-model="value"
|
||||
v-model="value2"
|
||||
:step="10"
|
||||
show-stops>
|
||||
</el-slider>
|
||||
@ -82,8 +82,8 @@ Las opciones pueden ser discretas.
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 0,
|
||||
value: 0
|
||||
value1: 0,
|
||||
value2: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -33,13 +33,13 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
|
||||
|
||||
```html
|
||||
<el-switch
|
||||
v-model="value3"
|
||||
v-model="value1"
|
||||
active-text="Pay by month"
|
||||
inactive-text="Pay by year">
|
||||
</el-switch>
|
||||
<el-switch
|
||||
style="display: block"
|
||||
v-model="value4"
|
||||
v-model="value2"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949"
|
||||
active-text="Pay by month"
|
||||
@ -50,8 +50,8 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value3: true,
|
||||
value4: true
|
||||
value1: 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`.
|
||||
|
||||
```html
|
||||
<el-tooltip :content="'Switch value: ' + value5" placement="top">
|
||||
<el-tooltip :content="'Switch value: ' + value" placement="top">
|
||||
<el-switch
|
||||
v-model="value5"
|
||||
v-model="value"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949"
|
||||
active-value="100"
|
||||
@ -78,7 +78,7 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value5: '100'
|
||||
value: '100'
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -93,11 +93,11 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
|
||||
|
||||
```html
|
||||
<el-switch
|
||||
v-model="value6"
|
||||
v-model="value1"
|
||||
disabled>
|
||||
</el-switch>
|
||||
<el-switch
|
||||
v-model="value7"
|
||||
v-model="value2"
|
||||
disabled>
|
||||
</el-switch>
|
||||
|
||||
@ -105,8 +105,8 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value6: true,
|
||||
value7: false
|
||||
value1: true,
|
||||
value2: false
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -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`.
|
||||
```html
|
||||
<el-time-select
|
||||
v-model="value1"
|
||||
v-model="value"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
@ -22,7 +22,7 @@ Provee una lista de tiempo fijo para que los usuarios escogan.
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: ''
|
||||
value: ''
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -39,7 +39,7 @@ Un tiempo arbitrario puede ser escogido.
|
||||
```html
|
||||
<template>
|
||||
<el-time-picker
|
||||
v-model="value2"
|
||||
v-model="value1"
|
||||
:picker-options="{
|
||||
selectableRange: '18:30:00 - 20:30:00'
|
||||
}"
|
||||
@ -47,7 +47,7 @@ Un tiempo arbitrario puede ser escogido.
|
||||
</el-time-picker>
|
||||
<el-time-picker
|
||||
arrow-control
|
||||
v-model="value3"
|
||||
v-model="value2"
|
||||
:picker-options="{
|
||||
selectableRange: '18:30:00 - 20:30:00'
|
||||
}"
|
||||
@ -59,8 +59,8 @@ Un tiempo arbitrario puede ser escogido.
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value2: new Date(2016, 9, 10, 18, 40),
|
||||
value3: new Date(2016, 9, 10, 18, 40)
|
||||
value1: 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>
|
||||
<el-time-picker
|
||||
is-range
|
||||
v-model="value4"
|
||||
v-model="value1"
|
||||
range-separator="To"
|
||||
start-placeholder="Start time"
|
||||
end-placeholder="End time">
|
||||
@ -126,7 +126,7 @@ Es posible escoger un rango de tiempo arbitrario.
|
||||
<el-time-picker
|
||||
is-range
|
||||
arrow-control
|
||||
v-model="value5"
|
||||
v-model="value2"
|
||||
range-separator="To"
|
||||
start-placeholder="Start time"
|
||||
end-placeholder="End time">
|
||||
@ -137,8 +137,8 @@ Es posible escoger un rango de tiempo arbitrario.
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value4: [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)]
|
||||
value1: [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)]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -139,7 +139,7 @@ Usado para la selección de nodos.
|
||||
```html
|
||||
<el-tree
|
||||
:props="props"
|
||||
:load="loadNode1"
|
||||
:load="loadNode"
|
||||
lazy
|
||||
show-checkbox>
|
||||
</el-tree>
|
||||
@ -156,7 +156,7 @@ Usado para la selección de nodos.
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
loadNode1(node, resolve) {
|
||||
loadNode(node, resolve) {
|
||||
if (node.level === 0) {
|
||||
return resolve([{ name: 'region' }]);
|
||||
}
|
||||
@ -547,14 +547,14 @@ Los nodos del árbol se pueden filtrar.
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
:filter-node-method="filterNode"
|
||||
ref="tree2">
|
||||
ref="tree">
|
||||
</el-tree>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
watch: {
|
||||
filterText(val) {
|
||||
this.$refs.tree2.filter(val);
|
||||
this.$refs.tree.filter(val);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -45,14 +45,14 @@ Utilisé pour montrer un retour d'activités Success, Warning, Message ou Error.
|
||||
<template>
|
||||
<el-button :plain="true" @click="open2">success</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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
open1() {
|
||||
this.$message('Ceci est un message.');
|
||||
},
|
||||
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`.
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click="open5">message</el-button>
|
||||
<el-button :plain="true" @click="open6">success</el-button>
|
||||
<el-button :plain="true" @click="open7">warning</el-button>
|
||||
<el-button :plain="true" @click="open8">error</el-button>
|
||||
<el-button :plain="true" @click="open1">message</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="open4">error</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open5() {
|
||||
open1() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Ceci est un message.'
|
||||
});
|
||||
},
|
||||
|
||||
open6() {
|
||||
open2() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
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({
|
||||
showClose: true,
|
||||
message: 'Attention, ceci est un avertissement.',
|
||||
@ -117,7 +117,7 @@ Un bouton de fermeture peut être ajouté.
|
||||
});
|
||||
},
|
||||
|
||||
open8() {
|
||||
open4() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Ouups, ceci est une erreur.',
|
||||
|
||||
@ -10,7 +10,7 @@ Affiche une notification globale dans un coin de la page.
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open">
|
||||
@click="open1">
|
||||
Se ferme automatiquement
|
||||
</el-button>
|
||||
<el-button
|
||||
@ -23,7 +23,7 @@ Affiche une notification globale dans un coin de la page.
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
open1() {
|
||||
const h = this.$createElement;
|
||||
|
||||
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.
|
||||
|
||||
:::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
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open3">
|
||||
@click="open1">
|
||||
Success
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open4">
|
||||
@click="open2">
|
||||
Warning
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open5">
|
||||
@click="open3">
|
||||
Info
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open6">
|
||||
@click="open4">
|
||||
Error
|
||||
</el-button>
|
||||
</template>
|
||||
@ -77,7 +77,7 @@ We provide four types: success, warning, info and error.
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open3() {
|
||||
open1() {
|
||||
this.$notify({
|
||||
title: 'Success',
|
||||
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({
|
||||
title: 'Warning',
|
||||
message: 'Ceci est un avertissement',
|
||||
@ -93,14 +93,14 @@ We provide four types: success, warning, info and error.
|
||||
});
|
||||
},
|
||||
|
||||
open5() {
|
||||
open3() {
|
||||
this.$notify.info({
|
||||
title: 'Info',
|
||||
message: 'Ceci est une information'
|
||||
});
|
||||
},
|
||||
|
||||
open6() {
|
||||
open4() {
|
||||
this.$notify.error({
|
||||
title: 'Error',
|
||||
message: 'Ceci est une erreur'
|
||||
@ -121,22 +121,22 @@ La notification peut apparaître dans le coin de votre choix.
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open7">
|
||||
@click="open1">
|
||||
Top Right
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open8">
|
||||
@click="open2">
|
||||
Bottom Right
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open9">
|
||||
@click="open3">
|
||||
Bottom Left
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open10">
|
||||
@click="open4">
|
||||
Top Left
|
||||
</el-button>
|
||||
</template>
|
||||
@ -144,14 +144,14 @@ La notification peut apparaître dans le coin de votre choix.
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open7() {
|
||||
open1() {
|
||||
this.$notify({
|
||||
title: 'Custom Position',
|
||||
message: 'Je suis dans le coin supérieur droit'
|
||||
});
|
||||
},
|
||||
|
||||
open8() {
|
||||
open2() {
|
||||
this.$notify({
|
||||
title: 'Custom Position',
|
||||
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({
|
||||
title: 'Custom Position',
|
||||
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({
|
||||
title: 'Custom Position',
|
||||
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>
|
||||
<el-button
|
||||
plain
|
||||
@click="open11">
|
||||
@click="open">
|
||||
Notification avec décalage
|
||||
</el-button>
|
||||
</template>
|
||||
@ -197,7 +197,7 @@ Vous pouvez décaler l'emplacement de la notification par rapport au bord de la
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open11() {
|
||||
open() {
|
||||
this.$notify.success({
|
||||
title: 'Success',
|
||||
message: 'Ceci est un message de succès',
|
||||
@ -220,7 +220,7 @@ L'attribut `message` supporte le HTML.
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open12">
|
||||
@click="open">
|
||||
Utiliser du HTML
|
||||
</el-button>
|
||||
</template>
|
||||
@ -228,7 +228,7 @@ L'attribut `message` supporte le HTML.
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open12() {
|
||||
open() {
|
||||
this.$notify({
|
||||
title: 'HTML String',
|
||||
dangerouslyUseHTMLString: true,
|
||||
@ -255,7 +255,7 @@ Il est possible de cacher le bouton de fermeture.
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open13">
|
||||
@click="open">
|
||||
Bouton de fermeture caché
|
||||
</el-button>
|
||||
</template>
|
||||
@ -263,7 +263,7 @@ Il est possible de cacher le bouton de fermeture.
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open13() {
|
||||
open() {
|
||||
this.$notify.success({
|
||||
title: 'Info',
|
||||
message: 'Ceci est un message sans bouton de fermeture',
|
||||
|
||||
@ -115,11 +115,11 @@ Vous pouvez aussi imbriquer des opérations. Procéder ainsi est plus léger que
|
||||
<el-popover
|
||||
placement="top"
|
||||
width="160"
|
||||
v-model="visible2">
|
||||
v-model="visible">
|
||||
<p>Voulez-vous vraiment supprimer ceci?</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="visible2 = false">Annuler</el-button>
|
||||
<el-button type="primary" size="mini" @click="visible2 = false">Confirmer</el-button>
|
||||
<el-button size="mini" type="text" @click="visible = false">Annuler</el-button>
|
||||
<el-button type="primary" size="mini" @click="visible = false">Confirmer</el-button>
|
||||
</div>
|
||||
<el-button slot="reference">Supprimer</el-button>
|
||||
</el-popover>
|
||||
@ -128,7 +128,7 @@ Vous pouvez aussi imbriquer des opérations. Procéder ainsi est plus léger que
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible2: false,
|
||||
visible: false,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -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`.
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value5" multiple placeholder="Select">
|
||||
<el-select v-model="value1" multiple placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
@ -199,7 +199,7 @@ Les sélecteurs multiples utilisent des tags pour afficher les différentes opti
|
||||
</el-select>
|
||||
|
||||
<el-select
|
||||
v-model="value11"
|
||||
v-model="value2"
|
||||
multiple
|
||||
collapse-tags
|
||||
style="margin-left: 20px;"
|
||||
@ -233,8 +233,8 @@ Les sélecteurs multiples utilisent des tags pour afficher les différentes opti
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value5: [],
|
||||
value11: []
|
||||
value1: [],
|
||||
value2: []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -34,13 +34,13 @@ Switch est utilisé pour choisir entre deux états opposés.
|
||||
|
||||
```html
|
||||
<el-switch
|
||||
v-model="value3"
|
||||
v-model="value1"
|
||||
active-text="Paiement mensuel"
|
||||
inactive-text="Paiement annuel">
|
||||
</el-switch>
|
||||
<el-switch
|
||||
style="display: block"
|
||||
v-model="value4"
|
||||
v-model="value2"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949"
|
||||
active-text="Paiement mensuel"
|
||||
@ -51,8 +51,8 @@ Switch est utilisé pour choisir entre deux états opposés.
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value3: true,
|
||||
value4: true
|
||||
value1: 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`.
|
||||
|
||||
```html
|
||||
<el-tooltip :content="'Valeur de l\'état: ' + value5" placement="top">
|
||||
<el-tooltip :content="'Valeur de l\'état: ' + value" placement="top">
|
||||
<el-switch
|
||||
v-model="value5"
|
||||
v-model="value"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949"
|
||||
active-value="100"
|
||||
@ -79,7 +79,7 @@ Switch est utilisé pour choisir entre deux états opposés.
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value5: '100'
|
||||
value: '100'
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -94,11 +94,11 @@ Switch est utilisé pour choisir entre deux états opposés.
|
||||
|
||||
```html
|
||||
<el-switch
|
||||
v-model="value6"
|
||||
v-model="value1"
|
||||
disabled>
|
||||
</el-switch>
|
||||
<el-switch
|
||||
v-model="value7"
|
||||
v-model="value2"
|
||||
disabled>
|
||||
</el-switch>
|
||||
|
||||
@ -106,8 +106,8 @@ Switch est utilisé pour choisir entre deux états opposés.
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value6: true,
|
||||
value7: false
|
||||
value1: true,
|
||||
value2: false
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -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`.
|
||||
```html
|
||||
<el-time-select
|
||||
v-model="value1"
|
||||
v-model="value"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
@ -22,7 +22,7 @@ Vous pouvez fournir une liste d'horaires fixés pour que l'utilisateur en choisi
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: ''
|
||||
value: ''
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -39,7 +39,7 @@ Vous pouvez aussi laisser l'utilisateur choisir librement un horaire.
|
||||
```html
|
||||
<template>
|
||||
<el-time-picker
|
||||
v-model="value2"
|
||||
v-model="value1"
|
||||
:picker-options="{
|
||||
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
|
||||
arrow-control
|
||||
v-model="value3"
|
||||
v-model="value2"
|
||||
:picker-options="{
|
||||
selectableRange: '18:30:00 - 20:30:00'
|
||||
}"
|
||||
@ -59,8 +59,8 @@ Vous pouvez aussi laisser l'utilisateur choisir librement un horaire.
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value2: new Date(2016, 9, 10, 18, 40),
|
||||
value3: new Date(2016, 9, 10, 18, 40)
|
||||
value1: 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>
|
||||
<el-time-picker
|
||||
is-range
|
||||
v-model="value4"
|
||||
v-model="value1"
|
||||
range-separator="To"
|
||||
start-placeholder="Horaire de début"
|
||||
end-placeholder="Horaire de fin">
|
||||
@ -126,7 +126,7 @@ Vous pouvez également définir un intervalle libre.
|
||||
<el-time-picker
|
||||
is-range
|
||||
arrow-control
|
||||
v-model="value5"
|
||||
v-model="value2"
|
||||
range-separator="To"
|
||||
start-placeholder="Horaire de début"
|
||||
end-placeholder="Horaire de fin">
|
||||
@ -137,8 +137,8 @@ Vous pouvez également définir un intervalle libre.
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value4: [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)]
|
||||
value1: [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)]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -139,7 +139,7 @@ Vous pouvez activer la sélection des noeuds.
|
||||
```html
|
||||
<el-tree
|
||||
:props="props"
|
||||
:load="loadNode1"
|
||||
:load="loadNode"
|
||||
lazy
|
||||
show-checkbox>
|
||||
</el-tree>
|
||||
@ -156,7 +156,7 @@ Vous pouvez activer la sélection des noeuds.
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
loadNode1(node, resolve) {
|
||||
loadNode(node, resolve) {
|
||||
if (node.level === 0) {
|
||||
return resolve([{ name: 'region' }]);
|
||||
}
|
||||
@ -550,14 +550,14 @@ Les noeuds peuvent être filtrés par mot-clé.
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
:filter-node-method="filterNode"
|
||||
ref="tree2">
|
||||
ref="tree">
|
||||
</el-tree>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
watch: {
|
||||
filterText(val) {
|
||||
this.$refs.tree2.filter(val);
|
||||
this.$refs.tree.filter(val);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -45,14 +45,14 @@
|
||||
<template>
|
||||
<el-button :plain="true" @click="open2">成功</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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
open1() {
|
||||
this.$message('这是一条消息提示');
|
||||
},
|
||||
open2() {
|
||||
@ -85,23 +85,23 @@
|
||||
:::demo 默认的 Message 是不可以被人工关闭的，如果需要可手动关闭的 Message，可以使用`showClose`字段。此外，和 Notification 一样，Message 拥有可控的`duration`，设置`0`为不会被自动关闭，默认为 3000 毫秒。
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click="open5">消息</el-button>
|
||||
<el-button :plain="true" @click="open6">成功</el-button>
|
||||
<el-button :plain="true" @click="open7">警告</el-button>
|
||||
<el-button :plain="true" @click="open8">错误</el-button>
|
||||
<el-button :plain="true" @click="open1">消息</el-button>
|
||||
<el-button :plain="true" @click="open2">成功</el-button>
|
||||
<el-button :plain="true" @click="open3">警告</el-button>
|
||||
<el-button :plain="true" @click="open4">错误</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open5() {
|
||||
open1() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '这是一条消息提示'
|
||||
});
|
||||
},
|
||||
|
||||
open6() {
|
||||
open2() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '恭喜你，这是一条成功消息',
|
||||
@ -109,7 +109,7 @@
|
||||
});
|
||||
},
|
||||
|
||||
open7() {
|
||||
open3() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '警告哦，这是一条警告消息',
|
||||
@ -117,7 +117,7 @@
|
||||
});
|
||||
},
|
||||
|
||||
open8() {
|
||||
open4() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '错了哦，这是一条错误消息',
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open">
|
||||
@click="open1">
|
||||
可自动关闭
|
||||
</el-button>
|
||||
<el-button
|
||||
@ -24,7 +24,7 @@
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
open1() {
|
||||
const h = this.$createElement;
|
||||
|
||||
this.$notify({
|
||||
@ -50,27 +50,27 @@
|
||||
|
||||
带有 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
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open3">
|
||||
@click="open1">
|
||||
成功
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open4">
|
||||
@click="open2">
|
||||
警告
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open5">
|
||||
@click="open3">
|
||||
消息
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open6">
|
||||
@click="open4">
|
||||
错误
|
||||
</el-button>
|
||||
</template>
|
||||
@ -78,7 +78,7 @@
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open3() {
|
||||
open1() {
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '这是一条成功的提示消息',
|
||||
@ -86,7 +86,7 @@
|
||||
});
|
||||
},
|
||||
|
||||
open4() {
|
||||
open2() {
|
||||
this.$notify({
|
||||
title: '警告',
|
||||
message: '这是一条警告的提示消息',
|
||||
@ -94,14 +94,14 @@
|
||||
});
|
||||
},
|
||||
|
||||
open5() {
|
||||
open3() {
|
||||
this.$notify.info({
|
||||
title: '消息',
|
||||
message: '这是一条消息的提示消息'
|
||||
});
|
||||
},
|
||||
|
||||
open6() {
|
||||
open4() {
|
||||
this.$notify.error({
|
||||
title: '错误',
|
||||
message: '这是一条错误的提示消息'
|
||||
@ -122,22 +122,22 @@
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open7">
|
||||
@click="open1">
|
||||
右上角
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open8">
|
||||
@click="open2">
|
||||
右下角
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open9">
|
||||
@click="open3">
|
||||
左下角
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open10">
|
||||
@click="open4">
|
||||
左上角
|
||||
</el-button>
|
||||
</template>
|
||||
@ -145,14 +145,14 @@
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open7() {
|
||||
open1() {
|
||||
this.$notify({
|
||||
title: '自定义位置',
|
||||
message: '右上角弹出的消息'
|
||||
});
|
||||
},
|
||||
|
||||
open8() {
|
||||
open2() {
|
||||
this.$notify({
|
||||
title: '自定义位置',
|
||||
message: '右下角弹出的消息',
|
||||
@ -160,7 +160,7 @@
|
||||
});
|
||||
},
|
||||
|
||||
open9() {
|
||||
open3() {
|
||||
this.$notify({
|
||||
title: '自定义位置',
|
||||
message: '左下角弹出的消息',
|
||||
@ -168,7 +168,7 @@
|
||||
});
|
||||
},
|
||||
|
||||
open10() {
|
||||
open4() {
|
||||
this.$notify({
|
||||
title: '自定义位置',
|
||||
message: '左上角弹出的消息',
|
||||
@ -190,7 +190,7 @@
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open11">
|
||||
@click="open">
|
||||
偏移的消息
|
||||
</el-button>
|
||||
</template>
|
||||
@ -198,7 +198,7 @@
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open11() {
|
||||
open() {
|
||||
this.$notify({
|
||||
title: '偏移',
|
||||
message: '这是一条带有偏移的提示消息',
|
||||
@ -219,7 +219,7 @@
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open12">
|
||||
@click="open">
|
||||
使用 HTML 片段
|
||||
</el-button>
|
||||
</template>
|
||||
@ -227,7 +227,7 @@
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open12() {
|
||||
open() {
|
||||
this.$notify({
|
||||
title: 'HTML 片段',
|
||||
dangerouslyUseHTMLString: true,
|
||||
@ -253,7 +253,7 @@
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open13">
|
||||
@click="open">
|
||||
隐藏关闭按钮
|
||||
</el-button>
|
||||
</template>
|
||||
@ -261,7 +261,7 @@
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open13() {
|
||||
open() {
|
||||
this.$notify.success({
|
||||
title: 'Info',
|
||||
message: '这是一条没有关闭按钮的消息',
|
||||
|
||||
@ -112,11 +112,11 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
|
||||
<el-popover
|
||||
placement="top"
|
||||
width="160"
|
||||
v-model="visible2">
|
||||
v-model="visible">
|
||||
<p>这是一段内容这是一段内容确定删除吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
|
||||
<el-button type="primary" size="mini" @click="visible2 = false">确定</el-button>
|
||||
<el-button size="mini" type="text" @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" size="mini" @click="visible = false">确定</el-button>
|
||||
</div>
|
||||
<el-button slot="reference">删除</el-button>
|
||||
</el-popover>
|
||||
@ -125,7 +125,7 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible2: false,
|
||||
visible: false,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -188,7 +188,7 @@
|
||||
:::demo 为`el-select`设置`multiple`属性即可启用多选，此时`v-model`的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置`collapse-tags`属性将它们合并为一段文字。
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value5" multiple placeholder="请选择">
|
||||
<el-select v-model="value1" multiple placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
@ -198,7 +198,7 @@
|
||||
</el-select>
|
||||
|
||||
<el-select
|
||||
v-model="value11"
|
||||
v-model="value2"
|
||||
multiple
|
||||
collapse-tags
|
||||
style="margin-left: 20px;"
|
||||
@ -232,8 +232,8 @@
|
||||
value: '选项5',
|
||||
label: '北京烤鸭'
|
||||
}],
|
||||
value5: [],
|
||||
value11: []
|
||||
value1: [],
|
||||
value2: []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,11 +8,42 @@
|
||||
|
||||
```html
|
||||
<el-switch
|
||||
v-model="value2"
|
||||
v-model="value"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949">
|
||||
</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>
|
||||
export default {
|
||||
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 类型
|
||||
|
||||
:::demo 设置`active-value`和`inactive-value`属性，接受`Boolean`, `String`或`Number`类型的值。
|
||||
|
||||
```html
|
||||
<el-tooltip :content="'Switch value: ' + value5" placement="top">
|
||||
<el-tooltip :content="'Switch value: ' + value" placement="top">
|
||||
<el-switch
|
||||
v-model="value5"
|
||||
v-model="value"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949"
|
||||
active-value="100"
|
||||
@ -77,7 +76,7 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value5: '100'
|
||||
value: '100'
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -93,19 +92,19 @@
|
||||
|
||||
```html
|
||||
<el-switch
|
||||
v-model="value6"
|
||||
v-model="value1"
|
||||
disabled>
|
||||
</el-switch>
|
||||
<el-switch
|
||||
v-model="value7"
|
||||
v-model="value2"
|
||||
disabled>
|
||||
</el-switch>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value6: true,
|
||||
value7: false
|
||||
value1: true,
|
||||
value2: false
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
:::demo 使用 el-time-select 标签，分别通过`star`、`end`和`step`指定可选的起始时间、结束时间和步长
|
||||
```html
|
||||
<el-time-select
|
||||
v-model="value1"
|
||||
v-model="value"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
@ -22,7 +22,7 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: ''
|
||||
value: ''
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -38,7 +38,7 @@
|
||||
```html
|
||||
<template>
|
||||
<el-time-picker
|
||||
v-model="value2"
|
||||
v-model="value1"
|
||||
:picker-options="{
|
||||
selectableRange: '18:30:00 - 20:30:00'
|
||||
}"
|
||||
@ -46,7 +46,7 @@
|
||||
</el-time-picker>
|
||||
<el-time-picker
|
||||
arrow-control
|
||||
v-model="value3"
|
||||
v-model="value2"
|
||||
:picker-options="{
|
||||
selectableRange: '18:30:00 - 20:30:00'
|
||||
}"
|
||||
@ -58,8 +58,8 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value2: new Date(2016, 9, 10, 18, 40),
|
||||
value3: new Date(2016, 9, 10, 18, 40)
|
||||
value1: new Date(2016, 9, 10, 18, 40),
|
||||
value2: new Date(2016, 9, 10, 18, 40)
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -117,7 +117,7 @@
|
||||
<template>
|
||||
<el-time-picker
|
||||
is-range
|
||||
v-model="value4"
|
||||
v-model="value1"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
@ -126,7 +126,7 @@
|
||||
<el-time-picker
|
||||
is-range
|
||||
arrow-control
|
||||
v-model="value5"
|
||||
v-model="value2"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
@ -138,8 +138,8 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value4: [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)]
|
||||
value1: [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)]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -139,7 +139,7 @@
|
||||
```html
|
||||
<el-tree
|
||||
:props="props"
|
||||
:load="loadNode1"
|
||||
:load="loadNode"
|
||||
lazy
|
||||
show-checkbox>
|
||||
</el-tree>
|
||||
@ -156,7 +156,7 @@
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
loadNode1(node, resolve) {
|
||||
loadNode(node, resolve) {
|
||||
if (node.level === 0) {
|
||||
return resolve([{ name: 'region' }]);
|
||||
}
|
||||
@ -546,14 +546,14 @@
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
:filter-node-method="filterNode"
|
||||
ref="tree2">
|
||||
ref="tree">
|
||||
</el-tree>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
watch: {
|
||||
filterText(val) {
|
||||
this.$refs.tree2.filter(val);
|
||||
this.$refs.tree.filter(val);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user