Commit 3f7a5f1a27afd3d735de2aeadc74f320f6d3a12a
1 parent
baa75b0a
udpate notice
Showing
7 changed files
with
22 additions
and
7 deletions
Show diff stats
examples/routers/message.vue
| @@ -13,7 +13,7 @@ | @@ -13,7 +13,7 @@ | ||
| 13 | info () { | 13 | info () { |
| 14 | // this.$Message.info('这是一条普通提示'); | 14 | // this.$Message.info('这是一条普通提示'); |
| 15 | this.$Message.success({ | 15 | this.$Message.success({ |
| 16 | - // content: '这是一条普通提示2', | 16 | + content: '这是一条普通提示2', |
| 17 | duration: 500, | 17 | duration: 500, |
| 18 | onClose () { | 18 | onClose () { |
| 19 | // console.log(123) | 19 | // console.log(123) |
examples/routers/notice.vue
| @@ -37,11 +37,18 @@ | @@ -37,11 +37,18 @@ | ||
| 37 | } | 37 | } |
| 38 | }); | 38 | }); |
| 39 | }, | 39 | }, |
| 40 | - success (nodesc) { | 40 | + success () { |
| 41 | this.$Notice.success({ | 41 | this.$Notice.success({ |
| 42 | title: '这是通知标题', | 42 | title: '这是通知标题', |
| 43 | - duration: 0, | ||
| 44 | - desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述' | 43 | + desc: '当你定义了render之后，这个描述会被覆盖', |
| 44 | + render: h => { | ||
| 45 | + return h('span', {}, [ | ||
| 46 | + '这是', | ||
| 47 | + h('Button', {props: {type: 'text'}}, 'render'), | ||
| 48 | + '函数渲染的' | ||
| 49 | + ]); | ||
| 50 | + }, | ||
| 51 | + duration: 0 | ||
| 45 | }); | 52 | }); |
| 46 | }, | 53 | }, |
| 47 | warning (nodesc) { | 54 | warning (nodesc) { |
examples/routers/tag.vue
| @@ -19,6 +19,11 @@ | @@ -19,6 +19,11 @@ | ||
| 19 | <Tag type="dot" closable color="#EF6AFF" checkable>标签三</Tag> | 19 | <Tag type="dot" closable color="#EF6AFF" checkable>标签三</Tag> |
| 20 | <Tag closable color="default" checkable>标签四</Tag> | 20 | <Tag closable color="default" checkable>标签四</Tag> |
| 21 | <br><br> | 21 | <br><br> |
| 22 | + <Tag closable color="#EF6AFF">标签一</Tag> | ||
| 23 | + <Tag type="border" closable color="#EF6AFF">标签二</Tag> | ||
| 24 | + <Tag type="dot" closable color="#EF6AFF">标签三</Tag> | ||
| 25 | + <Tag closable color="default">标签四</Tag> | ||
| 26 | + <br><br> | ||
| 22 | <Tag type="border" closable color="blue" checkable>标签一</Tag> | 27 | <Tag type="border" closable color="blue" checkable>标签一</Tag> |
| 23 | <Tag type="border" closable color="green">标签二</Tag> | 28 | <Tag type="border" closable color="green">标签二</Tag> |
| 24 | <Tag type="border" closable color="red">标签三</Tag> | 29 | <Tag type="border" closable color="red">标签三</Tag> |
src/components/base/notification/notice.vue
| @@ -54,6 +54,7 @@ | @@ -54,6 +54,7 @@ | ||
| 54 | render: { | 54 | render: { |
| 55 | type: Function | 55 | type: Function |
| 56 | }, | 56 | }, |
| 57 | + hasTitle: Boolean, | ||
| 57 | styles: { | 58 | styles: { |
| 58 | type: Object, | 59 | type: Object, |
| 59 | default: function() { | 60 | default: function() { |
| @@ -111,7 +112,7 @@ | @@ -111,7 +112,7 @@ | ||
| 111 | contentWithIcon () { | 112 | contentWithIcon () { |
| 112 | return [ | 113 | return [ |
| 113 | this.withIcon ? `${this.prefixCls}-content-with-icon` : '', | 114 | this.withIcon ? `${this.prefixCls}-content-with-icon` : '', |
| 114 | - this.render && !this.title && this.withIcon ? `${this.prefixCls}-content-with-render-notitle` : '' | 115 | + !this.hasTitle && this.withIcon ? `${this.prefixCls}-content-with-render-notitle` : '' |
| 115 | ]; | 116 | ]; |
| 116 | }, | 117 | }, |
| 117 | messageClasses () { | 118 | messageClasses () { |
src/components/base/notification/notification.vue
| @@ -9,6 +9,7 @@ | @@ -9,6 +9,7 @@ | ||
| 9 | :content="notice.content" | 9 | :content="notice.content" |
| 10 | :duration="notice.duration" | 10 | :duration="notice.duration" |
| 11 | :render="notice.render" | 11 | :render="notice.render" |
| 12 | + :has-title="notice.hasTitle" | ||
| 12 | :withIcon="notice.withIcon" | 13 | :withIcon="notice.withIcon" |
| 13 | :closable="notice.closable" | 14 | :closable="notice.closable" |
| 14 | :name="notice.name" | 15 | :name="notice.name" |
src/components/notice/index.js
| @@ -76,6 +76,7 @@ function notice (type, options) { | @@ -76,6 +76,7 @@ function notice (type, options) { | ||
| 76 | content: content, | 76 | content: content, |
| 77 | withIcon: withIcon, | 77 | withIcon: withIcon, |
| 78 | render: render, | 78 | render: render, |
| 79 | + hasTitle: !!title, | ||
| 79 | onClose: onClose, | 80 | onClose: onClose, |
| 80 | closable: true, | 81 | closable: true, |
| 81 | type: 'notice' | 82 | type: 'notice' |
src/components/tag/tag.vue
| @@ -51,7 +51,7 @@ | @@ -51,7 +51,7 @@ | ||
| 51 | return [ | 51 | return [ |
| 52 | `${prefixCls}`, | 52 | `${prefixCls}`, |
| 53 | { | 53 | { |
| 54 | - [`${prefixCls}-${this.color}`]: !!this.color, | 54 | + [`${prefixCls}-${this.color}`]: !!this.color && oneOf(this.color, initColorList), |
| 55 | [`${prefixCls}-${this.type}`]: !!this.type, | 55 | [`${prefixCls}-${this.type}`]: !!this.type, |
| 56 | [`${prefixCls}-closable`]: this.closable, | 56 | [`${prefixCls}-closable`]: this.closable, |
| 57 | [`${prefixCls}-checked`]: this.isChecked | 57 | [`${prefixCls}-checked`]: this.isChecked |
| @@ -75,7 +75,7 @@ | @@ -75,7 +75,7 @@ | ||
| 75 | if (this.type === 'dot') { | 75 | if (this.type === 'dot') { |
| 76 | return ''; | 76 | return ''; |
| 77 | } else if (this.type === 'border') { | 77 | } else if (this.type === 'border') { |
| 78 | - return `${prefixCls}-color-${this.color}`; | 78 | + return oneOf(this.color, initColorList) ? `${prefixCls}-color-${this.color}` : ''; |
| 79 | } else { | 79 | } else { |
| 80 | return this.color !== undefined ? (this.color === 'default' ? '' : 'rgb(255, 255, 255)') : ''; | 80 | return this.color !== undefined ? (this.color === 'default' ? '' : 'rgb(255, 255, 255)') : ''; |
| 81 | } | 81 | } |