0
225
ViewsNo se puede encontrar la función equivalente de Vuejs para el diagrama de Angular
Intenté mucho pero no pude encontrar una solución. Por favor, ayúdenme, ya que estoy preocupado por este problema desde hace más de 1 día. Cualquier ayuda sería realmente apreciada.
Tengo una aplicación Syncfusion que se ha desarrollado con Angular , ahora me gustaría convertir esa aplicación en Vuejs , así que trato de convertirla, pero tengo muchos problemas porque no puedo encontrar el mapeo 1: 1 de los ejsdiagram methods .
En Angular estaba usando el siguiente código y el método respectivo:
<ej-diagram id="diagram" e-height="80vh" e-width="100%" e-nodeCollectionChange="nodeCollectionChange" e-connectorCollectionChange="connectorCollectionChange" e-connectorTargetChange="connectorTargetChange" e-connectorSourceChange="connectorSourceChange" e-textChange="textChange"></ej-diagram> Ahora estoy usando algo como esto en Vuejs :
<div id="app"> <ejs-diagram id="diagram" ref="diagramObj" :width="width" :height="height" :collection-change="collectionChange" :e-connector-collection-change="connectorCollectionChange" /> div> Me gustaría saber la función equivalente de Vuejs para e-connectorCollectionChange , e-connectorTargetChange , etc. Busqué mucho pero no pude encontrar ninguna documentación o tal vez me perdí algo. ¿Puede alguien por favor guiarme a través de esto?
Básicamente, quiero tener algo como esto en mi aplicación Vuejs+Syncfusion . Lo tengo en Angular+Syncfusion :
1 answers
Answer question0
Hemos agregado el enlace de muestra para demostrar cómo agregar el cambio de colección de conectores y el cambio de destino del conector en el diagrama. En lugar de usar el cambio de colección de conectores, podemos usar el evento de cambio de colección que se activará cuando se agregue un nuevo nodo o conector al diagrama. Usando el argumento del elemento en la colección de argumentos de eventos cambiados, podemos encontrar si se agrega un conector o un nodo al diagrama. Para obtener más información, consulte la siguiente documentación y el fragmento de código a continuación.
<ejs-diagram style='display:block' ref="diagramObject" id="diagram" :width='width' :height='height' :nodes='nodes' :connectors='connectors' :getNodeDefaults='getNodeDefaults' :getConnectorDefaults='getConnectorDefaults' :collectionChange="collectionChange" :sourcePointChange="sourcePointChange" :targetPointChange="targetPointChange" :textEdit="textEdit"> </ejs-diagram>Enlace de muestra: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Events16960811600180
Enlace de documentación: https://ej2.syncfusion.com/vue/documentation/diagram/getting-started/
Ejemplo de enlace del navegador: https://ej2.syncfusion.com/vue/demos/#/bootstrap5/diagram/diagram-events.html