Skip to content

E
Element
Commit 7e365e24 authored by Black Wayne's avatar Black Wayne Committed by 杨奕
Browse files
Options

MessageBox: add chalk theme (#7029) 

* Message Box: add chalk theme

* Message Box: doc fix

* Message Box: change prop name into center
parent 43ecb881
Hide whitespace changes
Inline Side-by-side
Showing with 239 additions and 48 deletions
examples/docs/en-US/message-box.md
View file @ 7e365e24
......@@ -97,6 +97,25 @@
this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {
dangerouslyUseHTMLString: true
});
},
open6() {
this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
type: 'warning',
center: true
}).then(() => {
this.$message({
type: 'success',
message: 'Delete completed'
});
}).catch(() => {
this.$message({
type: 'info',
message: 'Delete canceled'
});
});
}
}
};
......@@ -292,6 +311,43 @@ Can be customized to show various content.
```
:::
### Align in center
Align the content in center
:::demo set `center` to `true` will align the content in center
```html
<template>
<el-button type="text" @click="open6">Click to open Message Box</el-button>
</template>
<script>
export default {
methods: {
open6() {
this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
type: 'warning',
center: true
}).then(() => {
this.$message({
type: 'success',
message: 'Delete completed'
});
}).catch(() => {
this.$message({
type: 'info',
message: 'Delete canceled'
});
});
}
}
}
</script>
```
:::
:::warning
Although `message` property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). So when `dangerouslyUseHTMLString` is on, please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content.
:::
......@@ -344,4 +400,6 @@ Although `message` property supports HTML strings, dynamically rendering arbitra
| inputValue | initial value of input | string | — | — |
| inputPattern | regexp for the input | regexp | — | — |
| inputValidator | validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage | function | — | — |
| inputErrorMessage | error message when validation fails | string | — | Illegal input |
\ No newline at end of file
| inputErrorMessage | error message when validation fails | string | — | Illegal input |
| center | whether to align the content in center | boolean | — | false |
| roundButton | whether to use round button | boolean | — | false |
\ No newline at end of file
examples/docs/zh-CN/message-box.md
View file @ 7e365e24
......@@ -98,6 +98,25 @@
this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {
dangerouslyUseHTMLString: true
});
},
open6() {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
center: true
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
}
};
......@@ -290,6 +309,43 @@
```
:::
### 居中布局
内容支持居中布局
:::demo 将 `center` 为 `true` 将采用居中布局
```html
<template>
<el-button type="text" @click="open6">点击打开 Message Box</el-button>
</template>
<script>
export default {
methods: {
open6() {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
center: true
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
}
}
</script>
```
:::
:::warning
`message` 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。因此在 `dangerouslyUseHTMLString` 打开的情况下，请确保 `message` 的内容是可信的，**永远不要**将用户提交的内容赋值给 `message` 属性。
:::
......@@ -339,3 +395,5 @@ import { MessageBox } from 'element-ui';
| inputPattern | 输入框的校验表达式 | regexp | — | — |
| inputValidator | 输入框的校验函数。可以返回布尔值或字符串，若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage | function | — | — |
| inputErrorMessage | 校验未通过时的提示文本 | string | — | 输入的数据不合法! |
| center | 是否居中布局 | boolean | — | false |
| roundButton | 是否使用圆角按钮 | boolean | — | false |
packages/message-box/src/main.js
View file @ 7e365e24
......@@ -25,7 +25,9 @@ const defaults = {
cancelButtonClass: '',
customClass: '',
beforeClose: null,
dangerouslyUseHTMLString: false
dangerouslyUseHTMLString: false,
center: false,
roundButton: false
};
import Vue from 'vue';
......
packages/message-box/src/main.vue
View file @ 7e365e24
<template>
<transition name="msgbox-fade">
<div class="el-message-box__wrapper" tabindex="-1" v-show="visible" @click.self="handleWrapperClick">
<div class="el-message-box" :class="customClass">
<div class="el-message-box" :class="[customClass, center && 'el-message-box--center']">
<div class="el-message-box__header" v-if="title !== undefined">
<div class="el-message-box__title">{{ title }}</div>
<div class="el-message-box__title">
<div class="el-message-box__status" :class="[ typeClass ]" v-if="typeClass && center"></div>
<span>{{ title }}</span>
</div>
<button type="button" class="el-message-box__headerbtn" aria-label="Close"
v-if="showClose" @click="handleAction('cancel')">
<i class="el-message-box__close el-icon-close"></i>
</button>
</div>
<div class="el-message-box__content" v-if="message !== ''">
<div class="el-message-box__status" :class="[ typeClass ]"></div>
<div class="el-message-box__message" :style="{ 'margin-left': typeClass ? '50px' : '0' }">
<div class="el-message-box__status" :class="[ typeClass ]" v-if="typeClass && !center"></div>
<div class="el-message-box__message">
<slot>
<p v-if="!dangerouslyUseHTMLString">{{ message }}</p>
<p v-else v-html="message"></p>
......@@ -27,6 +30,8 @@
:loading="cancelButtonLoading"
:class="[ cancelButtonClasses ]"
v-show="showCancelButton"
:round="roundButton"
size="small"
@click.native="handleAction('cancel')">
{{ cancelButtonText || t('el.messagebox.cancel') }}
</el-button>
......@@ -35,6 +40,8 @@
ref="confirm"
:class="[ confirmButtonClasses ]"
v-show="showConfirmButton"
:round="roundButton"
size="small"
@click.native="handleAction('confirm')">
{{ confirmButtonText || t('el.messagebox.confirm') }}
</el-button>
......@@ -81,6 +88,14 @@
},
closeOnHashChange: {
default: true
},
center: {
default: false,
type: Boolean
},
roundButton: {
default: false,
type: Boolean
}
},
......
packages/theme-chalk/src/common/var.scss
View file @ 7e365e24
......@@ -79,6 +79,7 @@ $--fill-base: $--color-white;
-------------------------- */
$--font-size-base: 14px;
$--font-size-small: 13px;
$--font-size-large: 18px;
$--font-color-base: #5a5e66;
$--font-color-disabled-base: #bbb;
$--font-weight-primary: 500;
......@@ -251,11 +252,12 @@ $--alert-icon-large-size: 28px;
/* Message Box
-------------------------- */
$--msgbox-width: 420px;
$--msgbox-border-radius: 3px;
$--msgbox-font-size: 16px;
$--msgbox-content-font-size: 14px;
$--msgbox-content-color: $--link-color;
$--msgbox-border-radius: 4px;
$--msgbox-font-size: $--font-size-large;
$--msgbox-content-font-size: $--font-size-base;
$--msgbox-content-color: $--color-text-regular;
$--msgbox-error-font-size: 12px;
$--msgbox-padding-primary: 15px;
$--msgbox-success-color: $--color-success;
$--msgbox-info-color: $--color-info;
......
packages/theme-chalk/src/message-box.scss
View file @ 7e365e24
......@@ -5,15 +5,19 @@
@import "input";
@include b(message-box) {
text-align: left;
display: inline-block;
width: $--msgbox-width;
padding-bottom: 10px;
vertical-align: middle;
background-color: $--color-white;
width: $--msgbox-width;
border-radius: $--msgbox-border-radius;
border: 1px solid $--border-color-lighter;
font-size: $--msgbox-font-size;
box-shadow: $--box-shadow-light;
text-align: left;
overflow: hidden;
backface-visibility: hidden;
@include e(wrapper) {
position: fixed;
top: 0;
......@@ -21,6 +25,7 @@
left: 0;
right: 0;
text-align: center;
&::after {
content: "";
display: inline-block;
......@@ -32,21 +37,31 @@
@include e(header) {
position: relative;
padding: 20px 20px 0;
padding: $--msgbox-padding-primary;
padding-bottom: 10px;
}
@include e(title) {
padding-left: 0;
margin-bottom: 0;
font-size: $--msgbox-font-size;
line-height: 1;
color: $--color-text-primary;
}
@include e(headerbtn) {
position: absolute;
top: 19px;
right: 20px;
background: transparent;
top: $--msgbox-padding-primary;
right: $--msgbox-padding-primary;
padding: 0;
border: none;
outline: none;
padding: 0;
background: transparent;
font-size: 12px;
cursor: pointer;
.el-message-box__close {
color: #999;
color: $--color-info;
}
&:focus, &:hover {
......@@ -58,14 +73,15 @@
}
@include e(content) {
padding: 30px 20px;
position: relative;
padding: 10px $--msgbox-padding-primary;
color: $--msgbox-content-color;
font-size: $--msgbox-content-font-size;
position: relative;
}
@include e(input) {
padding-top: 15px;
& input.invalid {
border-color: $--color-danger;
&:focus {
......@@ -74,20 +90,37 @@
}
}
@include e(errormsg) {
color: $--color-danger;
font-size: $--msgbox-error-font-size;
min-height: 18px;
margin-top: 2px;
}
@include e(status) {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 24px !important;
@include e(title) {
padding-left: 0;
margin-bottom: 0;
font-size: $--msgbox-font-size;
font-weight: bold;
height: 18px;
color: #333;
&::before {
// 防止图标切割
padding-left: 1px;
}
+ .el-message-box__message {
padding-left: 36px;
padding-right: 12px;
}
&.el-icon-circle-check {
color: $--msgbox-success-color;
}
&.el-icon-information {
color: $--msgbox-info-color;
}
&.el-icon-warning {
color: $--msgbox-warning-color;
}
&.el-icon-circle-cross {
color: $--msgbox-danger-color;
}
}
@include e(message) {
......@@ -95,12 +128,19 @@
& p {
margin: 0;
line-height: 1.4;
line-height: 24px;
}
}
@include e(errormsg) {
color: $--color-danger;
font-size: $--msgbox-error-font-size;
min-height: 18px;
margin-top: 2px;
}
@include e(btns) {
padding: 10px 20px 15px;
padding: 5px 15px 0;
text-align: right;
& button:nth-child(2) {
......@@ -112,26 +152,42 @@
flex-direction: row-reverse;
}
@include e(status) {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 36px !important;
// centerAlign 布局
@include m(center) {
padding-bottom: 30px;
&.el-icon-circle-check {
color: $--msgbox-success-color;
@include e(header) {
padding-top: 30px;
}
&.el-icon-information {
color: $--msgbox-info-color;
@include e(title) {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
&.el-icon-warning {
color: $--msgbox-warning-color;
@include e(status) {
position: relative;
top: auto;
padding-right: 5px;
text-align: center;
transform: translateY(-1px);
}
&.el-icon-circle-cross {
color: $--msgbox-danger-color;
@include e(message) {
margin-left: 0;
}
@include e((btns, content)) {
text-align: center;
}
@include e(content) {
$padding-horizontal: $--msgbox-padding-primary + 12px;
padding-left: $padding-horizontal;
padding-right: $padding-horizontal;
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment