Detailed explanation of Alert in vue component

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

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

script

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

• name: The name of the component

• props: Properties

• methods: Method

Click to close to expose 2 events

Use

##

import Alert from './Alert.vue' Alert.install = function(Vue){ Vue.component('Alert', Alert); } export default Alert

 这是一个不能关闭的alert   这是一个可以关闭的alert 

Attribute

##Parameters ##closable Whether it can be closed boolean — true show Whether to display boolean — true Event

Description	Type	Optional value	Default value

Event name Description Callback parameters update:show Triggered when closed, whether to display false false close Triggered 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!