mirror of https://github.com/ElemeFE/element
Dialog: add chalk theme
wayne
杨奕
parent
27dcb4e40a
commit
41e1f75b8a
|
|
@ -24,6 +24,7 @@
|
|||
dialogFormVisible: false,
|
||||
outerVisible: false,
|
||||
innerVisible: false,
|
||||
centerDialogVisible: false,
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
|
|
@ -209,10 +210,10 @@ If a Dialog is nested in another Dialog, `append-to-body` is required.
|
|||
<template>
|
||||
<el-button type="text" @click="outerVisible = true">open the outer Dialog</el-button>
|
||||
|
||||
<el-dialog title="外层 Dialog" :visible.sync="outerVisible">
|
||||
<el-dialog title="Outter Dialog" :visible.sync="outerVisible">
|
||||
<el-dialog
|
||||
width="30%"
|
||||
title="内层 Dialog"
|
||||
title="Inner Dialog"
|
||||
:visible.sync="innerVisible"
|
||||
append-to-body>
|
||||
</el-dialog>
|
||||
|
|
@ -236,6 +237,40 @@ If a Dialog is nested in another Dialog, `append-to-body` is required.
|
|||
```
|
||||
:::
|
||||
|
||||
:::
|
||||
|
||||
### Align in center
|
||||
Make the dialog's header & footer align in center
|
||||
|
||||
:::demo Set `center` to `true` will align dialog's header & footer in center，while the content of it will not, to prevent breaking your own content's layout
|
||||
|
||||
```html
|
||||
<el-button type="text" @click="centerDialogVisible = true">Click to open the Dialog</el-button>
|
||||
|
||||
<el-dialog
|
||||
title="Warning"
|
||||
:visible.sync="centerDialogVisible"
|
||||
width="30%"
|
||||
center>
|
||||
<span>It should be noted that the content will not be aligned in center by default</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="centerDialogVisible = false">Cancel</el-button>
|
||||
<el-button type="primary" @click="centerDialogVisible = false">Confirm</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
centerDialogVisible: false
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
:::tip
|
||||
If the variable bound to `visible` is managed in Vuex store, the `.sync` can not work properly. In this case, please remove the `.sync` modifier, listen to `open` and `close` events of Dialog, and commit Vuex mutations to update the value of that variable in the event handlers.
|
||||
:::
|
||||
|
|
@ -258,6 +293,7 @@ If the variable bound to `visible` is managed in Vuex store, the `.sync` can not
|
|||
| close-on-press-escape | whether the Dialog can be closed by pressing ESC | boolean | — | true |
|
||||
| show-close | whether to show a close button | boolean | — | true |
|
||||
| before-close | callback before Dialog closes, and it will prevent Dialog from closing | function(done)，done is used to close the Dialog | — | — |
|
||||
| center | whether to align the header and footer in center | function(done)，done is used to close the Dialog | — | — |
|
||||
|
||||
### Slot
|
||||
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
dialogFormVisible: false,
|
||||
outerVisible: false,
|
||||
innerVisible: false,
|
||||
centerDialogVisible: false,
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
|
|
@ -233,6 +234,38 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
|
|||
```
|
||||
:::
|
||||
|
||||
### 居中布局
|
||||
标题和底部采用居中布局
|
||||
|
||||
:::demo 将 `center` 为 `true` 将使标题和底部居中，同时为了防止破坏弹窗内容的布局，内容默认是不局中的
|
||||
|
||||
```html
|
||||
<el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button>
|
||||
|
||||
<el-dialog
|
||||
title="提示"
|
||||
:visible.sync="centerDialogVisible"
|
||||
width="30%"
|
||||
center>
|
||||
<span>需要注意的是内容是默认不居中的</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="centerDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
centerDialogVisible: false
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
:::tip
|
||||
如果 `visible` 属性绑定的变量位于 Vuex 的 store 内，那么 `.sync` 不会正常工作。此时需要去除 `.sync` 修饰符，同时监听 Dialog 的 `open` 和 `close` 事件，在事件回调中执行 Vuex 中对应的 mutation 更新 `visible` 属性绑定的变量的值。
|
||||
:::
|
||||
|
|
@ -254,6 +287,7 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
|
|||
| close-on-press-escape | 是否可以通过按下 ESC 关闭 Dialog | boolean | — | true |
|
||||
| show-close | 是否显示关闭按钮 | boolean | — | true |
|
||||
| before-close | 关闭前的回调，会暂停 Dialog 的关闭 | function(done)，done 用于关闭 Dialog | — | — |
|
||||
| center | 是否对头部和底部采用居中布局 | boolean | — | false |
|
||||
|
||||
### Slot
|
||||
| name | 说明 |
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="el-dialog__wrapper" v-show="visible" @click.self="handleWrapperClick">
|
||||
<div
|
||||
class="el-dialog"
|
||||
:class="[{ 'is-fullscreen': fullscreen }, customClass]"
|
||||
:class="[{ 'is-fullscreen': fullscreen, 'el-dialog--center': center }, customClass]"
|
||||
ref="dialog"
|
||||
:style="style">
|
||||
<div class="el-dialog__header">
|
||||
|
|
@ -91,7 +91,11 @@
|
|||
type: String,
|
||||
default: '15vh'
|
||||
},
|
||||
beforeClose: Function
|
||||
beforeClose: Function,
|
||||
center: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -83,6 +83,7 @@ $--font-size-large: 18px;
|
|||
$--font-color-base: #5a5e66;
|
||||
$--font-color-disabled-base: #bbb;
|
||||
$--font-weight-primary: 500;
|
||||
$--font-line-height-primary: 24px;
|
||||
|
||||
/* Size
|
||||
-------------------------- */
|
||||
|
|
@ -457,10 +458,11 @@ $--switch-button-size: 16px;
|
|||
-------------------------- */
|
||||
$--dialog-background-color: $--color-primary-light-4;
|
||||
$--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
$--dialog-close-color: $--color-text-placeholder;
|
||||
$--dialog-close-hover-color: $--color-primary;
|
||||
$--dialog-title-font-size: 16px;
|
||||
$--dialog-title-font-size: $--font-size-large;
|
||||
$--dialog-font-size: 14px;
|
||||
$--dialog-line-height: $--font-line-height-primary;
|
||||
$--dialog-padding-primary: 15px;
|
||||
|
||||
/* Table
|
||||
-------------------------- */
|
||||
|
|
|
|||
|
|
@ -32,48 +32,70 @@
|
|||
}
|
||||
|
||||
@include e(header) {
|
||||
padding: 20px 20px 0;
|
||||
@include utils-clearfix;
|
||||
padding: $--dialog-padding-primary;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
@include e(headerbtn) {
|
||||
float: right;
|
||||
position: absolute;
|
||||
top: $--dialog-padding-primary;
|
||||
right: $--dialog-padding-primary;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
font-size: 12px;
|
||||
|
||||
.el-dialog__close {
|
||||
color: $--dialog-close-color;
|
||||
color: $--color-info;
|
||||
}
|
||||
|
||||
&:focus, &:hover {
|
||||
.el-dialog__close {
|
||||
color: $--dialog-close-hover-color;
|
||||
color: $--color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include e(title) {
|
||||
line-height: 1;
|
||||
line-height: $--dialog-line-height;
|
||||
font-size: $--dialog-title-font-size;
|
||||
font-weight: bold;
|
||||
color: $--color-black;
|
||||
color: $--color-text-primary;
|
||||
}
|
||||
|
||||
@include e(body) {
|
||||
padding: 30px 20px;
|
||||
color: $--color-black;
|
||||
color: $--color-text-regular;
|
||||
line-height: $--dialog-line-height;
|
||||
font-size: $--dialog-font-size;
|
||||
}
|
||||
|
||||
@include e(footer) {
|
||||
padding: 10px 20px 15px;
|
||||
padding: $--dialog-padding-primary;
|
||||
padding-top: 10px;
|
||||
text-align: right;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// 内容居中布局
|
||||
@include m(center) {
|
||||
text-align: center;
|
||||
|
||||
@include e(header) {
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
@include e(body) {
|
||||
text-align: initial;
|
||||
padding: 25px ($--dialog-padding-primary + 12px) 30px;
|
||||
}
|
||||
|
||||
@include e(footer) {
|
||||
text-align: inherit;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-fade-enter-active {
|
||||
|
|
|
|||
Loading…
Reference in New Issue