Alert add prop: fade

view-design · Sep 14, 2021 · 70f7707 · 70f7707
1 parent 02330ed
commit 70f7707
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/examples/routers/alert.vue b/examples/routers/alert.vue
@@ -1,6 +1,7 @@
 <template>
     <div>
-        <Alert>
+        <Button @click="show = !show">toggle show</Button>
+        <Alert v-if="show" :fade="false">
             An info prompt
             <template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
         </Alert>
@@ -56,7 +57,7 @@
             A success prompt
             <span slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </span>
         </Alert>
-        <Alert type="warning" closable>
+        <Alert type="warning" closable :fade="false">
             Custom closing content
             <span slot="close">No longer prompt</span>
         </Alert>
@@ -65,6 +66,11 @@
 <script>
     import { Alert, Icon } from 'iview';
     export default {
-        components: { Alert, Icon }
+        components: { Alert, Icon },
+        data () {
+            return {
+                show: true
+            }
+        }
     }
 </script>
diff --git a/src/components/alert/alert.vue b/src/components/alert/alert.vue
@@ -1,5 +1,5 @@
 <template>
-    <transition name="fade">
+    <transition :name="fade ? 'fade' : ''">
         <div v-if="!closed" :class="wrapClasses">
             <span :class="iconClasses" v-if="showIcon">
                 <slot name="icon">
@@ -43,6 +43,10 @@
             banner: {
                 type: Boolean,
                 default: false
+            },
+            fade: {
+                type: Boolean,
+                default: true
             }
         },
         data () {