How to use Vue and Element-UI to implement message notification function

How to use Vue and Element-UI to implement message notification function

With the continuous development of front-end technology, more and more websites and applications need to implement message notification function in order to display important information to users in a timely manner information. In Vue development, this function can be quickly realized by combining the Element-UI framework. This article will introduce in detail how to use Vue and Element-UI to implement the message notification function, and provide relevant code examples.

1. Preparation

Before using Vue and Element-UI to implement the message notification function, we need to install the required dependency packages first. Open a terminal and run the following command:

npm install vue
npm install element-ui

Once the installation is complete, we can start writing code.

2. Example

1. Create a Vue instance

In the entry file of the project, we need to create a Vue instance and register the Element-UI plug-in . The specific code is as follows:

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

new Vue({
  el: '#app',
  render: h => h(App)
})

2. Add notification component

Create a notification component in the project to display user message notifications. The specific code is as follows:

<template>
  <div class="notification">
    <el-notification
      v-for="message in messages"
      :key="message.id"
      :title="message.title"
      :message="message.content"
      :type="message.type"
      :duration="3000"
      @close="removeMessage(message.id)"
    ></el-notification>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: []
    }
  },
  methods: {
    addMessage(title, content, type) {
      this.messages.push({
        id: new Date().getTime(),
        title,
        content,
        type
      })
    },
    removeMessage(id) {
      this.messages = this.messages.filter(message => message.id !== id)
    }
  }
}
</script>

3. Using notification components

Where message notifications need to be used, we can add new message notifications by calling methods in the notification component. The specific code example is as follows:

<template>
  <div class="app">
    <button @click="showInfo">显示消息通知</button>
    <Notification ref="notification"></Notification>
  </div>
</template>

<script>
import Notification from './Notification.vue'

export default {
  methods: {
    showInfo() {
      this.$refs.notification.addMessage('消息通知', '这是一条信息', 'success')
    }
  },
  components: {
    Notification
  }
}
</script>

Finally, introduce the notification component we created into the Vue instance and add a new message notification by calling its method.

3. Instructions for use

Through the above code example, we can see that the message notification component uses the el-notification component of Element-UI to display the notification content. We can add a new message notification to the notification component through the addMessage method. The method parameters are the title, content and type of the message. The code example uses the success type provided by Element-UI. You can also choose other types according to actual needs, such as: info, warning, erroretc.

The duration attribute of the notification component sets the display duration of the notification in milliseconds, and the default is 3000 milliseconds. You can adjust it according to actual needs.

Through the @close event, we can obtain the user's action of closing the notification and delete the corresponding message notification within the method of the notification component.

4. Summary

Through Vue and Element-UI, we can quickly implement the message notification function. This article demonstrates through code examples how to use Vue and Element-UI to create a notification component and add new message notifications by calling its methods. I hope this article will help you understand and implement the message notification function.

The above is the detailed content of How to use Vue and Element-UI to implement message notification function. For more information, please follow other related articles on the PHP Chinese website!