Skip to content

Commit b238c7c

Browse files
mfuumfuu
committed
feat: buffer as prop to fix #29 
1 parent 6edce76 commit b238c7c

6 files changed

Lines changed: 39 additions & 26 deletions

File tree

‎README.md‎

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -99,27 +99,28 @@ const list = ref([
9999

100100
**Uncommonly used**
101101

102-
| **Prop** | **Type** | **Default** | **Description** |
103-
| -------------------- | --------- | ------------------ | ------------------------------------------------------------- |
104-
| `disabled` | `Boolean` | `false` | Disables the sortable if set to true |
105-
| `sortable` | `Boolean` | `true` | Whether the current list can be sorted by dragging |
106-
| `draggable` | `String` | `[role="item"]` | Specifies which items inside the element should be draggable. |
107-
| `animation` | `Number` | `150` | Animation speed moving items when sorting |
108-
| `autoScroll` | `Boolean` | `true` | Automatic scrolling when moving to the edge of the container |
109-
| `scrollSpeed` | `Object` | `{ x: 10, y: 10 }` | Vertical&Horizontal scrolling speed (px) |
110-
| `scrollThreshold` | `Number` | `55` | Threshold to trigger autoscroll |
111-
| `delay` | `Number` | `0` | Time in milliseconds to define when the sorting should start |
112-
| `delayOnTouchOnly` | `Boolean` | `false` | Only delay on press if user is using touch |
113-
| `appendToBody` | `Boolean` | `false` | Appends the ghost element into the document's body |
114-
| `dropOnAnimationEnd` | `Boolean` | `true` | Whether to trigger the drop event when the animation ends |
115-
| `rootTag` | `String` | `div` | Label type for root element |
116-
| `wrapTag` | `String` | `div` | Label type for list wrap element |
117-
| `wrapClass` | `String` | `''` | Class name for list wrap element |
118-
| `wrapStyle` | `Object` | `{}` | Style object for list wrap element |
119-
| `ghostClass` | `String` | `''` | Class name for the mask element when dragging |
120-
| `ghostStyle` | `Object` | `{}` | Style object for the mask element when dragging |
121-
| `chosenClass` | `String` | `''` | Class name for the chosen item |
122-
| `placeholderClass` | `String` | `''` | Class name for the drop placeholder |
102+
| **Prop** | **Type** | **Default** | **Description** |
103+
| -------------------- | --------- | ----------------------- | ------------------------------------------------------------- |
104+
| `buffer` | `Number` | `Math.round(keeps / 3)` | Buffer size to detect range change |
105+
| `disabled` | `Boolean` | `false` | Disables the sortable if set to true |
106+
| `sortable` | `Boolean` | `true` | Whether the current list can be sorted by dragging |
107+
| `draggable` | `String` | `[role="item"]` | Specifies which items inside the element should be draggable. |
108+
| `animation` | `Number` | `150` | Animation speed moving items when sorting |
109+
| `autoScroll` | `Boolean` | `true` | Automatic scrolling when moving to the edge of the container |
110+
| `scrollSpeed` | `Object` | `{ x: 10, y: 10 }` | Vertical&Horizontal scrolling speed (px) |
111+
| `scrollThreshold` | `Number` | `55` | Threshold to trigger autoscroll |
112+
| `delay` | `Number` | `0` | Time in milliseconds to define when the sorting should start |
113+
| `delayOnTouchOnly` | `Boolean` | `false` | Only delay on press if user is using touch |
114+
| `appendToBody` | `Boolean` | `false` | Appends the ghost element into the document's body |
115+
| `dropOnAnimationEnd` | `Boolean` | `true` | Whether to trigger the drop event when the animation ends |
116+
| `rootTag` | `String` | `div` | Label type for root element |
117+
| `wrapTag` | `String` | `div` | Label type for list wrap element |
118+
| `wrapClass` | `String` | `''` | Class name for list wrap element |
119+
| `wrapStyle` | `Object` | `{}` | Style object for list wrap element |
120+
| `ghostClass` | `String` | `''` | Class name for the mask element when dragging |
121+
| `ghostStyle` | `Object` | `{}` | Style object for the mask element when dragging |
122+
| `chosenClass` | `String` | `''` | Class name for the chosen item |
123+
| `placeholderClass` | `String` | `''` | Class name for the drop placeholder |
123124

124125
## Methods
125126

‎docs/guide/props.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,16 @@ The number of lines rendered by the virtual scroll
3232

3333
The estimated height of each piece of data, you can choose to pass it or not, it will be automatically calculated
3434

35+
## `buffer`
36+
37+
| **Type** | **Default** |
38+
| -------- | ----------------------- |
39+
| `Number` | `Math.round(keeps / 3)` |
40+
41+
Buffer size to detect range change
42+
43+
> If a rendering anomaly occurs, for example: [this issue](https://github.com/mfuu/vue3-virtual-sortable/issues/29), you can reduce the value or set it to 0.
44+
3545
## `handle`
3646

3747
| **Type** | **Default** |

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-virtual-sortable",
3-
"version": "3.1.0",
3+
"version": "3.1.1",
44
"description": "A virtual scrolling list component that can be sorted by dragging, support vue3",
55
"main": "dist/virtual-list.min.js",
66
"types": "types/index.d.ts",

‎src/core‎

‎src/index.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,7 @@ const VirtualList = defineComponent({
188188
return [...VirtualAttrs, ...SortableAttrs].reduce((res, key) => {
189189
res[key] = props[key];
190190
return res;
191-
}, {});
191+
}, {} as Options<KeyValueType>);
192192
});
193193

194194
watch(
@@ -198,7 +198,7 @@ const VirtualList = defineComponent({
198198

199199
for (let key in newVal) {
200200
if (newVal[key] !== oldVal[key]) {
201-
VS.option(key as keyof Options<KeyValueType>, newVal[key]);
201+
VS.option(key as any, newVal[key]);
202202
}
203203
}
204204
}
@@ -287,7 +287,6 @@ const VirtualList = defineComponent({
287287
const initVirtualSortable = () => {
288288
VS = new VirtualSortable(rootElRef.value!, {
289289
...vsAttributes.value,
290-
buffer: Math.round(props.keeps / 3),
291290
wrapper: wrapElRef.value!,
292291
scroller: props.scroller || rootElRef.value!,
293292
uniqueKeys: uniqueKeys,

‎src/props.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,9 @@ export const VirtualProps = {
5555
type: Number,
5656
default: undefined,
5757
},
58+
buffer: {
59+
type: Number,
60+
},
5861
debounceTime: {
5962
type: Number,
6063
default: 0,

0 commit comments

Comments
 (0)