chenhaodong / mew-iview

Commit b24be35a7e27a9d4ba185aca72ae8036b5e088ae

Authored by zhigang.li
1 parent 8a0cb3ce

make Message and Notice support render

Showing 8 changed files with 99 additions and 16 deletions   Show diff stats
Inline Side-by-side
examples/routers/message.vue
  Show/Hide comments   View file @b24be35
... ... @@ -13,12 +13,19 @@
13 13 info () {
14 14 // this.$Message.info('这是一条普通提示');
15 15 this.$Message.success({
16   - content: '这是一条普通提示2',
  16 + // content: '这是一条普通提示2',
17 17 duration: 500,
18 18 onClose () {
19 19 // console.log(123)
20 20 },
21   - closable: true
  21 + closable: true,
  22 + render (h) {
  23 + return h('Button',{
  24 + props: {
  25 + type: 'primary'
  26 + }
  27 + }, '这是render出来的');
  28 + }
22 29 })
23 30 },
24 31 success () {
... ...
examples/routers/notice.vue
  Show/Hide comments   View file @b24be35
1 1 <template>
2 2 <div>
3 3 <p>带描述信息</p>
  4 + <Button @click="normal(false)">普通</Button>
4 5 <Button @click="info(false)">消息</Button>
5 6 <Button @click="success(false)">成功</Button>
6 7 <Button @click="warning(false)">警告</Button>
... ... @@ -16,15 +17,30 @@
16 17 <script>
17 18 export default {
18 19 methods: {
  20 + normal (nodesc) {
  21 + this.$Notice.open({
  22 + title: 'google',
  23 + duration: 0,
  24 + desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述',
  25 + render (h) {
  26 + return h('span', {}, 'sdsdfsdf');
  27 + }
  28 + });
  29 + },
19 30 info (nodesc) {
20 31 this.$Notice.info({
21   - title: '这是通知标题',
22   - desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
  32 + // title: '这是通知标题',
  33 + duration: 0,
  34 + desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述',
  35 + render (h) {
  36 + return h('span', {}, 'sdsdfsdf');
  37 + }
23 38 });
24 39 },
25 40 success (nodesc) {
26 41 this.$Notice.success({
27 42 title: '这是通知标题',
  43 + duration: 0,
28 44 desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
29 45 });
30 46 },
... ...
src/components/base/notification/index.js
  Show/Hide comments   View file @b24be35
... ... @@ -5,7 +5,6 @@ Notification.newInstance = properties =&gt; {
5 5 const _props = properties || {};
6 6  
7 7 const Instance = new Vue({
8   - data: _props,
9 8 render (h) {
10 9 return h(Notification, {
11 10 props: _props
... ...
src/components/base/notification/notice.vue
  Show/Hide comments   View file @b24be35
... ... @@ -2,7 +2,12 @@
2 2 <transition :name="transitionName" @enter="handleEnter" @leave="handleLeave">
3 3 <div :class="classes" :style="styles">
4 4 <template v-if="type === 'notice'">
5   - <div :class="[baseClass + '-content']" ref="content" v-html="content"></div>
  5 + <div :class="contentClasses" ref="content" v-html="content"></div>
  6 + <div :class="contentWithIcon" ref="content">
  7 + <render-cell
  8 + :render="renderFunc"
  9 + ></render-cell>
  10 + </div>
6 11 <a :class="[baseClass + '-close']" @click="close" v-if="closable">
7 12 <i class="ivu-icon ivu-icon-ios-close-empty"></i>
8 13 </a>
... ... @@ -10,6 +15,11 @@
10 15 <template v-if="type === 'message'">
11 16 <div :class="[baseClass + '-content']" ref="content">
12 17 <div :class="[baseClass + '-content-text']" v-html="content"></div>
  18 + <div :class="[baseClass + '-content-text']">
  19 + <render-cell
  20 + :render="renderFunc"
  21 + ></render-cell>
  22 + </div>
13 23 <a :class="[baseClass + '-close']" @click="close" v-if="closable">
14 24 <i class="ivu-icon ivu-icon-ios-close-empty"></i>
15 25 </a>
... ... @@ -19,7 +29,11 @@
19 29 </transition>
20 30 </template>
21 31 <script>
  32 + import RenderCell from '../render';
22 33 export default {
  34 + components: {
  35 + RenderCell
  36 + },
23 37 props: {
24 38 prefixCls: {
25 39 type: String,
... ... @@ -36,6 +50,10 @@
36 50 type: String,
37 51 default: ''
38 52 },
  53 + withIcon: Boolean,
  54 + render: {
  55 + type: Function
  56 + },
39 57 styles: {
40 58 type: Object,
41 59 default: function() {
... ... @@ -71,6 +89,9 @@
71 89 baseClass () {
72 90 return `${this.prefixCls}-notice`;
73 91 },
  92 + renderFunc () {
  93 + return this.render || function () {};
  94 + },
74 95 classes () {
75 96 return [
76 97 this.baseClass,
... ... @@ -82,7 +103,22 @@
82 103 ];
83 104 },
84 105 contentClasses () {
85   - return `${this.baseClass}-content`;
  106 + return [
  107 + `${this.baseClass}-content`,
  108 + this.render !== undefined ? `${this.baseClass}-content-with-render` : ''
  109 + ];
  110 + },
  111 + contentWithIcon () {
  112 + return [
  113 + this.withIcon ? `${this.prefixCls}-content-with-icon` : '',
  114 + this.render && !this.title && this.withIcon ? `${this.prefixCls}-content-with-render-notitle` : ''
  115 + ];
  116 + },
  117 + messageClasses () {
  118 + return [
  119 + `${this.baseClass}-content`,
  120 + this.render !== undefined ? `${this.baseClass}-content-with-render` : ''
  121 + ];
86 122 }
87 123 },
88 124 methods: {
... ... @@ -124,7 +160,8 @@
124 160  
125 161 // check if with desc in Notice component
126 162 if (this.prefixCls === 'ivu-notice') {
127   - this.withDesc = this.$refs.content.querySelectorAll(`.${this.prefixCls}-desc`)[0].innerHTML !== '';
  163 + let desc = this.$refs.content.querySelectorAll(`.${this.prefixCls}-desc`)[0];
  164 + this.withDesc = this.render ? true : (desc ? desc.innerHTML !== '' : false);
128 165 }
129 166 },
130 167 beforeDestroy () {
... ...
src/components/base/notification/notification.vue
  Show/Hide comments   View file @b24be35
... ... @@ -8,6 +8,8 @@
8 8 :type="notice.type"
9 9 :content="notice.content"
10 10 :duration="notice.duration"
  11 + :render="notice.render"
  12 + :withIcon="notice.withIcon"
11 13 :closable="notice.closable"
12 14 :name="notice.name"
13 15 :transition-name="notice.transitionName"
... ...
src/components/message/index.js
  Show/Hide comments   View file @b24be35
... ... @@ -31,7 +31,7 @@ function getMessageInstance () {
31 31 return messageInstance;
32 32 }
33 33  
34   -function notice (content = '', duration = defaults.duration, type, onClose = function () {}, closable = false) {
  34 +function notice (content = '', duration = defaults.duration, type, onClose = function () {}, closable = false, render = function () {}) {
35 35 const iconType = iconTypes[type];
36 36  
37 37 // if loading
... ... @@ -50,6 +50,7 @@ function notice (content = &#39;&#39;, duration = defaults.duration, type, onClose = fun
50 50 <span>${content}</span>
51 51 </div>
52 52 `,
  53 + render: render,
53 54 onClose: onClose,
54 55 closable: closable,
55 56 type: 'message'
... ... @@ -89,7 +90,7 @@ export default {
89 90 content: options
90 91 };
91 92 }
92   - return notice(options.content, options.duration, type, options.onClose, options.closable);
  93 + return notice(options.content, options.duration, type, options.onClose, options.closable, options.render);
93 94 },
94 95 config (options) {
95 96 if (options.top || options.top === 0) {
... ...
src/components/notice/index.js
  Show/Hide comments   View file @b24be35
... ... @@ -33,6 +33,7 @@ function notice (type, options) {
33 33 const desc = options.desc || '';
34 34 const noticeKey = options.name || `${prefixKey}${name}`;
35 35 const onClose = options.onClose || function () {};
  36 + const render = options.render;
36 37 // todo const btn = options.btn || null;
37 38 const duration = (options.duration === 0) ? 0 : options.duration || defaultDuration;
38 39  
... ... @@ -42,9 +43,12 @@ function notice (type, options) {
42 43  
43 44 let content;
44 45  
45   - const with_desc = desc === '' ? '' : ` ${prefixCls}-with-desc`;
  46 + let withIcon;
  47 +
  48 + const with_desc = (options.render && !title) ? '' : desc === '' ? '' : ` ${prefixCls}-with-desc`;
46 49  
47 50 if (type == 'normal') {
  51 + withIcon = false;
48 52 content = `
49 53 <div class="${prefixCls}-custom-content ${prefixCls}-with-normal${with_desc}">
50 54 <div class="${prefixCls}-title">${title}</div>
... ... @@ -53,6 +57,7 @@ function notice (type, options) {
53 57 `;
54 58 } else {
55 59 const iconType = iconTypes[type];
  60 + withIcon = true;
56 61 content = `
57 62 <div class="${prefixCls}-custom-content ${prefixCls}-with-icon ${prefixCls}-with-${type}${with_desc}">
58 63 <span class="${prefixCls}-icon ${prefixCls}-icon-${type}">
... ... @@ -63,13 +68,14 @@ function notice (type, options) {
63 68 </div>
64 69 `;
65 70 }
66   -
67 71 instance.notice({
68 72 name: noticeKey.toString(),
69 73 duration: duration,
70 74 styles: {},
71 75 transitionName: 'move-notice',
72 76 content: content,
  77 + withIcon: withIcon,
  78 + render: render,
73 79 onClose: onClose,
74 80 closable: true,
75 81 type: 'notice'
... ...
src/styles/components/notice.less
  Show/Hide comments   View file @b24be35
... ... @@ -11,10 +11,17 @@
11 11 position: fixed;
12 12 z-index: @zindex-notification;
13 13  
  14 + &-content-with-icon{
  15 + margin-left: 51px;
  16 + }
  17 + &-with-desc&-with-icon &-title{
  18 + margin-left: 51px;
  19 + }
  20 +
14 21 &-notice {
15 22 margin-bottom: @notice-margin-bottom;
16 23 padding: @notice-padding;
17   - //border: 1px solid @border-color-split;
  24 + border: 1px solid @border-color-split;
18 25 border-radius: @border-radius-small;
19 26 box-shadow: @shadow-base;
20 27 background: #fff;
... ... @@ -34,6 +41,12 @@
34 41 }
35 42 }
36 43  
  44 + &-content-with-render{
  45 + .ivu-notice-desc{
  46 + display: none;
  47 + }
  48 + }
  49 +
37 50 &-with-desc{
38 51 .@{notice-prefix-cls}-notice-close{
39 52 top: 11px;
... ... @@ -41,8 +54,13 @@
41 54 }
42 55 }
43 56  
  57 + &-content-with-render-notitle{
  58 + margin-left: 26px;
  59 + }
  60 +
44 61 &-title {
45 62 font-size: @font-size-base;
  63 + line-height: @font-size-base + 3; //fixed the bug that the bottom of some letters were hidden just like 'g'
46 64 color: @title-color;
47 65 padding-right: 10px;
48 66 overflow: hidden;
... ... @@ -53,9 +71,6 @@
53 71 font-weight: bold;
54 72 margin-bottom: 8px;
55 73 }
56   - &-with-desc&-with-icon &-title{
57   - margin-left: 51px;
58   - }
59 74  
60 75 &-desc {
61 76 font-size: 12px;
... ...