Imagen de portada
Tomando el sol en la plataforma del techo de la empresa al mediodía, se quedó dormido inconscientemente
antecedentes
La última vez, se desarrolló un cuadro emergente de confirmación secundario similar a popConfirm, como se muestra en las siguientes dos imágenes:
- Figura 1
- Figura II
Después de completar el desarrollo, cuando me preparaba para integrarme en el proyecto, de repente descubrí que no se puede integrar en la biblioteca de componentes internos de la empresa, porque la biblioteca de componentes de la empresa 表格的操作项按钮是通过传参的方式进行配置no puede usar directamente popConfirm para ajustar el botón de operación para la escritura Dom.
Por lo tanto, se realizó un desarrollo simple de la caja de viñetas secundaria, y el desarrollo se realizó de manera modal. La ventaja es que, además del método anterior, los accesorios se pueden pasar directamente al componente para su uso, como:
<HConfirmModal
title="测试标题"
modalType="TextConfirm"
paperWork="hello-word"
:width="300"
v-model:visible="visible">
</HConfirmModal>
复制代码También puede usar el método de registro. Después de registrar el componente, llame a la API del componente para su uso, como:
<HConfirmModal @register="register" @ok="testOK" ></HConfirmModal>
const [register, { openConfirmModal: openModifyModal,setConfirmModalProps}] = useConfirmModal()
function handleShow() {
setConfirmModalProps({
title:'测试标题',
modalType:'TimeConfirm',
desc:'注意危险'
})
openModifyModal(true)
}
复制代码De esta manera, se puede integrar fácilmente en la biblioteca de componentes existente y no hay necesidad de cambiar el código relacionado con la tabla en la biblioteca de componentes existente, y el efecto es relativamente mejor.
idea previa al desarrollo
El primer plan práctico fue antdvolver a encapsular el componente modal con la ayuda del componente modal, pero encontré que: cuando escribí la estructura dom correspondiente en el componente modal, como se muestra en la figura:
- Figura 1
- Figura II
Después de escribir el dom relacionado con el formulario en el componente modal, necesito verificar el formulario cuando hago clic en el botón de confirmación. En este momento, necesito poder obtener directamente el evento de clic en el componente modal.
Entonces, ¿cómo obtener este evento?
Al principio, no pensé en un buen método, luego me pregunté si podría usar ref para obtener una instancia de Modal y luego llamar al evento registrado en esta instancia.
Puede ser posible, pero parece un poco exagerado operar de esta manera. Después de todo, además de la lógica de la verificación de formularios, también hay una cuenta regresiva que debe juzgarse, y parece un poco problemático escribir .
Así que al final, sigo pensando que es mejor aprender del estilo Modal y volver a desarrollar uno nuevo, es más cómodo de escribir y la eficiencia será mayor.
Ideas de implementación de dos métodos de llamada
Primero, use accesorios para el control. Este tipo de componente es relativamente simple de implementar. Defina las propiedades requeridas por el componente como props y páselas al componente. El componente se representa de acuerdo con diferentes propiedades y emitse activan diferentes eventos cuando se hace clic.
其流程为：props和emit事件 ---> 渲染组件 ---> 触发emit事件。
这种方式实现起来比较简单，但是场景稍微有些局限，如：组件的行为，如显示、隐藏必须在外部定义，需要外部书写相应的函数进行控制。
第二种方式，定义组件内部的方法，组件的行为通过组件本身的方法进行控制，同时将组件自身的方式通过hooks的方式暴露给外部。
其流程为：props和emit事件 ---> 组件定义自身需要的函数，同时将传入的props属性转化为内部属性---> 组件的行为根据自身的属性和方法进行控制---> 将组件本身的方法以hooks的形式暴露出来。
这样一来，组件即可以以传统props的方式使用，也可以通过hooks的注册方法及组件本身的其他方法进行控制，使用的场景相对来说更广泛一些。
核心方法
传统的组件开发方式这里就不做过多的解释了，主要讲一下第二种方式的实现方式。
使用第二种方式开发组件的关键点有两处：
第一， 如何将外部传入的props转化为组件内部的属性 ？
第二，如何才能够获取到组件自身所定义的方法 ？
将外部传入的props转为组件内部属性其实很简单，我们只需要使用computed方式将转化一下即可，如：
const getMergeProps = computed((): Recordable => {
return {
...props,
...(unref(propsRef) as any)
}
})
复制代码这样我们就可以使用组件内部的属性getMergeProps对组件的dom进行渲染，实现不同的属性展示不同的内容。
那么，如何才能获取组件内部的方法呢？其实也很简单，这里需要用到一个vue提供的一个方法：getCurrentInstance。
getCurrentInstance可以获取到当前组件的实例，既然可以获取到当前的实例，那么比必然可以操作实例上的方法。
然后，我们在组件实例化的时候触发一个注册函数register,将组件内部需要对外暴露的方法传给register方法，然后在对应的hooks中可以扩展实例的方法，这样我们就可以实现使用hooks的方式，注册、然后控制组件的各种行为。
El código para este disparador también es muy simple:
const instance = getCurrentInstance()
if (instance) {
emit('register', modalMethods, instance.uid)
}
复制代码Finalmente, podemos obtener la instancia del componente en la función de ganchos.Después de obtener el objeto de instancia del componente, podemos hacer lo que queramos.
Al final
Hay pocos códigos publicados en el artículo. La razón principal es que todavía necesitamos entender las ideas de implementación en tecnología. Con las ideas, podemos escribir todo tipo de códigos para realizar funciones. Simplemente publicar códigos no parece tener mucho sentido. .
La composición no está bien escrita, por favor critiquen y aconsejen~
gracias ~