diff --git a/docs/components/alert/README.md b/docs/components/alert/README.md index bedee189d8f..47b5fc6df37 100755 --- a/docs/components/alert/README.md +++ b/docs/components/alert/README.md @@ -17,7 +17,7 @@ Dismissible Alert! - + This alert will dismiss after {{dismissCountDown}} seconds... @@ -76,3 +76,5 @@ with the dismiss button. #### Auto dismissing alerts: To create a `` that dismisses automatically after a period of time, set the `show` prop to the number of seconds you would like the `` to remain visible for. + +Note that the dismiss button will not be shown for auto-dismissing alerts. diff --git a/examples/alert/demo.html b/examples/alert/demo.html index de4a314785e..f2d60aacb16 100755 --- a/examples/alert/demo.html +++ b/examples/alert/demo.html @@ -22,7 +22,6 @@ @@ -34,4 +33,4 @@ Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}}) - \ No newline at end of file + diff --git a/lib/components/alert.vue b/lib/components/alert.vue index c826af127d8..9072bd22f64 100755 --- a/lib/components/alert.vue +++ b/lib/components/alert.vue @@ -9,7 +9,7 @@ class="close" data-dismiss="alert" :aria-label="dismissLabel" - v-if="dismissible" + v-if="localDismissible" @click.stop.prevent="dismiss" > @@ -25,7 +25,8 @@ data() { return { countDownTimerId: null, - dismissed: false + dismissed: false, + localDismissible: this.dismissible }; }, created() { @@ -35,7 +36,7 @@ }, computed: { classObject() { - return ['alert', this.alertVariant, this.dismissible ? 'alert-dismissible' : '']; + return ['alert', this.alertVariant, this.localDismissible ? 'alert-dismissible' : '']; }, alertVariant() { const variant = this.state || this.variant || 'info'; @@ -92,9 +93,13 @@ // No timer for boolean values if (this.show === true || this.show === false || this.show === null || this.show === 0) { + this.localDismissible = this.dismissible; return; } + // Hide dismiss button for auto-dismissing + this.localDismissible = false; + let dismissCountDown = this.show; this.$emit('dismiss-count-down', dismissCountDown);