Shulou(Shulou.com)06/01 Report--

This article focuses on "how Vue encapsulates global toast components". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor learn how Vue encapsulates global toast components.

one。 With vue-cli

1. Define Toast component / / components/Toast {{message}} export default {data () {return {visible: false, message: ""}} div {position: fixed; top: 30%; left: 50%; padding: 5px 20px; color: # fff; background-color: # 424242; border-radius: 5px; text-align: center; transform: translate (- 50%,-50%) } / * vue animation transition effect setting * / .fade-enter-active,.fade-leave-active {transition: opacity .5s;} .fade-enter, .fade-leave-to {opacity: 0;} 2. Configure import Vue from "vue" import App from ". / App.vue" import Toast from ". / components/Toast" / / define the plug-in object const ToastObj = {install: function (Vue) {/ / create a "subclass" component of Vue const ToastConstructor = Vue.extend (Toast) / / create an instance of the subclass And mount to an element const instance = new ToastConstructor () console.log (instance) / / Mount the instance to the dynamically created element and add the element to the global structure instance.$mount (document.createElement ("div") document.body.appendChild (instance.$el) / / register the method on the prototype chain of Vue Control component Vue.prototype.$toast = (msg, duration = 1500) = > {instance.message = msg instance.visible = true setTimeout (()) = > {instance.visible = false}, duration)}} Vue.use (ToastObj) Vue.config.productionTip = falsenew Vue ({render: h = > h (App),}). $mount ("# app") 3. Use {{msg}} export default {name: "HelloWorld", data: () = > {return {msg: "HelloWord"}}, mounted () {/ / use toast component this.$toast ("component mounted successfully")}} 2. Without vue-cli

With the help of vue-cli, it is convenient to import and export components, but other methods are needed without the help of build tools.

1. Register toast components Document / / define toast global components const Toast = Vue.component ("toast", {data () {return {isShow: false, message: "Global prompt", wrapperStyle: {position: "fixed", top: "20%", left: "50%" ZIndex: 10000, padding: "6px 12px", backgroundColor: "# 424242", borderRadius: "5px", transform: "translate (- 50%,-50%)"}, textStyle: {color: "# fff", fontSize: "14px"} Template: `{{message}}`}) 2. Register the toast plug-in / / define the plug-in object const ToastObj = {install: function (Vue) {/ / create a toast component instance and mount it to an element const instance = new Toast () / / Mount the instance to DOM instance.$mount ("# plug-in") / / register the method on the prototype chain of Vue Control component Vue.prototype.$toast = ({message, duration = 2000} = {}) = > {instance.message = message instance.isShow = true setTimeout (() = > {instance.isShow = false}, duration)} / / register the toast plug-in Vue.use (ToastObj) 3. Use Vue.component ("my-button", {data () {return {wrapperStyle: {width: "70px", padding: "20px", backgroundColor: "green"}, textStyle: {color: "# fff") in other components FontSize: "16px"}, methods: {handleClick () {this.$toast ({message: "I clicked"})}} Template: `Click prompt `}) const vm = new Vue ({el: "# app"}) so far I believe you have a deeper understanding of "how Vue encapsulates global toast components", so you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.