mirror of https://github.com/ElemeFE/element
Message: add chalk theme
Leopoldthecoder
杨奕
parent
ef61460688
commit
a1e8c52d9f
|
|
@ -64,6 +64,13 @@
|
|||
});
|
||||
},
|
||||
|
||||
openCenter() {
|
||||
this.$message({
|
||||
message: 'Centered text',
|
||||
center: true
|
||||
});
|
||||
},
|
||||
|
||||
openHTML() {
|
||||
this.$message({
|
||||
dangerouslyUseHTMLString: true,
|
||||
|
|
@ -206,7 +213,32 @@ A close button can be added.
|
|||
```
|
||||
:::
|
||||
|
||||
### Use HTML String
|
||||
### Centered text
|
||||
Use the `center` attribute to center the text
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click="openCenter">Centered text</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
openCenter() {
|
||||
this.$message({
|
||||
message: 'Centered text',
|
||||
center: true
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Use HTML string
|
||||
`message` supports HTML string.
|
||||
|
||||
:::demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string.
|
||||
|
|
@ -259,6 +291,7 @@ You can call `Message.closeAll()` to manually close all the instances.
|
|||
| customClass | custom class name for Message | string | — | — |
|
||||
| duration | display duration, millisecond. If set to 0, it will not turn off automatically | number | — | 3000 |
|
||||
| showClose | whether to show a close button | boolean | — | false |
|
||||
| center | whether to center the text | boolean | — | false |
|
||||
| onClose | callback function when closed with the message instance as the parameter | function | — | — |
|
||||
|
||||
### Methods
|
||||
|
|
|
|||
|
|
@ -216,7 +216,7 @@ We provide four types: success, warning, info and error.
|
|||
```
|
||||
:::
|
||||
|
||||
### Custom Position
|
||||
### Custom position
|
||||
|
||||
Notification can emerge from any corner you like.
|
||||
|
||||
|
|
@ -314,7 +314,7 @@ Customize Notification's offset from the edge of the screen.
|
|||
```
|
||||
:::
|
||||
|
||||
### Use HTML String
|
||||
### Use HTML string
|
||||
`message` supports HTML string.
|
||||
|
||||
::: demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string.
|
||||
|
|
|
|||
|
|
@ -64,6 +64,13 @@
|
|||
});
|
||||
},
|
||||
|
||||
openCenter() {
|
||||
this.$message({
|
||||
message: '居中的文字',
|
||||
center: true
|
||||
});
|
||||
},
|
||||
|
||||
openHTML() {
|
||||
this.$message({
|
||||
dangerouslyUseHTMLString: true,
|
||||
|
|
@ -206,6 +213,31 @@
|
|||
```
|
||||
:::
|
||||
|
||||
### 文字居中
|
||||
使用 `center` 属性让文字水平居中
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click="openCenter">文字居中</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
openCenter() {
|
||||
this.$message({
|
||||
message: '居中的文字',
|
||||
center: true
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 使用 HTML 片段
|
||||
`message` 属性支持传入 HTML 片段
|
||||
|
||||
|
|
@ -259,6 +291,7 @@ import { Message } from 'element-ui';
|
|||
| customClass | 自定义类名 | string | — | — |
|
||||
| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 3000 |
|
||||
| showClose | 是否显示关闭按钮 | boolean | — | false |
|
||||
| center | 文字是否居中 | boolean | — | false |
|
||||
| onClose | 关闭时的回调函数, 参数为被关闭的 message 实例 | function | — | — |
|
||||
|
||||
### 方法
|
||||
|
|
|
|||
|
|
@ -1,32 +1,31 @@
|
|||
<template>
|
||||
<transition name="el-message-fade">
|
||||
<div
|
||||
class="el-message"
|
||||
:class="customClass"
|
||||
:class="[
|
||||
'el-message',
|
||||
type && !iconClass ? `el-message--${ type }` : '',
|
||||
center ? 'is-center' : '',
|
||||
customClass]"
|
||||
v-show="visible"
|
||||
@mouseenter="clearTimer"
|
||||
@mouseleave="startTimer">
|
||||
<div :class="iconWrapClass">
|
||||
<i :class="iconClass" v-if="iconClass"></i>
|
||||
<i :class="typeClass" v-else></i>
|
||||
</div>
|
||||
<div class="el-message__group">
|
||||
<slot>
|
||||
<p v-if="!dangerouslyUseHTMLString">{{ message }}</p>
|
||||
<p v-else v-html="message"></p>
|
||||
</slot>
|
||||
<div v-if="showClose" class="el-message__closeBtn el-icon-close" @click="close"></div>
|
||||
</div>
|
||||
<i :class="iconClass" v-if="iconClass"></i>
|
||||
<i :class="typeClass" v-else></i>
|
||||
<slot>
|
||||
<p v-if="!dangerouslyUseHTMLString" class="el-message__content">{{ message }}</p>
|
||||
<p v-else v-html="message" class="el-message__content"></p>
|
||||
</slot>
|
||||
<i v-if="showClose" class="el-message__closeBtn el-icon-close" @click="close"></i>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
const typeMap = {
|
||||
success: 'circle-check',
|
||||
info: 'information',
|
||||
success: 'success',
|
||||
info: 'info',
|
||||
warning: 'warning',
|
||||
error: 'circle-cross'
|
||||
error: 'error'
|
||||
};
|
||||
|
||||
export default {
|
||||
|
|
@ -42,7 +41,8 @@
|
|||
showClose: false,
|
||||
closed: false,
|
||||
timer: null,
|
||||
dangerouslyUseHTMLString: false
|
||||
dangerouslyUseHTMLString: false,
|
||||
center: false
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
|
||||
typeClass() {
|
||||
return this.type && !this.iconClass
|
||||
? `el-message__type el-icon-${ typeMap[this.type] }-plain`
|
||||
? `el-message__icon el-icon-${ typeMap[this.type] }`
|
||||
: '';
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -259,10 +259,11 @@ $--msgbox-danger-color: $--color-danger;
|
|||
/* Message
|
||||
-------------------------- */
|
||||
$--message-shadow: $--box-shadow-base;
|
||||
$--message-min-width: 300px;
|
||||
$--message-padding: 10px 12px;
|
||||
$--message-min-width: 380px;
|
||||
$--message-padding: 15px 15px 15px 20px;
|
||||
$--message-content-color: $--color-text-regular;
|
||||
$--message-close-color: $--color-text-placeholder;
|
||||
$--message-close-size: 12px;
|
||||
$--message-close-hover-color: $--color-text-secondary;
|
||||
|
||||
$--message-success-color: $--color-success;
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
|
|
@ -1,7 +1,7 @@
|
|||
@font-face {
|
||||
font-family: 'element-icons';
|
||||
src: url('fonts/element-icons.woff?t=1501582787037') format('woff'), /* chrome, firefox */
|
||||
url('fonts/element-icons.ttf?t=1501582787037') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||
src: url('fonts/element-icons.woff?t=1504667669908') format('woff'), /* chrome, firefox */
|
||||
url('fonts/element-icons.ttf?t=1504667669908') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
.el-icon-star-off:before { content: "\e620"; }
|
||||
.el-icon-star-on:before { content: "\e621"; }
|
||||
.el-icon-time:before { content: "\e622"; }
|
||||
.el-icon-warning:before { content: "\e623"; }
|
||||
.el-icon-warning_default:before { content: "\e623"; }
|
||||
.el-icon-delete2:before { content: "\e624"; }
|
||||
.el-icon-upload2:before { content: "\e627"; }
|
||||
.el-icon-view:before { content: "\e626"; }
|
||||
|
|
@ -66,6 +66,10 @@
|
|||
.el-icon-circle-cross-plain:before { content: "\e628"; }
|
||||
.el-icon-information-plain:before { content: "\e629"; }
|
||||
.el-icon-warning-plain:before { content: "\e62a"; }
|
||||
.el-icon-info:before { content: "\e62b"; }
|
||||
.el-icon-error:before { content: "\e62c"; }
|
||||
.el-icon-success:before { content: "\e62d"; }
|
||||
.el-icon-warning:before { content: "\e62e"; }
|
||||
|
||||
.el-icon-loading {
|
||||
animation: rotating 1s linear infinite;
|
||||
|
|
|
|||
|
|
@ -2,90 +2,97 @@
|
|||
@import "common/var";
|
||||
|
||||
@include b(message) {
|
||||
box-shadow: $--message-shadow;
|
||||
min-width: $--message-min-width;
|
||||
box-sizing: border-box;
|
||||
border-radius: $--border-radius-small;
|
||||
border-radius: $--border-radius-base;
|
||||
border-width: $--border-width-base;
|
||||
border-style: $--border-style-base;
|
||||
border-color: $--border-color-lighter;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 20px;
|
||||
transform: translateX(-50%);
|
||||
background-color: $--color-white;
|
||||
background-color: $--border-color-extra-light;
|
||||
transition: opacity 0.3s, transform .4s;
|
||||
overflow: hidden;
|
||||
padding: $--message-padding;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@include e(group) {
|
||||
margin-left: 40px;
|
||||
position: relative;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $--message-padding;
|
||||
@include when(center) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
& p {
|
||||
font-size: $--font-size-base;
|
||||
margin: 0 34px 0 0;
|
||||
white-space: nowrap;
|
||||
color: $--message-content-color;
|
||||
text-align: justify;
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@include m(info) {
|
||||
.el-message__content {
|
||||
color: $--message-info-color;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(success) {
|
||||
background-color: $--color-success-lighter;
|
||||
border-color: $--color-success-light;
|
||||
|
||||
.el-message__content {
|
||||
color: $--message-success-color;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(warning) {
|
||||
background-color: $--color-warning-lighter;
|
||||
border-color: $--color-warning-light;
|
||||
|
||||
.el-message__content {
|
||||
color: $--message-warning-color;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(error) {
|
||||
background-color: $--color-danger-lighter;
|
||||
border-color: $--color-danger-light;
|
||||
|
||||
.el-message__content {
|
||||
color: $--message-danger-color;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(icon) {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
text-align: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
i {
|
||||
line-height: 40px;
|
||||
|
||||
&.el-message__type {
|
||||
color: $--color-white;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(info) {
|
||||
background-color: $--color-info;
|
||||
}
|
||||
|
||||
@include m(warning) {
|
||||
background-color: $--color-warning;
|
||||
}
|
||||
|
||||
@include m(error) {
|
||||
background-color: $--color-danger;
|
||||
}
|
||||
|
||||
@include m(success) {
|
||||
background-color: $--color-success;
|
||||
}
|
||||
@include e(content) {
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@include e(closeBtn) {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
right: 15px;
|
||||
transform: translateY(-50%);
|
||||
cursor: pointer;
|
||||
color: $--message-close-color;
|
||||
font-size: $--font-size-base;
|
||||
font-size: $--message-close-size;
|
||||
|
||||
&:hover {
|
||||
color: $--message-close-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
& .el-icon-circle-check {
|
||||
& .el-icon-success {
|
||||
color: $--message-success-color;
|
||||
}
|
||||
|
||||
& .el-icon-circle-cross {
|
||||
& .el-icon-error {
|
||||
color: $--message-danger-color;
|
||||
}
|
||||
|
||||
& .el-icon-information {
|
||||
& .el-icon-info {
|
||||
color: $--message-info-color;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ describe('Message', () => {
|
|||
message: '灰风',
|
||||
duration: 500
|
||||
});
|
||||
const message = document.querySelector('.el-message__group p');
|
||||
const message = document.querySelector('.el-message__content');
|
||||
expect(document.querySelector('.el-message')).to.exist;
|
||||
expect(message.textContent).to.equal('灰风');
|
||||
setTimeout(() => {
|
||||
|
|
@ -47,7 +47,7 @@ describe('Message', () => {
|
|||
iconClass: 'el-icon-close'
|
||||
});
|
||||
setTimeout(() => {
|
||||
const icon = document.querySelector('.el-message__icon i');
|
||||
const icon = document.querySelector('.el-message i');
|
||||
expect(icon.classList.contains('el-icon-close')).to.true;
|
||||
done();
|
||||
}, 500);
|
||||
|
|
@ -58,7 +58,7 @@ describe('Message', () => {
|
|||
message: '<strong>夏天</strong>',
|
||||
dangerouslyUseHTMLString: true
|
||||
});
|
||||
const message = document.querySelector('.el-message__group strong');
|
||||
const message = document.querySelector('.el-message strong');
|
||||
expect(message.textContent).to.equal('夏天');
|
||||
});
|
||||
|
||||
|
|
@ -90,6 +90,15 @@ describe('Message', () => {
|
|||
expect(document.querySelector('.el-message').__vue__.type).to.equal('success');
|
||||
});
|
||||
|
||||
it('center', () => {
|
||||
Message({
|
||||
message: '夏天',
|
||||
center: true,
|
||||
duration: 0
|
||||
});
|
||||
expect(document.querySelector('.el-message').classList.contains('is-center')).to.true;
|
||||
});
|
||||
|
||||
it('reset timer', done => {
|
||||
Message({
|
||||
message: '白灵',
|
||||
|
|
|
|||
Loading…
Reference in New Issue