preface

I have been busy with my work and life in the last two months. I haven’t updated my article for a long time. I just took the advantage of working overtime today to write about the components that I thought were installed in the project recently. Under the premise of crazy UI drawing, I found that many light prompts and pop-up dialog are highly similar and need to support customization, so I started the road of encapsulation.

Good children learn to learn from others’ work first

In the first version of the light hint package, I used the old traditional props to receive a unavailable control hint display and hide, ultimately not allowing the component to mount on the DOM node from the start. The component is written to use naturally, isn’t it, then happily submitted the code. I feel very troublesome in the process of use, because I have to introduce components, then define a visiable, then write a <Toast: XXX =” XXX “XXXXXXX /> on the template, and then if there are many calls on a page, Or you could write a few more toast (should can’t, can’t, no one would choose to do so), or crazy change data defined in the data. Although he had found the defects, but don’t be lazy programmer is not a good programmer, or choose to ignore the problem,, away from the first day of 15th, next to the second day of the fairy colleagues (she thought xi xi xi) on the casual fun too complicated to use, no element of the works. Inner OS: I wouldn’t be sitting here if I could write like Element. Of course, there are other people who have raised the same problem as me, so it’s natural to solve it.

I was able to navigate to the MessageBox component by opening the Element UI (I didn’t realize I was working on a Vue3 environment at this point) and found that their invocation method was pretty simple:

<template> <el-button type="text" @click="open"> </el-button> </template> <script> export default { Methods: {open() {this.$alert(' this is a piece of content ', 'header name ', {confirmButtonText:' confirmButtonText ', callback: action => { this.$message({ type: 'info', message: `action: ${ action }` }); }}); } } } </script> <style> </style>Copy the code

Look at your own code, just can’t look at hahaha. The ancients said: the division of yi long skills to control yi. Open up your own vue2 project, open up the huge node_modules package, find the corresponding code and start borrowing.

The first step is to write the page you want to display.

To do a good job, he must sharpen his tools. If we want the component to be able to use, naturally not our page, let’s write a demo to demonstrate:

<template> <div> test {{booo}}</div> </template> <script> export default {data() {return {visiable: false}; }}; </script> <style></style>Copy the code

Some friends may ask me what UNAVAILABLE “visiable” is, but HE did not say that he abandons it. Heh heh heh, this is written purely for later testing, no actual effect.

Step 2: Create a “subclass” using the Vue constructor

Options (options) in vue. Extend (options) must be a component, which is what we wrote in the previous demo. One thing we must know is that data must be a function, but I believe friends must always write functions. We can’t use new Vue({components: test}) because we don’t create component instances that we normally write. It’s better to just go to the code.

import Vue from "vue";
import Main from "./main.vue";
const MessageConstructor = Vue.extend(Main);
let instance;
const Message = function(options) {
  if (Vue.prototype.$isServer) {
    return;
  }
  console.log(Vue.prototype.$isServer);
  options = options || {};
  instance = new MessageConstructor({
    data: options
  });
  instance.$mount();
  document.body.appendChild(instance.$el);
  console.log(instance.visiable);
  console.log(instance.booo);
  return instance;
};
export default Message;
Copy the code

$isServer: $isServer: $isServer: $isServer: $isServer: $isServer: $isServer: $isServer: $isServer: $isServer: $isServer: $isServer: $isServer

According to the document, we can know that this is to determine whether it is running on the server, and we do not need the interface on the server. When we call the method we can pass in the parameters normally by taking the parameters in the new constructor, mounting them on the $mount, and finally inserting them into our body.

The third step is to harvest the results and call the method

Don’t worry after all the preparatory work in front of us, how could it be so easy for us to use it. We also need to import our written file in the outermost main.js file

import Vue from "vue";
import ElementUI from "element-ui";
import Message from "@/components/test/main";
import "element-ui/lib/theme-chalk/index.css";
import App from "./App.vue";

Vue.config.productionTip = false;
Vue.use(ElementUI);
// Vue.use(Message);
Vue.prototype.$Message = Message;
new Vue({
  render: h= > h(App)
}).$mount("#app");
Copy the code

So we can use it normally.

 mounted() {
    setTimeout(() => {
      this.$Message({
        booo: true
      });
    }, 3000);
  },
Copy the code

This is where the booO comes from, and why there is no props in the component to accept arguments and display them.

Start using it in formal projects

With the foundation in front, I naturally put my ideas into practice in the project with great interest. Suddenly, IT occurred to me that VUE3 was used in the pit project I had dug before. I was not sure if what I had written before was ok, so I put it on for a try. Sure enough, there was no accident. Take a look at the vue3 documentation, because you can’t import Vue from “Vue” directly now; The corresponding vue. Extend () is gone. Although extend was officially removed, a new createApp was also provided for us to use.

The final modified code is as follows:

import { createApp } from "vue";
import ToastMessage from "./index.vue";

const createMount = options => {
  const mountNode = document.createElement("div");
  document.body.appendChild(mountNode);

  const app = createApp(ToastMessage, {
    ...options,
    remove() {
      app.unmount(mountNode);
      document.body.removeChild(mountNode);
    }
  });
  return app.mount(mountNode);
};

const toast = options => {
  return createMount(options);
};

toast.install = app => {
  app.component("Toast", ToastMessage);
  app.config.globalProperties.$toast = toast;
};

export default toast;
Copy the code

In VUe2, we can use props to accept data and display it, but not vue3.

Afterword.

Hope this article can be helpful to you, if there are wrong places to write also hope to give advice or two.

- wy cabbageCopy the code