Message & Notice support SSR

build/webpack.dev.config.js

@@ -27,7 +27,8 @@ module.exports = merge(webpackBaseConfig, {
     resolve: {
         alias: {
             iview: '../../src/index',
-            vue: 'vue/dist/vue.js'
+            // vue: 'vue/dist/vue.js'
+            vue: 'vue/dist/vue.runtime.js'
         }
     },
     plugins: [

examples/routers/notice.vue

@@ -1,21 +1,44 @@
 <template>
-    <i-button type="primary" @click.native="time">打开提醒</i-button>
+    <div>
+        <p>带描述信息</p>
+        <Button @click="info(false)">消息</Button>
+        <Button @click="success(false)">成功</Button>
+        <Button @click="warning(false)">警告</Button>
+        <Button @click="error(false)">错误</Button>
+        <p>仅标题</p>
+        <Button @click="info(true)">消息</Button>
+        <Button @click="success(true)">成功</Button>
+        <Button @click="warning(true)">警告</Button>
+        <Button @click="error(true)">错误</Button>
+    </div>
 </template>
 <script>
     export default {
         methods: {
-            time () {
+            info (nodesc) {
-                this.$Notice.open({
+                this.$Notice.info({
                     title: '这是通知标题',
-                    desc: '这条通知不会自动关闭，需要点击关闭按钮才可以关闭。'
+                    desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
+                });
+            },
+            success (nodesc) {
+                this.$Notice.success({
+                    title: '这是通知标题',
+                    desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
+                });
+            },
+            warning (nodesc) {
+                this.$Notice.warning({
+                    title: '这是通知标题',
+                    desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
+                });
+            },
+            error (nodesc) {
+                this.$Notice.error({
+                    title: '这是通知标题',
+                    desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
                 });
             }
-        },
-        mounted () {
-            this.$Notice.config({
-                top: 150,
-                duration: 30
-            });
         }
     }
 </script>

src/components/base/notification/index.js

@@ -10,15 +10,18 @@ Notification.newInstance = properties => {
         props += ' :' + camelcaseToHyphen(prop) + '=' + prop;
     });
 
-    const div = document.createElement('div');
+    const Instance = new Vue({
-    div.innerHTML = `<notification${props}></notification>`;
-    document.body.appendChild(div);
-
-    const notification = new Vue({
-        el: div,
         data: _props,
-        components: { Notification }
+        render (h) {
-    }).$children[0];
+            return h(Notification, {
+                props: _props
+            })
+        }
+    });
+
+    const component = Instance.$mount();
+    document.body.appendChild(component.$el);
+    const notification = Instance.$children[0];
 
     return {
         notice (noticeProps) {