mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-11-30 11:17:38 +08:00
MessageBox: add chalk theme (#7029)
* Message Box: add chalk theme * Message Box: doc fix * Message Box: change prop name into center
This commit is contained in:
Black Wayne
杨奕
parent
43ecb8818c
commit
7e365e244c
@ -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 |
|
||||
| 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 |
|
||||
@ -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 |
|
||||
|
||||
@ -25,7 +25,9 @@ const defaults = {
|
||||
cancelButtonClass: '',
|
||||
customClass: '',
|
||||
beforeClose: null,
|
||||
dangerouslyUseHTMLString: false
|
||||
dangerouslyUseHTMLString: false,
|
||||
center: false,
|
||||
roundButton: false
|
||||
};
|
||||
|
||||
import Vue from 'vue';
|
||||
|
||||
@ -1,17 +1,20 @@
|
||||
<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
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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,49 +90,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include e(errormsg) {
|
||||
color: $--color-danger;
|
||||
font-size: $--msgbox-error-font-size;
|
||||
min-height: 18px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
@include e(title) {
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: $--msgbox-font-size;
|
||||
font-weight: bold;
|
||||
height: 18px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@include e(message) {
|
||||
margin: 0;
|
||||
|
||||
& p {
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(btns) {
|
||||
padding: 10px 20px 15px;
|
||||
text-align: right;
|
||||
|
||||
& button:nth-child(2) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(btns-reverse) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
@include e(status) {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 36px !important;
|
||||
font-size: 24px !important;
|
||||
|
||||
&::before {
|
||||
// 防止图标切割
|
||||
padding-left: 1px;
|
||||
}
|
||||
|
||||
+ .el-message-box__message {
|
||||
padding-left: 36px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
&.el-icon-circle-check {
|
||||
color: $--msgbox-success-color;
|
||||
@ -134,6 +122,74 @@
|
||||
color: $--msgbox-danger-color;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(message) {
|
||||
margin: 0;
|
||||
|
||||
& p {
|
||||
margin: 0;
|
||||
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: 5px 15px 0;
|
||||
text-align: right;
|
||||
|
||||
& button:nth-child(2) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(btns-reverse) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
// centerAlign 布局
|
||||
@include m(center) {
|
||||
padding-bottom: 30px;
|
||||
|
||||
@include e(header) {
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
@include e(title) {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@include e(status) {
|
||||
position: relative;
|
||||
top: auto;
|
||||
padding-right: 5px;
|
||||
text-align: center;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msgbox-fade-enter-active {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user