Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to achieve a toast pop-up window component in vue". In daily operation, I believe that many people have doubts about how to achieve a toast pop-up window component in vue. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the question of "how to achieve a toast pop-up window component in vue". Next, please follow the editor to study!

First, let's analyze the characteristics (requirements) of the pop-up components:

0. Lightweight-A component is less than 1Kib (less than 0.8k actually packaged)

1. It is generally used in multiple places-you need to solve the problem of repeated reference + registration on each page.

1. Usually interact with js-- you don't need to write in it.

Effect picture:

one。 Write a common vue component first

File location / src/toast/toast.vue

I am pop-up window .wrap {position: fixed; left: 50%; top:50%; background: rgba; padding: 10px; border-radius: 5px; transform: translate (- 50% meme 50%); color:#fff;}

two。 Introduce components into the pages we need to use to make it easy to see the effects and errors

Import toast from'. / toast/toast' export default {components: {toast},}

three。 Implement dynamic loading components

As you can see, a static pop-up layer has been shown, so let's take a look at how to implement dynamic pop-up.

Let's first create a new index.js under the / src/toast/ directory, and then type in the following code in index.js. (because the code is heavily coupled, we won't break it apart and explain it line by line, instead of inline comments.)

File location / src/toast/index.js

Import vue from 'vue'// here is the static component we just created import toastComponent from'. / toast.vue'// returns an extension instance constructor const ToastConstructor = vue.extend (toastComponent) / / the function that defines the pop-up component takes two parameters, the text to be displayed, and the display time function showToast (text Duration = 2000) {/ / instantiate a toast.vue const toastDom = new ToastConstructor ({el: document.createElement ('div'), data () {return {text:text, show:true}) / / add instantiated toast.vue to body document.body.appendChild (toastDom.$el) / / hide setTimeout (() = > {toastDom.show = false} after duration time has elapsed) Duration)} / / the function function registryToast () registered as a global component {/ / registers the component into the prototype chain of vue, / / so that you can use this.$toast () vue.prototype.$toast = showToast} in all instances of vue

Export default registryToast

Attach a portal vue.extend official document

four。 Try out

So far, we have initially completed a toast component that can be registered globally and loaded dynamically. Let's try it out.

Register the component in the entry file of vue (. / src/main.js if generated by scaffolding)

File location / src/main.js

Import toastRegistry from'. / toast/index'// can also execute toastRegistry () Vue.use (toastRegistry) directly here. Let's modify the usage slightly and change the code referencing the static component in step 2 to the following export default {methods: {showToast () {this.$toast ('I'm a pop-up message')}.

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

five。 Optimize

Now we have initially realized a pop-up window. However, it is still a little short of success, lack of an animation, now pop-up and hiding are very stiff.

Let's make a slight modification to the showToast function in toast/index.js (where there are comments, there are changes)

File location / src/toast/index.js

Function showToast (text, duration = 2000) {const toastDom = new ToastConstructor ({el: document.createElement ('div'), data () {return {text:text, showWrap:true, / / whether to show the component showContent:true / / function: before hiding the component Show Hidden Animation}) document.body.appendChild (toastDom.$el) / / execute the fade animation in advance of 250ms (because the hidden animation we set in css continues to be 250ms) setTimeout (() = > {toastDom.showContent = false}, duration-1250) / / hide the entire component setTimeout (() = > {toastDom.showWrap = false}, duration)} after duration time has elapsed

Then, modify the style of toast.vue

File location / src/toast/toast.vue

{{text}} .wrap {position: fixed; left: 50%; top:50%; background: rgba; padding: 10px; border-radius: 5px; transform: translate (- 50% animate_in 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;}} at this point, the study on "how to implement a toast pop-up window component in vue" is over. I hope I can solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.