Vue: implementación simple de componentes emergentes imperativos

Los componentes emergentes son componentes de uso común en nuestro trabajo diario, pero a menudo son utilizados por otros, por lo que en nuestro tiempo libre, simplemente implementaremos un componente emergente nosotros mismos

Puntos de conocimiento involucrados: extender, el

Instrucciones de uso:

index.vue: diseño, estilo, interacción, lógica del componente

index.js: instalación componentes, métodos públicos

Antes de eso, primero comprendemos los siguientes conocimientos sobre el diseño, el estilo y la interacción de los componentes. js: instalar componentes, exponer métodos

Antes de eso, primero comprendamos el contenido relevante

1. extender

A través de esta API, puede convertir el componente vue introducido en un constructor de vue y crear una instancia para facilitar la expansión

2.$mount

Queremos que el componente emergente solo se mostrará cuando se use, por lo que necesitamos agregar elementos al cuerpo dinámicamente. El método $mount le permite montar manualmente la instancia de vue, que también funciona bien en extensión y es clave para la naturaleza imperativa de los componentes emergentes.

3. $el

Ya que estás agregando un elemento dom, puedes obtener el elemento a través del atributo $el de la instancia y luego usar el método local Agregar nodo.

index.vue

index.js

main.js

Arriba, expuse un objeto que contiene el método de instalación. Registre el componente usando Vue.use (después de usar Vue.use, el componente encontrará el método de instalación para llamar) y monte el método de llamada del componente en el prototipo de Vue.

Este componente emergente es bastante tosco y todavía hay mucho margen de mejora