How to use Vue's toast pop-up component

This time I will show you how to use vue's toast pop-up component. What are the precautions for using vue's toast pop-up component? . Here is a practical case, let's take a look.

First, let’s analyze the characteristics (requirements) of the pop-up component:

0. Lightweight--a component is less than 1Kib (the actual package is less than 0.8k)

1. Generally used in multiple places - need to solve the problem of repeated reference registration on each page

1. Generally used to interact with js - no need to write < in <template> toast :show="true" text="Pop-up message"></toast>

Today, we will implement a toast popup based on vue based on the above two requirements. Window component, the picture below is the final rendering.

1. First write an ordinary vue component

File location/src/toast/toast.vue

<template>
 <p class="wrap">我是弹窗</p>
</template>
<style scoped>
 .wrap{
 position: fixed;
 left: 50%;
 top:50%;
 background: rgba(0,0,0,.35);
 padding: 10px;
 border-radius: 5px;
 transform: translate(-50%,-50%);
 color:#fff;
 }
</style>

2. Introduce components into the pages we need to use to facilitate viewing effects and errors

<template>
 <p id="app">
 <toast></toast>
 </p>
</template>
<script>
 import toast from './toast/toast'
 export default {
 components: {toast},
 }
</script>

3. Implement dynamic loading of components

You can see that a static pop-up has been displayed layer, let’s take a look at how to implement dynamic pop-up.

We first create a new index.js under the /src/toast/ directory, and then enter the following code in index.js ( Since the code is severely coupled, I will not explain it line by line and change it to inline comments)

File location/src/toast/index.js

import vue from 'vue'
// 这里就是我们刚刚创建的那个静态组件
import toastComponent from './toast.vue'
// 返回一个 扩展实例构造器
const ToastConstructor = vue.extend(toastComponent)
// 定义弹出组件的函数 接收2个参数, 要显示的文本 和 显示时间
function showToast(text, duration = 2000) {
 // 实例化一个 toast.vue
 const toastDom = new ToastConstructor({
 el: document.createElement('p'),
 data() {
 return {
 text:text,
 show:true
 }
 }
 })
 // 把 实例化的 toast.vue 添加到 body 里
 document.body.appendChild(toastDom.$el)
 // 过了 duration 时间后隐藏
 setTimeout(() => {toastDom.show = false} ,duration)
}
// 注册为全局组件的函数
function registryToast() {
 // 将组件注册到 vue 的 原型链里去,
 // 这样就可以在所有 vue 的实例里面使用 this.$toast()
 vue.prototype.$toast = showToast
}

export default registryToast

Attached is a portal vue.extend official document

4. Trial

At this point, we have initially completed a project that can Globally registered and dynamically loaded toast components, let's try it out next. Register the component in vue's

(if scaffolding is generated, it is ./src/main.js) File location/src/main.js

import toastRegistry from './toast/index'
// 这里也可以直接执行 toastRegistry()
Vue.use(toastRegistry)
我们稍微修改一下使用方式,把 第二步 的引用静态组件的代码,改成如下
<template>
 <p id="app">
 <input type="button" value="显示弹窗" @click="showToast">
 </p>
</template>
<script>
 export default {
 methods: {
 showToast () {
 this.$toast('我是弹出消息')
 }
 }
 }
</script>

As you can see, we no longer need to introduce and register components in the page, we can directly use this.$ toast().

5. OptimizationNow we have initially implemented a pop-up window. But it is still a little bit away from success. There is an animation missing, and the current pop-up and hiding are very stiff.

Let’s slightly modify the showToast function in toast/index.js (there are changes in the commented areas)

File location/src/toast/index.js

function showToast(text, duration = 2000) {
 const toastDom = new ToastConstructor({
 el: document.createElement('p'),
 data() {
 return {
 text:text,
 showWrap:true, // 是否显示组件
 showContent:true // 作用:在隐藏组件之前,显示隐藏动画
 }
 }
 })
 document.body.appendChild(toastDom.$el)
 // 提前 250ms 执行淡出动画(因为我们再css里面设置的隐藏动画持续是250ms)
 setTimeout(() => {toastDom.showContent = false} ,duration - 1250)
 // 过了 duration 时间后隐藏整个组件
 setTimeout(() => {toastDom.showWrap = false} ,duration)
}

Then, modify the style of toast.vue

File location/src/toast/toast.vue

<template>
 <p class="wrap" v-if="showWrap" :class="showContent ?&#39;fadein&#39;:&#39;fadeout&#39;">{{text}}</p>
</template>
<style scoped>
 .wrap{
 position: fixed;
 left: 50%;
 top:50%;
 background: rgba(0,0,0,.35);
 padding: 10px;
 border-radius: 5px;
 transform: translate(-50%,-50%);
 color:#fff;
 }
 .fadein {
 animation: animate_in 0.25s;
 }
 .fadeout {
 animation: animate_out 0.25s;
 opacity: 0;
 }
 @keyframes animate_in {
 0% {
 opacity: 0;
 }
 100%{
 opacity: 1;
 }
 }
 @keyframes animate_out {
 0% {
 opacity: 1;
 }
 100%{
 opacity: 0;
 }
 }
</style>

Done, a toast component is initially completed

Summary

1. You can use document.body.appendChild() to dynamically add the component to the body

2. vue.prototype.$toast = showToast You can register the component globally

3. Displaying animation is relatively simple, hiding animation must be reserved enough before hiding The animation execution time

4. The source code address of this article is here

5. The above is not important, the important thing is to give this article a star

6. I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to use js to encapsulate ajax function and usage

Detailed explanation of common built-in functions in JS

The above is the detailed content of How to use Vue's toast pop-up component. For more information, please follow other related articles on the PHP Chinese website!