How to realize Toast Light Tip by vue

This article mainly introduces "vue how to achieve Toast light prompt". In daily operation, I believe many people have doubts about how to achieve Toast light prompt in vue. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubt of "how to achieve Toast light prompt by vue". Next, please follow the editor to study!

Vue implementation Toast Light Tip first create a toast component {{text}} export default {name: "Toast", props: {isshow: {type: Boolean,}, text: {type: String,},}, watch: {isshow (val) {if (val = true) {setTimeout (() = > {this.isshow = false;}, 3000) },},}; .context {position: absolute; top: 0; width: 100%; height: 100%; z-index: 100; display: flex; justify-content: center; align-items: center; .tip {background-color: rgba (40,40,40,0.8); color: aliceblue; font-size: 0.6; padding: 0.2; border-radius: 0.1rem }} introduce the component import Toast from ". / Toast.vue" in the js file; let NewToast = {install: function (Vue) {/ / create the vue plug-in, official address https://cn.vuejs.org/v2/guide/plugins.html let newToast = Vue.extend (Toast); / / create vue constructor, official address https://cn.vuejs.org/v2/api/#Vue-extend let toast = new newToast () / / create instance document.body.appendChild (toast.$mount (). $el); / mount Vue.prototype.$Toast = function (text) {toast.isshow = true; / / incoming props toast.text = text; / / incoming props};},}; export {NewToast}; introduce the above js file import {NewToast} from "@ / components/index.js" in the entry file; Vue.use (NewToast) Below, you can use but () {this.$Toast ("Are you ok?");} globally in view.

Effect picture

Such a simple light hint would be fine. If you think the style is ugly, you can adjust it yourself.

Use vant's Toast to gently prompt for an error

Make a note of using the Toast light prompt in vant today and follow the method in the official documentation to find that the error report does not work.

Toast.success ('successful copywriter') and Toast.fail ('failed copywriter') are written in the document

Call Toast directly after referencing vant in main.js to report an error.

The actual use is to write this.$toast.success ("successful copywriter") and this.$toast.fail ("failed copywriter")

Like the call route, it needs to be pointed out by this.

At this point, the study of "how to achieve Toast light hints in vue" is over. I hope to be able to solve your 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!