项目作者: emiliorizzo

项目描述 :
Simple vue draggable dialog
高级语言: Vue
项目地址: git://github.com/emiliorizzo/vue-dialog-drag.git
创建时间: 2017-07-14T09:18:23Z
项目社区:https://github.com/emiliorizzo/vue-dialog-drag

开源协议:MIT License

下载


GitHub issues GitHub license npm

vue-dialog-drag

Simple draggable dialog

Demo

Features:

  • Drag & Drop
  • Touch support (only for drag, not for drop)
  • Drop area component
  • ‘Pin mode’, to lock drag.

Installation

  1. npm install vue-dialog-drag --save

Usage

Import and register component

  1. import DialogDrag from 'vue-dialog-drag'
  2. export default{
  3. ...
  4. components:{
  5. DialogDrag
  6. }
  7. }

include css

  1. <style src='vue-dialog-drag/dist/vue-dialog-drag.css'></style>

Or import source component from: ‘vue-dialog-drag/src/vue-dialog-drag.vue’
And install devDependencies. (stylus and pug)
see package.json)

Examples

Single file component

  1. <template>
  2. <div id="app">
  3. <dialog-drag id="dialog-1">
  4. <p> Test dialog</p>
  5. </dialog-drag>
  6. <drop-area @drop='drop'>
  7. <p>Drop Here</p>
  8. </drop-area>
  9. </div>
  10. </template>
  11. <script>
  12. import DialogDrag from 'vue-dialog-drag'
  13. import DropArea from 'vue-dialog-drag/dist/drop-area'
  14. export default {
  15. name: 'app',
  16. components: {
  17. DialogDrag,
  18. DropArea
  19. },
  20. methods: {
  21. drop (id) {
  22. console.log('drop id:', id)
  23. }
  24. }
  25. }
  26. </script>
  27. <style src="vue-dialog-drag/dist/vue-dialog-drag.css"></style>
  28. <style src="vue-dialog-drag/dist/drop-area.css"></style>
  29. <!-- optional dialog styles, see example -->
  30. <style src="vue-dialog-drag/dist/dialog-styles.css"></style>

html

See this fiddle

Dialog Component

Slots

  • title: dialog title. If you don’t need formatted title, use ‘title’ prop.
  • button-pin: content for pin button
  • button-pinned: content for pin button when dialog is pinned
  • button-close: content for close button

Props

  • id: Unique id for dialog
  • title: Dialog title
  • eventCb: Function(props Object)
  • options: Object
    • left: Number
    • top: Number
    • zIndex: Number
    • x: alias of left
    • y: alias of top
    • z: alias of zIndex
    • width: Number (0 or null to auto)
    • height: Number (0 or null to auto)
    • buttonPin: Boolean
    • buttonClose:Boolean
    • dragCursor: css cursor to show when drag is enabled
    • centered: “viewport” | “parent” , center dialog to viewport or parent element
    • pinned: Boolean, disable/enable drag
    • dropEnabled: Boolean, handle drag with mouse events, instead of drag events

Events

All event emits an object: { id, left, top, x, y, z, width, height, pinned }
You can format it, whith ‘eventCb’ prop.

  • load: fired on mounted
  • focus: fired on click and touch
  • pin: fired on pin / unpin dialog
  • drag-start: fired on dragstart
  • move: fired when move dialog
  • drag-end: fired on dragend
  • close: fired when close dialogs

Css

The main container has class .dialog-drag, and .dialog-drag .fixed when dialog is pinned

You can import extra dialog styles from dist/dialog-styles.css.

view: example styles

Drop area component

Slots

Over: content rendered when the dialog is dragged over drop area.

Events

drop: fired when drop the dialog, emits dialog id.