Dialog: add chalk theme

pull/7089/head
wayne 2017-09-15 12:19:48 +08:00 committed by 杨奕
parent 27dcb4e40a
commit 41e1f75b8a
5 changed files with 116 additions and 18 deletions

View File

@ -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 centerwhile 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

View File

@ -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 | 说明 |

View File

@ -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() {

View File

@ -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
-------------------------- */

View File

@ -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 {