Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "how to encapsulate an easy-to-use Dialog component", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to encapsulate a more easy-to-use Dialog component" article.

Scene

In the project, we often encounter the scene of using pop-up windows, but sometimes the pop-up windows included in the component library can not meet our needs and need to be encapsulated by ourselves, so how do we customize a pop-up window that is more convenient to use?

Build an environment

First of all, we need to build a Vue3+ts environment.

Use vite's official template:

Yarn create vite demo-app-template vue-ts

Enter and install dependencies

Cd demo-appyarn

Start app after dependent installation is complete

Yarn dev create component

First create a MyDialog.vue under the src/components directory to build a basic framework for components

Import {ref, reactive} from "vue"; defineProps ({message: {type: String, default: "",}, title: {type: String, default: "",},}); const emits = defineEmits (); const visible = ref (true); function clickConfirm () {console.log ("confirm"); emits ("confirm");} function clickClose () {console.log ("cancel"); emits ("close") {{title}} {{message}} confirm to cancel .wrap {position: absolute; top: 0; left: 0; background: rgba (15,15,15,0.5); width: 100%; height: 100%;} .container {position: absolute; top: 50%; left: 50%; transform: translate (- 50%,-50%) Min-width: 300px; min-height: 200px; padding: 10px; background: white; display: flex; flex-direction: column;}. Content {flex: 1; padding: 10px; text-align: left;}. Title {min-height: 30px;} .controll {display: flex; width: 100%; justify-content: space-around;} create hook functions that call components

Create a hooks directory under the src directory, and then create a useMyDialog.ts. Hooks directory under the useMyDialog.ts directory.

Function call component we need to:

Convert components to VNode

Convert VNode to DOM and render to the page

Import {createVNode, render, ComponentPublicInstance} from "vue"; export default function useMyDialog (option?: any) {const props = {... option,}; const vm = createVNode (MyDialog, props); const container = document.createElement ("div"); render (vm, container); document.querySelector ("# app")? .append (container.firstElementChild!);}

Ps:

Container.firstElementChild! Bingo! Indicates that container.firstElementChild is not null or undefined

Next let's test it in App.vue.

Import useMyDialog from ". / hooks/useMyDialog"; function showDialog () {useMyDialog ({message: "test1", onClose: () = > {console.log ("self");},});} display Dialog

Caching, hiding and hiding of Dialog

We need to return close so that we can manually call the close function to close Dialog. Exe.

Add in useMyDialog.ts

Import {ComponentPublicInstance,VNode} from "vue"; export default function useMyDialog (option?: any) {const userCloseFn = option?.onClose; props.onClose = () = > {close (); userCloseFn? UserCloseFn ();}; function close (vm: VNode) {(vm.implementent.proxy as ComponentPublicInstance). Visible = false;} return {close: close.bind (null, vm),}} cache

Now every time you click the Show Dialog button, a new component instance is created, which is not what we expected, so we need to cache the component.

Add in useMyDialog.ts

Import {ComponentPublicInstance} from 'vue'const instances: any [] = []; export default function useMyDialog (option?: any) {const tempVm: any = instances.find ((item) = > `${item.vm.props?.message?? "}` = `${(option as any). Message??"}`); if (tempVm) {(tempVm.vm.proxy as ComponentPublicInstance). Visible = true Return {close: close.bind (null, tempVm.vm),};}} complete code

Src/hooks/useMyDialog.ts

Import {createVNode, render, ComponentPublicInstance, VNode} from "vue"; import MyDialog from ".. / components/MyDialog.vue"; const instances: any [] = []; export default function useMyDialog (option?: any) {const props = {... option,}; const userCloseFn = option?.onClose; props.onClose = () = > {close (vm); userCloseFn? UserCloseFn ();}; function close (vm: VNode) {(vm.principent.proxy as ComponentPublicInstance). Visible = false;} const tempVm: any = instances.find ((item) = > `${item.vm.props?.message? ""}` = `${(option as any). Message?? "}`); if (tempVm) {(tempVm.vm.proxy. As ComponentPublicInstance). Visible = true Return {close: close.bind (null, tempVm.vm),};} const vm = createVNode (MyDialog, props); const container = document.createElement ("div"); render (vm, container); document.querySelector ("# app")? .appendChild (container.firstElementChild!); instances.push ({vm}); return {close: close.bind (null, vm),} } the above is the content of this article on "how to encapsulate a more easy-to-use Dialog component". I believe you all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

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.