Skip to content

E
Element
Commit 50e2f234 authored by Leopoldthecoder's avatar Leopoldthecoder Committed by 杨奕
Browse files
Options

Message: refactor icon

parent 84657095
Hide whitespace changes
Inline Side-by-side
Showing with 86 additions and 25 deletions
examples/docs/en-US/message.md
View file @ 50e2f234
......@@ -75,7 +75,7 @@ Used to show feedback after an activity. The difference with Notification is tha
Displays at the top, and disappears after 3 seconds.
:::demo The setup of Message is very similar to notification, so parts of the options won't be explained in detail here. You can check the options table below combined with notification doc to understand it. Element has registered a `$message` method for invoking. Message can take a string or VNode as parameter, and it will be shown as the main body.
:::demo The setup of Message is very similar to notification, so parts of the options won't be explained in detail here. You can check the options table below combined with notification doc to understand it. Element has registered a `$message` method for invoking. Message can take a string or a VNode as parameter, and it will be shown as the main body.
```html
<template>
......@@ -214,6 +214,10 @@ import { Message } from 'element-ui';
In this case you should call `Message(options)`. We have also registered methods for different types, e.g. `Message.success(options)`.
You can call `Message.closeAll()` to manually close all the instances.
:::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). Please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content.
:::
### Options
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
......
examples/docs/zh-CN/message.md
View file @ 50e2f234
......@@ -75,7 +75,7 @@
从顶部出现，3 秒后自动消失。
:::demo Message 在配置上与 Notification 非常类似，所以部分 options 在此不做详尽解释，文末有 options 列表，可以结合 Notification 的文档理解它们。Element 注册了一个`$message`方法用于调用，Message 可以接收一个字符串作为参数，它会被显示为正文内容。
:::demo Message 在配置上与 Notification 非常类似，所以部分 options 在此不做详尽解释，文末有 options 列表，可以结合 Notification 的文档理解它们。Element 注册了一个`$message`方法用于调用，Message 可以接收一个字符串或一个 VNode 作为参数，它会被显示为正文内容。
```html
<template>
......@@ -214,6 +214,10 @@ import { Message } from 'element-ui';
此时调用方法为 `Message(options)`。我们也为每个 type 定义了各自的方法，如 `Message.success(options)`。
并且可以调用 `Message.closeAll()` 手动关闭所有实例。
:::warning
`message` 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。请确保 `message` 的内容是可信的，**永远不要**将用户提交的内容赋值给 `message` 属性。
:::
### Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
......
examples/icon.json
View file @ 50e2f234
["arrow-down","arrow-left","arrow-right","arrow-up","caret-bottom","caret-left","caret-right","caret-top","check","circle-check","circle-close","circle-cross","close","upload","d-arrow-left","d-arrow-right","d-caret","date","delete","document","edit","information","loading","menu","message","minus","more","picture","plus","search","setting","share","star-off","star-on","time","warning","delete2","upload2","view"]
\ No newline at end of file
["arrow-down","arrow-left","arrow-right","arrow-up","caret-bottom","caret-left","caret-right","caret-top","check","circle-check","circle-close","circle-cross","close","upload","d-arrow-left","d-arrow-right","d-caret","date","delete","document","edit","information","loading","menu","message","minus","more","picture","plus","search","setting","share","star-off","star-on","time","warning","delete2","upload2","view","circle-check-plain","circle-cross-plain","information-plain","warning-plain"]
\ No newline at end of file
packages/message/src/main.vue
View file @ 50e2f234
......@@ -6,9 +6,14 @@
v-show="visible"
@mouseenter="clearTimer"
@mouseleave="startTimer">
<img class="el-message__img" :src="typeImg" alt="" v-if="!iconClass">
<div class="el-message__group" :class="{ 'is-with-icon': iconClass }">
<slot><p><i class="el-message__icon" :class="iconClass" v-if="iconClass"></i>{{ message }}</p></slot>
<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-html="message"></p>
</slot>
<div v-if="showClose" class="el-message__closeBtn el-icon-close" @click="close"></div>
</div>
</div>
......@@ -16,6 +21,13 @@
</template>
<script type="text/babel">
const typeMap = {
success: 'circle-check',
info: 'information',
warning: 'warning',
error: 'circle-cross'
};
export default {
data() {
return {
......@@ -33,8 +45,18 @@
},
computed: {
typeImg() {
return require(`../assets/${ this.type }.svg`);
iconWrapClass() {
const classes = ['el-message__icon'];
if (this.type && !this.iconClass) {
classes.push(`el-message__icon--${ this.type }`);
}
return classes;
},
typeClass() {
return this.type && !this.iconClass
? `el-message__type el-icon-${ typeMap[this.type] }-plain`
: '';
}
},
......
packages/theme-default/src/icon.css
View file @ 50e2f234
@font-face {
font-family: 'element-icons';
src: url('fonts/element-icons.woff?t=1472440741') format('woff'), /* chrome, firefox */
url('fonts/element-icons.ttf?t=1472440741') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
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+*/
font-weight: normal;
font-style: normal;
}
......@@ -62,6 +62,10 @@
.el-icon-delete2:before { content: "\e624"; }
.el-icon-upload2:before { content: "\e627"; }
.el-icon-view:before { content: "\e626"; }
.el-icon-circle-check-plain:before { content: "\e625"; }
.el-icon-circle-cross-plain:before { content: "\e628"; }
.el-icon-information-plain:before { content: "\e629"; }
.el-icon-warning-plain:before { content: "\e62a"; }
.el-icon-loading {
animation: rotating 1s linear infinite;
......
packages/theme-default/src/message.css
View file @ 50e2f234
......@@ -6,7 +6,6 @@
@b message {
box-shadow: var(--message-shadow);
min-width: var(--message-min-width);
padding: var(--message-padding);
box-sizing: border-box;
border-radius: var(--border-radius-small);
position: fixed;
......@@ -18,16 +17,13 @@
overflow: hidden;
@e group {
margin-left: 38px;
margin-left: 40px;
position: relative;
height: 20px;
line-height: 20px;
display: flex;
align-items: center;
@when with-icon {
margin-left: 0;
}
padding: var(--message-padding);
& p {
font-size: var(--font-size-base);
......@@ -38,20 +34,39 @@
}
}
@e img {
@e icon {
size: 40px;
position: absolute;
left: 0;
top: 0;
}
display: inline-block;
float: left;
text-align: center;
@e icon {
vertical-align: middle;
margin-right: 8px;
i {
line-height: 40px;
&.el-message__type {
color: var(--color-white);
}
}
@modifier info {
background-color: var(--color-info);
}
@modifier warning {
background-color: var(--color-warning);
}
@modifier error {
background-color: var(--color-danger);
}
@modifier success {
background-color: var(--color-success);
}
}
@e closeBtn {
position: absolute 3px 0 * *;
position: absolute 13px 12px * *;
cursor: pointer;
color: var(--message-close-color);
font-size: var(--font-size-base);
......
test/unit/specs/message.spec.js
View file @ 50e2f234
......@@ -41,6 +41,18 @@ describe('Message', () => {
}, 500);
});
it('custom icon', done => {
Message({
message: '夏天',
iconClass: 'el-icon-close'
});
setTimeout(() => {
const icon = document.querySelector('.el-message__icon i');
expect(icon.classList.contains('el-icon-close')).to.true;
done();
}, 500);
});
it('close all', done => {
Message({
message: '夏天',
......
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