Preface:

A few days ago, the account manager did not allow me to use a UI library such as Ele. me to make a component such as light prompt. At that time, I thought that I was ele. me warrior, how could I write something, and then I thought to use an alert to fool it, but I could not, then I pondered, and found that Vue has a very good vue. extend.

After some efforts, I learned, may be the previous study when careless missed. But the problem is not big, can liver.

Let’s start with the following question:

When writing a Vue project, after we have the initial root instance, pages are managed via router and components are registered locally via import, but what if I want to dynamically render components from the interface? Want to implement a window.alert() component that calls it as if it were a JS function?

Write it in advance?

You don’t have that much ahead of time. Why don’t you think about where you’re going tonight?

Back to the point

First of all:

I prepare a clean vue2. X project in advance, and then I write a component, what should I call it? It’s called Toast. It’s okay

<template>
    <div class="box" v-if="isShow">
        <h1>{{msg}}</h1>
    </div>
</template>
<script>
export default {
    name:'Toast'
}
</script>
<style lang="">
    
</style>
Copy the code

So if you look at this, you might say, why do you put a V-if on it? What other MSG is what, what other class name is what, so let’s leave those questions out for a second and we’ll answer them later

Since we want to call JS functions as pleasant to use, then we decided to be so pleasant.

And then:

I wrote the code below in my utils.js file

import vue from 'vue' import Toast from '.. // const ToastConstructor = vue. Extend (...) const ToastConstructor = vue. onTime = 2000) { let newDom = new ToastConstructor({ el: document.createElement('div'), data() { return { msg: txt, isShow: true } } }); Document. The body. The appendChild (newDom. $el) setTimeout (() = > {newDom. IsShow = false}, onTime)} / / global components, Function regFn() {vue. Prototype.$toast = showToast} export default regFnCopy the code

First we introduce the VUE and Toast components. After all, we need to use the Vue extend, so we will definitely bring it to play with us.

Then I use vue.extend to generate a constructor –> “const ToastConstructor = vue.extend(Toast)”

** “showToast function”, pass in two parameters, one is “content TXT”, the other is “time onTime”, light prompt is sure to be gone, that content is the template “MSG” ** to pass in the content.

Later:

We new a ** “newDom,” ** it receives an object, which is to put the following things together, and then el creates a ** “DOM” **

Then the following data return ** “MSG” is the template where that thing know it, and then will pass in the “TXT” to him, that isShow is also the template above the “V-if” **, because to create an element, sure this works, now almost complete, iron children insist on it

And then we mount it. How do we mount it? With “document. The body. * * the appendChild (newDom. $el)” * *

Why is that?

“Document. The body. The appendChild ()” is to specify the “ewDom” * * * * * * “$el” to * * at the end of the “document. The body”

** “setTimeout(() => {newdom.isshow = false}, onTime)”

Then it’s time to mount it to the Vue prototype, and then it’s time to export it. If you don’t export it, people won’t know what you’re doing.

Again and:

Import this utils.js in the main entry file and use it globally

// import ToastDom from './util/utils'Copy the code

Then use it on any page, in this case in app.vue

<template> <div id="app"> < button@click ="addDom"> </button> </template> <script> export default {methods: $toast {addDom(){this.$toast(' look at my little tip ')}},}; </script> <style lang="less"> </style>Copy the code

Here I use a button and then a click event that tells him to use the “$toast” and pass it toa word end, and there he is. See the effect