¿Cuáles son las técnicas para el desarrollo de componentes de Vue?
Lo que les traigo esta vez es cuáles son las técnicas para el desarrollo de componentes Vue y cuáles son las precauciones para el desarrollo de componentes Vue. El siguiente es un caso práctico, echemos un vistazo.
Desarrollo de componentes de un solo archivo de Vue
Cuando utilice vue-cli para inicializar un proyecto, encontrará un archivo HelloWorld.vue en la carpeta src/components. Componente de archivo. Modelo de desarrollo básico.
/ Regístrate
Vue.component('mi-componente', {
plantilla: '
¡Un componente personalizado!p>new Vue({
el: '#example'
})
/ Crear instancia raíz
new Vue({{p}}), {{p}/ Cree una instancia raíz.
Diálogo
El estilo básico del componente de diálogo de destino es como se muestra en la figura:
Según el estilo de destino, se puede resumir en:
El componente de diálogo necesita un titleprops para marcar el título de la ventana emergente
Cuando se presiona el botón Aceptar, el componente de diálogo necesita activar un evento de confirmación (es decir, decirle al componente principal que confirme),
Del mismo modo, el componente de diálogo debe activar un evento de cancelación
El componente de diálogo debe proporcionar un espacio para contenido personalizado
Por lo tanto, la codificación es la siguiente: >p> {{ title }} & lt;i class="ios-close-empty" transformar: traducirY(-20px) ; } a { opacidad: 1; transformar: traducirY(0); } } @keyframes cuadro de diálogo: ingrese { desde { opacidad: 1; transformar : traducirY(0); } @ cuadro de diálogo de fotogramas clave: salir { de { opacidad: 1; transformar: traducirY(0); } a { opacidad: 0; transformar: traducirY( -20px); } } Es así de simple y puedes desarrollar una animación bastante buena. Ten en cuenta que el nombre del componente de transición es diapositiva. -abajo y el nombre de clase clave de la animación es deslizar hacia abajo-entrar-activo. Ajustar el cuadro de diálogo como cuadro de mensaje El cuadro de mensaje del elemento se utiliza de la siguiente manera: this.$confirm('Esta operación eliminará permanentemente el archivo. archivo, ¿debo continuar? , 'prompt', { confirmButtonText: OK', Texto del botón Cancelar: Cancelar', Tipo: 'Advertencia' }).then(() => { this.$message({ Tipo: 'Éxito', Mensaje: '¡Eliminar correctamente! }).catch(() => { this.$message ({ tipo: 'info', mensaje: 'Eliminación cancelada' }); ? }); Cuando vi este código, me sentí tan mágico. Es tan mágico (tres. puntos de asombro). Si miras de cerca, este componente es en realidad un cuadro de diálogo encapsulado. A continuación, encapsularé uno de los componentes. Primero, clasifique las ideas: . p> El elemento usa this.$confirm, que no solo necesita estar vinculado al prototipo de Vue Luego, el elemento se confirma, se cancela la captura y se promociona Después de ordenar mis ideas, comencé a codificar: importar Vue desde 'vue' importar MessgaeBox desde '. const Ctur = Vue.extend(MessgaeBox) let instancia = null const callback = acción => { if ( acción === 'confirmar') { if (instance.showInput) { instancia.resolve({ valor: instancia.inputValue, acción }) } else { instancia.resolve (acción) } } más { instancia.reject(acción) } instancia = null } const showMessageBox = (tip, title, opts) = &&g title, opts) => new Promise((resolver, rechazar) => { const propsData = { tip, title, .opts } instancia = new Ctur({ propsData }).$mount() instance.reject = rechazar p> instancia.resolve = resolver instancia.callback = devolución de llamada document.body.appendChild(instancia.$el) } ) const confirm = (tip, title, opts) => showMessageBox(tip, title, opts) Vue.confirm = confirm Hasta ahora, Quizás te preguntes cómo volver a llamarlo. De hecho, escribí un cuadro de diálogo empaquetado y lo llamé MessageBox. Hay dos métodos en su código: onCancel() { this.callback&&（this.callback.call(this, 'confirm')) }, Sí, así es, es al confirmar y cancelar la devolución de llamada. MessageBox se introdujo en el código. No creé un nuevo MessageBox directamente, sino que usé un nuevo Ctur, porque de esta manera puedes definir datos (no solo accesorios), por ejemplo: instancia = nuevo Ctur(. { propsData }). En este punto, en realidad no hay ningún cuadro de mensaje en la página, debemos ejecutar: document.body.appendChild(instance.$el) Si Ejecute esta operación directamente. Es posible que el cuadro de mensaje no se anime cuando se abre, pero sí cuando se cierra. La solución es simple, appendChild para que permanezca invisible, luego usa el siguiente código: Vue.nextTick(() => instancia.visible = true) Esto lo hará efectos de animación. Resumen Logra buenos efectos de animación a través de transiciones y CSS. En este ejemplo, el nombre del componente de transición determina las dos clases clave para escribir CSS llamadas [nombre]-enter-active y [nombre]-leave-active Hereda el componente a través del constructor Vue.extend ( No sé cómo expresarlo correctamente, así que solo diré esto por ahora) y luego heredaré el constructor del componente a través de ese constructor. extender, y luego a través de este constructor, puede personalizar las propiedades del componente (escenario de uso: js llama al componente) Cuando js llama al componente, para mantener el efecto de animación del componente, usted Primero puedo usar document.body .appendChild, luego usar Vue.nextTick(() => instancia.visible = true)