Is it easy to encapsulate a pop-up component using Vue3?

Summary put first:

Tipes: The encapsulated pop-up component uses Teleport to avoid the hidden dangers of positioning hierarchy that may be caused by component nesting. It also uses defineProps, defineEmits, and slots to increase the extensibility of the component.

🌲🌲 Preface:

I have never encapsulated a pop-up window component myself before, but I think a small pop-up window component is no small matter. Then today I needed a pop-up component in my new project, so I made one. It doesn’t matter if you don’t do it. Once you do it, you will find that there are still many different small problems, and then share the problems you encounter with the big guys.

Let's start by reviewing the requirements for a globally used public pop-up window component. Then there are several key points: public, global, and pop-up window. Let's implement the pop-up window component little by little based on these key points.

🍬🍬Public🍬🍬

This is very simple. I believe that all the big guys here can do it easily.

First implement a main content. My method is to use slots and parameter passing. The example simply passes two parameters, a title content and a Boolean value that controls whether it is turned on or off. It mainly involves the use of two Vue3 APIs: defineProps, defineEmits and slots.

<template>
    <Mask @click="close" /> // Mask layer <div class="modal_all" v-if="visible">
        <slot name="header"> // Convenient for adding custom headers to the page<div class="modal_header">
                <p class="modal_header_title">{{ title }}</p>
                <p class="modal_header_img" @click="close"></p>
            </div>
        </slot>
        <div class="modal_content">
            <slot></slot> //Open the pop-up content</div>
    </div>
</template>
<script lang="ts" setup>
defineProps({
    visible:
        type: Boolean,
        default: false,
    },
    title:
        type: String,
    },
});
const emit = defineEmits(['update:visible']);
const close = () => {
    emit('update:visible', false);
};
</script>
// Style omitted

🍬🍬Global🍬🍬

The basic layout is almost there, the following is global registration, the purpose is to avoid having to introduce it every time it is used.

When registering global components in vue2, you can just use Vue.component('name', component). So how do you register global components in batches in vue3? Provide an install method that is automatically called using app.use().

import Modal from './Modal/Modal.vue';
import Mask from './Modal/Mask.vue';

// You can't write name in script setup, so add a const coms = [
  {
    name: 'Modal', // Use the component name compent: Modal,
  },
  {
    name: 'Mask',
    compent: Mask,
  },
];

export default {
  install: (app) => {
    coms.forEach((item) => {
      app.component(item.name, item.component);
    });
  },
};

//main.ts
import Common from './common/index';
const app = createApp(App);
app.use(Common);

🍬🍬Ball box🍬🍬

In fact, the pop-up window component has been written here, so why should we list the pop-up window separately?

I believe that you have also encountered positioning and hierarchy problems in your daily work. If we nest the component that needs to be positioned inside a Vue component, it will be very difficult to deal with the nested positioning, hierarchy and style due to the various layers of CSS. If you are not careful, some strange problems will arise. So how do you avoid this problem? Next, we will use another portal API in Vue3: Teleport.

Tipes: Teleport is to mount our component to the DOM element corresponding to the attribute to, similar to a portal.

First the code:

<teleport to="#mask_modal" v-if="visible">
    <div class="modal_cent">
        <Mask @click="close" />
            <div class="modal_all">
                <slot name="header">
                    <div class="header">
                        <p class="header_title">{{ title }}</p>
                        <p class="header_img" @click="close"></p>
                    </div>
                </slot>
            <div>
            <slot></slot>
            </div>
        </div>
    </div>
</teleport>

Let's take a look at the hierarchy after writing this:

Through the to attribute, we specify that the position of the bullet box component rendering is at the same level as the layout component, but the visible status of the teleport is completely controlled by the component we call, which avoids the problem of positioning the hierarchical style when we nest components.

🌼🌼 So far, a simple public pop-up component has been almost written. Then in the process of writing this component, I still encountered several problems that were not considered problems 😅.

❗️❗️❗️1. The name attribute cannot be written in script setup:

If you don’t use ts, you can write another script tag, export it and write the name. If you use ts, this method will not work and an error will be reported. Then use the method I wrote above and redefine it yourself to write an object.

❗️❗️❗️2. Adding a class and style directly to the global component does not work:

In fact, when we write public components normally, if we want to control the style of the internal container directly in the outer layer where it is used, we can directly add a class name on the outside to increase the style. However, when I was writing this pop-up component, it did not work. After searching for a long time, I found that it was because I used teleport, so the class could not be inherited during parsing. The same problem will occur if there is no root component in the component. This actually doesn't matter. We can just write the content in the slot and it will expand automatically. I believe that you guys will not do such a stupid operation like me, haha.

🎉🎉🎉Conclusion:

In fact, the encapsulation of a pop-up component is still very simple, but it can be regarded as accumulating some experience and implementing my own project. It will be easier to encapsulate more complex components later.

This is the end of this article about using Vue3 to encapsulate a pop-up window component. For more relevant Vue3 encapsulated pop-up window component content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!