1. Por qué empaquetar componentes (desarrollo de componentes)
Los beneficios del desarrollo de componentes (componentes de encapsulación)
Los beneficios son obvios, lo que puede aumentar la reutilización y flexibilidad del código, mejorando así la eficiencia del desarrollo. Imagínese si un cuadro emergente se puede usar en muchas páginas de un proyecto, si escribe un conjunto de estilo de estructura de cuadro emergente y la lógica js correspondiente en cada página. En este caso, la eficiencia del desarrollo se reducirá considerablemente, por supuesto, ahora hay muchas bibliotecas de componentes excelentes, pero solo estamos familiarizados con la encapsulación de componentes a través de este caso.
Actualmente se utilizan tres puntos de habilidad en la encapsulación de componentes:
1 Pasar valores de padre a hijo
2. Pasar valores de hijo a padre
3. Tecnología de tragamonedas (presentada al final del artículo)
Además, hay algunos puntos de conocimiento triviales en este artículo: El modificador de atributo .sync permite que nuestros componentes secundarios modifiquen los valores pasados por el componente principal Attribute
Time Modifier.self .stop
La etiqueta de animación integrada en vue <transition>
El componente principal modifica los datos en el componente secundario
Dos, construcción de estructura de componente de diálogo
El cuadro de diálogo tiene un efecto de animación en su conjunto, el efecto de animación de vue, use la transición para envolver el elemento que necesita ser animado, luego este elemento agregará automáticamente algunos nombres de clase cuando se muestre/oculte, vea el seguimiento código para obtener detalles en este ejemplo
Requisitos :
●El cuadro emergente aparece o se cierra para configurar la animación de transición.
●Utilice la ranura predeterminada como área de contenido principal.
●Utilice la ranura con nombre para especificar el contenido de la cabecera y la parte inferior del cuadro emergente.
● Abra o cierre el fondo de la capa de máscara del cuadro emergente
. La capa controla si el cuadro de viñetas está cerrado o no
. Si se muestra el icono de cruz cerrada
. Personalice el título del cuadro de viñetas.
Análisis :
el cuadro de diálogo se divide en tres partes:
1. Encabezado: el lado izquierdo es el título, usando el título de la ranura nombrada para ocupar el lugar, y el lado derecho es el botón/icono (cerrado)
2. El contenido principal, usando la ranura sin nombre para ocupar el lugar
3, Abajo: generalmente algunas operaciones, use el pie de página de la ranura con nombre para ocupar el lugar, generalmente el contenido es el botón cancelar/confirmar
Parámetros que deben pasarse en: título: ancho
del título del encabezado : diálogo
ancho (creo que también se puede usar en el nivel principal especificado en profundidad)
superior: la distancia desde la parte superior del cuadro de diálogo
hasta visible: la visualización/ocultación del cuadro de diálogo
Código de implementación específico:
1. Cree un nuevo archivo Dialog.vue en componentes bajo el directorio raíz src
<template>
<!-- Abra la animación del cuadro emergente -->
<!-- La etiqueta de animación integrada de Vue formará 6 estilos de acuerdo con el atributo del nombre. La
animación entra en tres estados
dialog-fade-enter ready para ingresar
dialog-fade-enter-active En el proceso de ingresar
dialog-fade-enter-to La animación ingresa al final
dialog-fade-leave La animación está lista para salir
dialog-fade-leave-active La animación está en proceso de dejar
dialog-fade-leave-to La animación sale completa
-->
<transition name="dialog-fade">
<!-- sombra translúcida de div para toda la pantalla-->
<div
class="dialogBox"
:class ="{ isShowMask: mask == true }"
v-show="isShowDialog "
@click.self="clickMaskCloseFn"
>
<!-- cuadro emergente -->
<div class="dialogBoxContent" @click.stop>
<div class="headhead">
<!-- El valor predeterminado de la ranura nombrada con la ranura: Esto se puede escribir de modo que si hay un título aprobado, use el título aprobado. Si hay una ranura aprobada, use el plug-
in El slot prevalece -->
<slot name="header">
<span>{
{ title }}</span>
</slot>
<i class="el-icon-close" @click="close" v- show="showCloseIcon">X </i>
</div>
<div class="bodybody">
<!-- Usamos la ranura predeterminada en el área de contenido-->
<slot></slot>
</ div>
<div class="footfoot">
<!-- Usar ranuras con nombre en la parte inferior -->
<slot name="footer"></ranura>
</div>
</div>
</div> <
/transición>
</plantilla>
<script>
exportar por defecto {
name: 'dialogComponent',
props: {
// Controlar si mostrar u ocultar el diálogo
isShowDialog: {
type: Boolean,
default: false
},
// El valor del título pasado desde el
título del componente principal: {
type: String ,
por defecto: ''
},
// Si mostrar el pequeño ícono de cierre
showCloseIcon: {
type: Boolean,
default: true
},
// Si se debe habilitar la
máscara de capa de máscara de fondo: {
type: Boolean,
default: true
},
/ / Ya sea para hacer clic en la máscara Máscara de capa para cerrar el cuadro emergente
haga clic en MáscaraCerrar: {
tipo: booleano,
predeterminado: falso
}
},
datos () {
return {}
},
métodos: {
// cierre el cuadro emergente
close () {
this.$emit('update:isShowDialog', false)
},
// haga clic en la capa de máscara para cerrar el cuadro emergente
clickMaskCloseFn ( ) {
if (this.clickMaskClose === true) {
this.$emit('update:isShowDialog', false)
} else {
/* Aquí necesitamos controlar el evento burbujeante. Tenga en cuenta que la décima línea usa @click.stop
para no controlar el burbujeo, al hacer clic en el área de contenido también se cerrará el cuadro emergente*/ } } } }
</script>
<
style
lang
=
"scss" scoped>
.dialogBox {
ancho: 100%;
alto: 100%;
posición: fija,
arriba: 0,
izquierda: 0;
pantalla: flexible;
justificar-contenido: centro;
alinear elementos: centro;
.dialogBoxContent {
ancho: 500px;
altura: 220px;
borde: 2px sólido #e9e9e9;
borde-radio: 20px;
color de fondo: #fff;
.headhead {
ancho: 100%;
altura: 60px;
altura de línea: 60px;
borde inferior: 1px sólido #e9e9e9;
tamaño de caja: caja de borde;
relleno: 20px;
pantalla: flexible;
justificar-contenido: espacio-entre;
alinear elementos: centro;
span {
tamaño de fuente: 24px;
}
yo {
tamaño de fuente: 24px;
cursor: puntero;
}
}
.cuerpocuerpo {
ancho: 100%;
altura: calc(100% - 120px);
}
.footfoot {
ancho: 100%;
altura: 60px;
altura de línea: 60px;
tamaño de caja: caja de borde;
borde superior: 1px sólido #e9e9e9;
relleno: 0 20px;
.el-boton {
margen izquierdo: 12px;
}
}
}
}
.isShowMask {
color de fondo: rgba(0, 0, 0, 0.3);
}
.dialog-fade-enter,
.dialog-fade-leave-to {
opacidad: 0;
}
.dialog-fade-enter-activo,
.dialog-fade-leave-active {
transición: opacidad 0.3s;
}
// También puede definir una animación como esta
// ingrese animación
// .dialog-fade-enter-active {
// animación: diálogo-fade-in 0.4s ;
// }
// // Deja la animación
// .dialog-fade-leave-active {
// animación: dialog-fade-out 0.4s;
// }
// @keyframes dialog-fade-in {
// 0% {
// transformar: traducir3d(0, -20px, 0);
// opacidad: 0;
// }
// 100% {
// transformar: traducir3d(0, 0, 0);
// opacidad: 1;
// }
// }
// @keyframes dialog-fade-out {
// 0% {
// transform: translate3d(0, 0, 0);
// opacidad: 1;
// }
// 100% {
// transformar: traducir3d(0, -20px, 0);
// opacidad: 0;
// }
// }
</estilo>
2 componentes registrados globalmente (main.js)
importar NewDialog from '@/components/Dialog'
Vue.component('myDialog', NewDialog)
3. Llamadas en componentes empresariales
<!--
sync: modificador de eventos, es un método de escritura gramatical de azúcar, que se da cuenta de que el componente secundario modifica los apoyos pasados por el componente principal parent
: visible.sync="visible"
child: this.$emit("update: visible", false)
-->
<my-dialog
:isShowDialog.sync="isShowDialog"
title="Establecer título"
:showCloseIcon="true"
:mask="true"
:clickMaskClose="true"
>
<!-- El Complemento con nombre que se conectará con el componente Correspondencia de ranura -->
<plantilla #header> Ranura con nombre</plantilla>
<plantilla> Ranura predeterminada</plantilla>
<!-- Para corresponder a la ranura del subcomponente -->
<template #footer>
<van- button size="pequeño" @click="isShowDialog = false">Cancelar</van-button>
> 取消</van-button>
<van-button type="primary" size="small" @click="isShowDialog = false"
Confirmar</van-button>
</template>
</my-dialog>
<van-button @click="isShowDialog = true" type="primary">cuadro modal</van-button>
3. Revisión y resumen de puntos de conocimiento
por qué hay tragamonedas
El nacimiento de la api de tragamonedas proviene de las necesidades de la transferencia de datos de Vue, porque generalmente usamos accesorios para transferir datos de padres a hijos, y los datos transferidos son todos "datos de tipo js", como objetos, matrices y cadenas. ¿Qué debemos hacer cuando queremos pasar una gran cantidad de fragmentos de datos de tipo html?
Existe tal demanda, por lo que surgió la tecnología de tragamonedas.
En la programación por componentes, no es necesario pasar css, porque podemos usar selectores de alcance profundo, como /deep/, para seleccionar el elemento dom en el componente secundario en el componente principal para establecer el estilo.
Clasificación de tragamonedas
●Ranura predeterminada (también conocida como: ranura ordinaria, ranura única, ranura anónima. Es decir, sin nombre, no es necesario establecer el atributo de nombre <ranura></ranura>) ●Ranura con nombre (
con un nombre< nombre de la ranura= "footer"></slot>, que tiene el atributo de nombre)
Scope slot (este es un uso ligeramente avanzado de la ranura, en lo que respecta al caso, es útil en la tabla en la interfaz de usuario de Ele.me Para)
Las ranuras se pueden ver en componentes encapsulados en Ele.me UI o ant D. Tome el-dialog como ejemplo, que usa ranuras predeterminadas y ranuras con nombre. Se puede decir que la tecnología de socket se utiliza básicamente en los componentes de la interfaz de usuario. Si tiene libertad, puede ir y ver el código fuente de los componentes del paquete de la interfaz de usuario de Ele.me. Hay muchos paquetes/componentes, busque los paquetes
en elemento -ui, que son todas
las ranuras de alcance de componentes empaquetadas por Ele.me. Este artículo no se utilizará por el momento, así que presione el botón primero y luego escriba un artículo separado sobre las funciones Artículos de ranura de dominio
Uso de ranura anónimo (predeterminado)
Los subcomponentes colocan ranuras anónimas
<template>
<div class="box">
<h1>Soy un subcomponente</h1>
<!-- El primer paso, en el subcomponente, encontrar un lugar para insertar una ranura, porque la ranura puede contener cosas, y Debido a que el componente secundario se introducirá en el componente principal
, el componente principal debe cargar el contenido específico de la ranura insertada por el componente secundario. El componente principal carga el fragmento html, y el
fragmento html se puede obtener en el componente secundario. . Entonces: la ranura se da cuenta del efecto del componente principal que pasa datos al componente secundario
-->
<ranura></ranura>
<!-- el componente secundario escribe una etiqueta de ranura para recibir el fragmento html pasado por el componente principal. Si no lo escribe, el componente principal se pasará en vano, es decir,
no se generará DOM y no se procesará
-->
</div>
</template>
<script>
export default {
nombre : "DemoChildslot",
};
</script>
< estilo lang="less" scoped>
.box {
ancho: 200px;
alto: 200px;
color de fondo: #baf;
El componente principal pasa HTML usando una ranura anónima
<template>
<div id="app">
<!-- El segundo paso
es usar subcomponentes y escribir código en medio de las etiquetas de los subcomponentes para realizar la transferencia de datos de la ranura. -->
<child-slot>
<i>Lo pasé desde el componente principal</i>
<!--
También se puede escribir así, porque el valor predeterminado es slot="default", pero generalmente no se escribe así, es un poco problemático
<i slot="default">El componente padre me pasó</i>
-->
</child-slot>
</div>
</template>
<script>
// Introducir el componente secundario
importa childSlot desde "./childSlot";
exporta los {componentes predeterminados
: {
childSlot, // registra el componente secundario
},
};
</script>
<style lang="less" scoped>
#aplicación {
ancho: 100%;
min-altura: 100vh;
tamaño de caja: caja de borde;
relleno: 50px;
}
</estilo>
representaciones
Uso de ranuras con nombre
Por ejemplo, si queremos empaquetar un componente de cuadro de viñetas, después de que aparece el cuadro de viñetas, en el área de contenido del cuadro de viñetas, está el área de contenido del encabezado del cuadro de viñetas, el área de contenido principal del cuadro de viñetas y el área de contenido inferior del cuadro de viñetas. Podemos usar ranuras anónimas en el área de contenido principal del cuadro de viñetas.Si el cuadro de viñetas necesita especificar el contenido del encabezado y el contenido inferior del cuadro de viñetas, puede especificar el contenido específico a través de la ranura con nombre. El código de la estructura es el siguiente:
Los subcomponentes colocan ranuras con nombre
<style lang="less" scoped>
.box {
ancho: 170px;
altura: 200px;
}
</estilo>
color de fondo: #baf;
Use ranuras con nombre para pasar HTML en el componente principal
<template>
<div id="app">
<child-slot>
<!-- Método de escritura 1: el atributo de la ranura se escribe en la etiqueta.
Cuando la ranura nombrada pasa datos en el componente principal, la posición no importa, porque se pasa la ranura con nombre Los datos
encontrarán la ranura con nombre en el subcomponente correspondiente de acuerdo con el nombre de la ranura con nombre.
-->
<!-- <p slot="footfoot">Bottom bottom</p>
<i>Me pasa el componente padre</i>
<p slot="headhead">head head</p > - ->
<!-- Método de escritura 2: el atributo de espacio se escribe en la etiqueta de plantilla y la etiqueta de plantilla no se representará en DOM -->
<template slot="headhead">
<p>Encabezado de etiqueta de plantilla</p >
</ template>
<i>Me pasó el componente principal</i>
<template slot="footfoot">
<p>Parte inferior de la etiqueta de la plantilla</p>
importar childSlot desde "./childSlot";
exportar por defecto {
componentes: {
childSlot, // 注册子组件
},
};
</script>
<style lang="less" scoped>
#app {
ancho: 100%;
min-altura: 100vh;
tamaño de caja: cuadro de borde;
relleno: 50px;
}
</estilo>
representaciones
