Detailed explanation of use cases of vue+toast pop-up component

This time I will bring you a detailed explanation of the use cases of the vue toast pop-up component. What are the precautions when using the vue toast pop-up component? Here are the actual cases, let's take a look.

I believe that everyone can write ordinary vue components, definition->introduction->registration->use, everything is done in one go, but what if we want to customize a pop-up component today?

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

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

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

1. Generally interact with js - no need to write in

Today, we will implement a toast pop-up component based on vue based on the above two requirements. The picture below is the final rendering.

1. First write an ordinary vue component

File location/src/toast/toast.vue

<template>
 <p>我是弹窗</p>
</template>
<style>
 .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>
 <toast></toast>
 </p>
</template>
<script>
 import toast from &#39;./toast/toast&#39;
 export default {
 components: {toast},
 }
</script>

3. Implement dynamic loading of components

You can see that a static pop-up layer has been displayed. Next, 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 (because of this code The coupling is quite serious, so I won’t 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

Attach a portal vue.extend official document

4. Trial

At this point, we have initially completed a global registration and Let’s try out the dynamically loaded toast component.

Register the component in vue’s entry file (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>
 <input>
 </p>
</template>
<script>
 export default {
 methods: {
 showToast () {
 this.$toast(&#39;我是弹出消息&#39;)
 }
 }
 }
</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. However, it is still a little short of success because it lacks an animation. , 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>{{text}}</p>
</template>
<style>
 .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>

You’re done. A toast component is initially completed

Summary

vue.extend function can To generate a component constructor, you can use this function to construct a vue component instance
You can use document.body.appendChild() to dynamically add the component to the body
vue.prototype.$toast = showToast You can register the component globally
Displaying animation is relatively simple, hiding animation must reserve enough animation execution before hiding Time
The source code address of this article is here
The above are not important, the important thing is to give this article a star
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!

Recommended reading:

Detailed explanation of jQuery element selector use cases

Vue dynamic binding component sub-parent component multi-form verification implementation steps Detailed explanation

The above is the detailed content of Detailed explanation of use cases of vue+toast pop-up component. For more information, please follow other related articles on the PHP Chinese website!