diff --git a/examples/docs/en-US/notification.md b/examples/docs/en-US/notification.md index 80261ff48..5f143e82e 100644 --- a/examples/docs/en-US/notification.md +++ b/examples/docs/en-US/notification.md @@ -80,7 +80,7 @@ }, open11() { - this.$notify({ + this.$notify.success({ title: 'Success', message: 'This is a success message', offset: 100 @@ -310,7 +310,7 @@ Customize Notification's offset from the edge of the screen. export default { methods: { open11() { - this.$notify({ + this.$notify.success({ title: 'Success', message: 'This is a success message', offset: 100 @@ -351,7 +351,11 @@ Customize Notification's offset from the edge of the screen. ``` ::: -### Hide Close button +:::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. +::: + +### Hide close button It is possible to hide the close button @@ -381,10 +385,6 @@ It is possible to hide the close button ``` ::: -:::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. -::: - ### Global method Element has added a global method `$notify` for Vue.prototype. So in a vue instance you can call `Notification` like what we did in this page. @@ -415,7 +415,7 @@ In this case you should call `Notification(options)`. We have also registered me | offset | offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset | number | — | 0 | ### Methods -`Notification` and `this.$notify` returns the current Message instance. To manually close the instance, you can call `close` on it. +`Notification` and `this.$notify` returns the current Notification instance. To manually close the instance, you can call `close` on it. | Method | Description | | ---- | ---- | | close | close the Notification | diff --git a/examples/docs/zh-CN/notification.md b/examples/docs/zh-CN/notification.md index 0a68d2abd..ce0a6e3c0 100644 --- a/examples/docs/zh-CN/notification.md +++ b/examples/docs/zh-CN/notification.md @@ -95,6 +95,14 @@ }); }, + open13() { + this.$notify.success({ + title: 'Info', + message: '这是一条没有关闭按钮的消息', + showClose: false + }); + }, + onClose() { console.log('Notification 已关闭'); } @@ -348,6 +356,36 @@ `message` 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。因此在 `dangerouslyUseHTMLString` 打开的情况下，请确保 `message` 的内容是可信的，**永远不要**将用户提交的内容赋值给 `message` 属性。 ::: +### 隐藏关闭按钮 + +可以不显示关闭按钮 + +::: demo 将`showClose`属性设置为`false`即可隐藏关闭按钮。 +```html + + + +``` +::: + ### 全局方法 Element 为 `Vue.prototype` 添加了全局方法 `$notify`。因此在 vue instance 中可以采用本页面中的方式调用 Notification。 @@ -372,6 +410,7 @@ import { Notification } from 'element-ui'; | iconClass | 自定义图标的类名。若设置了 `type`，则 `iconClass` 会被覆盖 | string | — | — | | customClass | 自定义类名 | string | — | — | | duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 4500 | +| showClose | 是否显示关闭按钮 | boolean | — | true | | onClose | 关闭时的回调函数 | function | — | — | | onClick | 点击 Notification 时的回调函数 | function | — | — | | offset | 偏移的距离，在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量 | number | — | 0 | diff --git a/packages/cascader/src/main.vue b/packages/cascader/src/main.vue index c4b0401b2..b26f16b66 100644 --- a/packages/cascader/src/main.vue +++ b/packages/cascader/src/main.vue @@ -63,7 +63,6 @@ import emitter from 'element-ui/src/mixins/emitter'; import Locale from 'element-ui/src/mixins/locale'; import { t } from 'element-ui/src/locale'; import debounce from 'throttle-debounce/debounce'; -import merge from 'element-ui/src/utils/merge'; const popperMixin = { props: { @@ -77,9 +76,7 @@ const popperMixin = { popperOptions: Popper.props.popperOptions }, methods: Popper.methods, - data() { - return merge({ visibleArrow: true }, Popper.data); - }, + data: Popper.data, beforeDestroy: Popper.beforeDestroy }; diff --git a/packages/cascader/src/menu.vue b/packages/cascader/src/menu.vue index 74b74bea9..706754164 100644 --- a/packages/cascader/src/menu.vue +++ b/packages/cascader/src/menu.vue @@ -207,6 +207,7 @@ ]} ref="wrapper" > +
{menus} diff --git a/packages/theme-chalk/src/cascader.scss b/packages/theme-chalk/src/cascader.scss index cc5a5269c..63e45412b 100644 --- a/packages/theme-chalk/src/cascader.scss +++ b/packages/theme-chalk/src/cascader.scss @@ -16,8 +16,9 @@ transition: none; } - .el-icon-caret-bottom { + .el-icon-arrow-down { transition: transform .3s; + font-size: 12px; @include when(reverse) { transform: rotateZ(180deg); @@ -136,10 +137,6 @@ box-sizing: border-box; cursor: pointer; - @include e(keyword) { - font-weight: bold; - } - @include m(extensible) { &:after { font-family: 'element-icons'; @@ -177,6 +174,10 @@ } } + @include e(item__keyword) { + font-weight: bold; + } + @include m(flexible) { height: auto; max-height: 180px; diff --git a/packages/theme-chalk/src/index.scss b/packages/theme-chalk/src/index.scss index 3deaaf66d..aed930721 100644 --- a/packages/theme-chalk/src/index.scss +++ b/packages/theme-chalk/src/index.scss @@ -1,4 +1,5 @@ @import "./base.scss"; +@import "./pagination.scss"; @import "./dialog.scss"; @import "./autocomplete.scss"; @import "./dropdown.scss"; @@ -10,7 +11,6 @@ @import "./menu-item-group.scss"; @import "./input.scss"; @import "./input-number.scss"; -@import "./pagination.scss"; @import "./radio.scss"; @import "./radio-group.scss"; @import "./radio-button.scss";