Skip to content

Commit baf412f

Browse files
Adjust dist files + update README.md with documentation of issue #316 and issue #268
1 parent 9f1d976 commit baf412f

File tree

3 files changed

+44
-5
lines changed

3 files changed

+44
-5
lines changed

README.md

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,9 @@ Note that all the method starting by "on" will be ignored as draggable component
131131
Type: `String`<br>
132132
Default: `'div'`
133133
134-
HTML node type of the element that draggable component create as outer element for the included slot.
134+
HTML node type of the element that draggable component create as outer element for the included slot.<br>
135+
It is also possible to pass the name of vue component as element. In this case, draggable attribute will be passed to the create component.<br>
136+
See also [componentData](#componentData) if you need to set props or event to the created component.
135137
136138
#### clone
137139
Type: `Function`<br>
@@ -178,6 +180,45 @@ checkMove: function(evt){
178180
```
179181
See complete example: [Cancel.html](https://github.com/SortableJS/Vue.Draggable/blob/master/examples/Cancel.html), [cancel.js](https://github.com/SortableJS/Vue.Draggable/blob/master/examples/script/cancel.js)
180182
183+
#### componentData
184+
Type: `Object`<br>
185+
Required: `false`<br>
186+
Default: `null`<br>
187+
188+
This props is used to pass additional information to child component declared by [element props](#element).<br>
189+
Value:
190+
* `props`: props to be passed to the child component
191+
* `on`: events to be subscribe in the child component
192+
193+
Example (using [element UI library](http://element.eleme.io/#/en-US)):
194+
```HTML
195+
<draggable element="el-collapse" :list="list" :component-data="getComponentData()">
196+
<el-collapse-item v-for="e in list" :title="e.title" :name="e.name" :key="e.name">
197+
<div>{{e.description}}</div>
198+
</el-collapse-item>
199+
</draggable>
200+
```
201+
```javascript
202+
methods: {
203+
handleChange() {
204+
console.log('changed');
205+
},
206+
inputChanged(value) {
207+
this.activeNames = value;
208+
},
209+
getComponentData() {
210+
return {
211+
on: {
212+
change: this.handleChange,
213+
input: this.inputChanged
214+
},
215+
props: {
216+
value: this.activeNames
217+
}
218+
};
219+
}
220+
}
221+
```
181222
182223
### Events
183224

dist/vuedraggable.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
'use strict';
22

3-
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
4-
53
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
64

75
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
@@ -395,7 +393,7 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
395393
return draggableComponent;
396394
}
397395

398-
if ((typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) == "object") {
396+
if (typeof exports == "object") {
399397
var Sortable = require("sortablejs");
400398
module.exports = buildDraggable(Sortable);
401399
} else if (typeof define == "function" && define.amd) {

dist/vuedraggable.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)