dragond
v1.1.2
Published
Show helper device after dragging with dragond
Downloads
14
Maintainers
Readme
Install
NPM
npm install dragond --save
Module
import { dragond, dragondDevice, dragondMenu, dragondLine, dragondIcon } from 'dragond';
components: {
dragond, dragondDevice, dragondMenu, dragondLine, dragondIcon
}
Usage
Detailed usage is in the Docs.
DragondDevice
Create dragondDevice
component in the parent component to be used in common.
<dragondDevice>
...
</dragondDevice>
Dragond
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;
}
}
DragondMenu
Please put it in to add a menu function in the DragondDevice.
<dragondDevice>
<dragondMenu>drag</dragondMenu>
<dragondMenu>...</dragondMenu>
</dragondDevice>
DragondLine
Use this component if you want to add lines between DragondMenu.
<dragondDevice>
<dragondMenu>drag</dragondMenu>
<dragondLine></dragondLine> <!-- Like this -->
<dragondMenu>ond</dragondMenu>
</dragondDevice>
DragondIcon
Use this component if you want to use the built-in icons.
<dragondMenu>
<dragondIcon v-bind:icon="'...'"></dragondIcon>
</dragondMenu>