Show helper device after dragging
npm install dragond --save
import { dragond, dragondDevice, dragondMenu, dragondLine, dragondIcon } from 'dragond';
components: {
dragond, dragondDevice, dragondMenu, dragondLine, dragondIcon
}
Detailed usage is in the Docs.
Create dragondDevice
component in the parent component to be used in common.
<dragondDevice>
...
</dragondDevice>
Create dragond
component in the space to recognize the drag.
<dragond @dragondData="dragondData">
...
</dragond>
And create the following function to retrieve the dragged data.
methods: {
dragondData: function (data) {
this.msg = data;
}
}
Please put it in to add a menu function in the DragondDevice.
<dragondDevice>
<dragondMenu>drag</dragondMenu>
<dragondMenu>...</dragondMenu>
</dragondDevice>
Use this component if you want to add lines between DragondMenu.
<dragondDevice>
<dragondMenu>drag</dragondMenu>
<dragondLine></dragondLine> <!-- Like this -->
<dragondMenu>ond</dragondMenu>
</dragondDevice>
Use this component if you want to use the built-in icons.
<dragondMenu>
<dragondIcon v-bind:icon="'...'"></dragondIcon>
</dragondMenu>