support Alert

support Alert

src/components/alert/alert.vue

@@ -1,18 +1,20 @@
 <template>
-    <div v-if="!closed" :class="wrapClasses" transition="fade">
-        <span :class="iconClasses" v-if="showIcon">
-            <slot name="icon">
-                <Icon :type="iconType"></Icon>
-            </slot>
-        </span>
-        <span :class="messageClasses"><slot></slot></span>
-        <span :class="descClasses" v-el:desc><slot name="desc"></slot></span>
-        <a :class="closeClasses" v-if="closable" @click="close">
-            <slot name="close">
-                <Icon type="ios-close-empty"></Icon>
-            </slot>
-        </a>
-    </div>
+    <transition name="fade">
+        <div v-if="!closed" :class="wrapClasses">
+            <span :class="iconClasses" v-if="showIcon">
+                <slot name="icon">
+                    <Icon :type="iconType"></Icon>
+                </slot>
+            </span>
+            <span :class="messageClasses"><slot></slot></span>
+            <span :class="descClasses"><slot name="desc"></slot></span>
+            <a :class="closeClasses" v-if="closable" @click="close">
+                <slot name="close">
+                    <Icon type="ios-close-empty"></Icon>
+                </slot>
+            </a>
+        </div>
+    </transition>
 </template>
 <script>
     import Icon from '../icon';
@@ -40,7 +42,7 @@
             banner: {
                 type: Boolean,
                 default: false
-            },
+            }
         },
         data () {
             return {
@@ -99,8 +101,8 @@
                 this.$emit('on-close', e);
             }
         },
-        compiled () {
-            this.desc = this.$els.desc.innerHTML != '';
+        mounted () {
+            this.desc = this.$slots.desc !== undefined;
         }
     };
 </script>

src/components/switch/switch.vue

@@ -30,7 +30,7 @@
         data () {
             return {
                 currentValue: this.value
-            }
+            };
         },
         computed: {
             wrapClasses () {

src/index.js

@@ -2,7 +2,7 @@
 import 'core-js/fn/array/find-index';
 
 import Affix from './components/affix';
-// import Alert from './components/alert';
+import Alert from './components/alert';
 // import BackTop from './components/back-top';
 // import Badge from './components/badge';
 // import Breadcrumb from './components/breadcrumb';
@@ -48,7 +48,7 @@ import locale from './locale';
 
 const iview = {
     Affix,
-    // Alert,
+    Alert,
     // BackTop,
     // Badge,
     // Breadcrumb,

src/styles/animation/ease.less

@@ -1,11 +1,11 @@
 .ease-motion(@className, @keyframeName) {
     .make-motion(@className, @keyframeName);
-    .@{className}-enter, .@{className}-appear {
+    .@{className}-enter-active, .@{className}-appear {
         opacity: 0;
         animation-timing-function: linear;
         animation-duration: @transition-time;
     }
-    .@{className}-leave {
+    .@{className}-leave-active {
         animation-timing-function: linear;
         animation-duration: @transition-time;
     }

src/styles/animation/fade.less

@@ -1,10 +1,10 @@
 .fade-motion(@className, @keyframeName) {
     .make-motion(@className, @keyframeName);
-    .@{className}-enter, .@{className}-appear {
+    .@{className}-enter-active, .@{className}-appear {
         opacity: 0;
         animation-timing-function: linear;
     }
-    .@{className}-leave {
+    .@{className}-leave-active {
         animation-timing-function: linear;
     }
 }

src/styles/animation/index.less

@@ -4,19 +4,19 @@
 }
 
 .make-motion(@className, @keyframeName) {
-    .@{className}-enter, .@{className}-appear {
+    .@{className}-enter-active, .@{className}-appear {
         .motion-common();
         animation-play-state: paused;
     }
-    .@{className}-leave {
+    .@{className}-leave-active {
         .motion-common();
         animation-play-state: paused;
     }
-    .@{className}-enter, .@{className}-appear {
+    .@{className}-enter-active, .@{className}-appear {
         animation-name: ~"@{keyframeName}In";
         animation-play-state: running;
     }
-    .@{className}-leave {
+    .@{className}-leave-active {
         animation-name: ~"@{keyframeName}Out";
         animation-play-state: running;
     }

src/styles/animation/move.less

@@ -1,10 +1,10 @@
 .move-motion(@className, @keyframeName) {
     .make-motion(@className, @keyframeName);
-    .@{className}-enter, .@{className}-appear {
+    .@{className}-enter-active, .@{className}-appear {
         opacity: 0;
         animation-timing-function: @ease-in-out;
     }
-    .@{className}-leave {
+    .@{className}-leave-active {
         animation-timing-function: @ease-in-out;
     }
 }

src/styles/animation/slide.less

@@ -1,10 +1,10 @@
 .slide-motion(@className, @keyframeName) {
     .make-motion(@className, @keyframeName);
-    .@{className}-enter, .@{className}-appear {
+    .@{className}-enter-active, .@{className}-appear {
         opacity: 0;
         animation-timing-function: @ease-in-out;
     }
-    .@{className}-leave {
+    .@{className}-leave-active {
         animation-timing-function: @ease-in-out;
     }
 }