Detailed explanation of Alert in vue component-JS Tutorial-php.cn

Detailed explanation of Alert in vue component

小云云

Release： 2018-01-15 13:27:11

Original

10713 people have browsed it

This article mainly introduces the implementation code of Alert in the vue component. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Preface

This article mainly provides the general framework of the Alert component and provides a small number of configurable options. Aimed at roughly providing ideas

Alert

is used to display important prompt information on the page.

templat template structure

<template>
 <p v-show="visible" class="Alert">
  <i v-show="closable" class="iconhandle close" @click="close"></i>
  <slot></slot>
 </p>
</template>

Copy after login

Rough structure alert box, icon icon, slot interpolation (other style color options. ..)

If you need animation, you can use the Vue built-in component transition on the outer package

<transition name="alert-fade">
</transition>

Copy after login

script

export default {
 name: &#39;Alert&#39;,

 props: {
  closable: {
   type: Boolean,
   default: true
  },
  show: {
   type: Boolean,
   default: true,
   twoWay: true
  },
  type: {
   type: String,
   default: &#39;info&#39;
  }
 },
 data() {
  return {
   visible: this.show
  };
 },
 methods: {
  close() {
   this.visible = false;
   this.$emit(&#39;update:show&#39;, false);
   this.$emit(&#39;close&#39;);
  }
 }
};

Copy after login

name: The name of the component
props: Properties
methods: Method

Click to close to expose 2 events

Use

import Alert from &#39;./Alert.vue&#39;

Alert.install = function(Vue){
  Vue.component(&#39;Alert&#39;, Alert);
}
export default Alert

Copy after login

<Alert :closable="false">
 这是一个不能关闭的alert
</Alert>
<Alert>
 这是一个可以关闭的alert
</Alert>

Copy after login

Attribute

##Parameters##closableWhether it can be closedboolean—trueshowWhether to display boolean—trueEvent

Description	Type	Optional value	Default value

Event name DescriptionCallback parametersupdate:showTriggered when closed, whether to display falsefalsecloseTriggered when closed— Related recommendations:

Notes on using alert() in JavaScript

In addition to alert, what other prompt methods are there in js

The difference between alert() and console.log() in javascript

The above is the detailed content of Detailed explanation of Alert in vue component. For more information, please follow other related articles on the PHP Chinese website!