diff --git a/examples/docs/en-US/alert.md b/examples/docs/en-US/alert.md index 7369a72bd..a83f7f2c8 100644 --- a/examples/docs/en-US/alert.md +++ b/examples/docs/en-US/alert.md @@ -118,6 +118,42 @@ Displaying an icon improves readability. ``` ::: +## Centered text + +Use the `center` attribute to center the text. + +::: demo + +```html +<template> + <el-alert + title="success alert" + type="success" + center + show-icon> + </el-alert> + <el-alert + title="info alert" + type="info" + center + show-icon> + </el-alert> + <el-alert + title="warning alert" + type="warning" + center + show-icon> + </el-alert> + <el-alert + title="error alert" + type="error" + center + show-icon> + </el-alert> +</template> +``` +::: + ### With description Description includes a message with more detailed information. @@ -176,6 +212,7 @@ Description includes a message with more detailed information. | type | component type | string | success/warning/info/error | info | | description | descriptive text. Can also be passed with the default slot | string | — | — | | closable | if closable or not | boolean | — | true | +| center | whether to center the text | boolean | — | false | | close-text | customized close button text | string | — | — | | show-icon | if a type icon is displayed | boolean | — | false | diff --git a/examples/docs/en-US/message.md b/examples/docs/en-US/message.md index fd6e92054..fabc441c7 100644 --- a/examples/docs/en-US/message.md +++ b/examples/docs/en-US/message.md @@ -214,7 +214,7 @@ A close button can be added. ::: ### Centered text -Use the `center` attribute to center the text +Use the `center` attribute to center the text. :::demo diff --git a/examples/docs/zh-CN/alert.md b/examples/docs/zh-CN/alert.md index 09451c5b4..4208cc98b 100644 --- a/examples/docs/zh-CN/alert.md +++ b/examples/docs/zh-CN/alert.md @@ -115,6 +115,41 @@ ``` ::: +### 文字居中 + +使用 `center` 属性让文字水平居中。 + +::: demo +```html +<template> + <el-alert + title="成功提示的文案" + type="success" + center + show-icon> + </el-alert> + <el-alert + title="消息提示的文案" + type="info" + center + show-icon> + </el-alert> + <el-alert + title="警告提示的文案" + type="warning" + center + show-icon> + </el-alert> + <el-alert + title="错误提示的文案" + type="error" + center + show-icon> + </el-alert> +</template> +``` +::: + ### 带有辅助性文字介绍 包含标题和内容,解释更详细的警告。 @@ -171,6 +206,7 @@ | type | 主题 | string | success/warning/info/error | info | | description | 辅助性文字。也可通过默认 slot 传入 | string | — | — | | closable | 是否可关闭 | boolean | — | true | +| center | 文字是否居中 | boolean | — | true | | close-text | 关闭按钮自定义文本 | string | — | — | | show-icon | 是否显示图标 | boolean | — | false | diff --git a/examples/docs/zh-CN/message.md b/examples/docs/zh-CN/message.md index 00f88cdb9..776879efd 100644 --- a/examples/docs/zh-CN/message.md +++ b/examples/docs/zh-CN/message.md @@ -214,7 +214,7 @@ ::: ### 文字居中 -使用 `center` 属性让文字水平居中 +使用 `center` 属性让文字水平居中。 :::demo diff --git a/packages/alert/src/main.vue b/packages/alert/src/main.vue index de8609386..30eb620b2 100644 --- a/packages/alert/src/main.vue +++ b/packages/alert/src/main.vue @@ -2,7 +2,7 @@ <transition name="el-alert-fade"> <div class="el-alert" - :class="[ typeClass ]" + :class="[typeClass, center ? 'is-center' : '']" v-show="visible" role="alert" > @@ -20,9 +20,9 @@ <script type="text/babel"> const TYPE_CLASSES_MAP = { - 'success': 'el-icon-circle-check', + 'success': 'el-icon-success', 'warning': 'el-icon-warning', - 'error': 'el-icon-circle-cross' + 'error': 'el-icon-error' }; export default { name: 'ElAlert', @@ -49,10 +49,8 @@ type: String, default: '' }, - showIcon: { - type: Boolean, - default: false - } + showIcon: Boolean, + center: Boolean }, data() { @@ -74,7 +72,7 @@ }, iconClass() { - return TYPE_CLASSES_MAP[this.type] || 'el-icon-information'; + return TYPE_CLASSES_MAP[this.type] || 'el-icon-info'; }, isBigIcon() { diff --git a/packages/theme-chalk/src/alert.scss b/packages/theme-chalk/src/alert.scss index 7820e246d..659ac43e6 100644 --- a/packages/theme-chalk/src/alert.scss +++ b/packages/theme-chalk/src/alert.scss @@ -10,25 +10,49 @@ position: relative; background-color: $--color-white; overflow: hidden; - color: $--color-white; opacity: 1; - display: table; + display: flex; + align-items: center; transition: opacity .2s; + @include when(center) { + justify-content: center; + } + @include m(success) { background-color: $--alert-success-color; + color: $--color-success; + + .el-alert__description { + color: $--color-success; + } } @include m(info) { background-color: $--alert-info-color; + color: $--color-info; + + .el-alert__description { + color: $--color-info; + } } @include m(warning) { background-color: $--alert-warning-color; + color: $--color-warning; + + .el-alert__description { + color: $--color-warning; + } } @include m(error) { background-color: $--alert-danger-color; + color: $--color-danger; + + .el-alert__description { + color: $--color-danger; + } } @include e(content) { @@ -39,9 +63,6 @@ @include e(icon) { font-size: $--alert-icon-size; width: $--alert-icon-size; - display: table-cell; - color: $--color-white; - vertical-align: middle; @include when(big) { font-size: $--alert-icon-large-size; width: $--alert-icon-large-size; @@ -57,14 +78,13 @@ } & .el-alert__description { - color: $--color-white; font-size: $--alert-description-font-size; margin: 5px 0 0 0; } @include e(closebtn) { font-size: $--alert-close-font-size; - color: $--color-white; + color: $--color-text-placeholder; opacity: 1; position: absolute; top: 12px; diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss index 28eb93db2..54001abf4 100644 --- a/packages/theme-chalk/src/common/var.scss +++ b/packages/theme-chalk/src/common/var.scss @@ -234,10 +234,10 @@ $--alert-description-font-size: 12px; $--alert-close-font-size: 12px; $--alert-close-customed-font-size: 13px; -$--alert-success-color: $--color-success; -$--alert-info-color: $--color-info; -$--alert-warning-color: $--color-warning; -$--alert-danger-color: $--color-danger; +$--alert-success-color: $--color-success-lighter; +$--alert-info-color: $--color-info-lighter; +$--alert-warning-color: $--color-warning-lighter; +$--alert-danger-color: $--color-danger-lighter; $--alert-icon-size: 16px; $--alert-icon-large-size: 28px; diff --git a/packages/theme-chalk/src/message.scss b/packages/theme-chalk/src/message.scss index a0932bf15..57f58a042 100644 --- a/packages/theme-chalk/src/message.scss +++ b/packages/theme-chalk/src/message.scss @@ -12,7 +12,7 @@ left: 50%; top: 20px; transform: translateX(-50%); - background-color: $--border-color-extra-light; + background-color: $--color-info-lighter; transition: opacity 0.3s, transform .4s; overflow: hidden; padding: $--message-padding; diff --git a/test/unit/specs/alert.spec.js b/test/unit/specs/alert.spec.js index e9d1149a9..502cca25a 100644 --- a/test/unit/specs/alert.spec.js +++ b/test/unit/specs/alert.spec.js @@ -23,7 +23,6 @@ describe('Alert', () => { showIcon: true }, true); expect(vm.$el.classList.contains('el-alert--success')).to.true; - expect(vm.$el.querySelector('.el-icon-circle-check')).to.exist; }); it('description', () => {