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 <toast :show ="true" text="Pop-up message"></toast>
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 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 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 id="app">
<input type="button" value="显示弹窗" @click="showToast">
</p>
</template>
<script>
export default {
methods: {
showToast () {
this.$toast('我是弹出消息')
}
}
}
</script> 
##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 class="wrap" v-if="showWrap" :class="showContent ?'fadein':'fadeout'">{{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>You’re done. A toast component is initially completed
Summary
Recommended reading:
Detailed explanation of jQuery element selector use cases
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!
What does b-side and c-side mean?
bios cannot detect solid state drive
How to use python library
Rename the apk software
Solution to failed connection between wsus and Microsoft server
The main function of the arithmetic unit in a microcomputer is to perform
How to solve the problem when the computer CPU temperature is too high
java export excel
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
