vue3 draggable filter
时间: 2023-11-08 17:05:10 浏览: 56
Vue3 Draggable提供了一个名为`filter`的属性,可以用于过滤可拖动元素。该属性接受一个函数作为参数,该函数将被应用于每个可拖动元素,如果返回`false`,则该元素将被过滤掉,不会被拖动。
以下是一个示例:
```html
<template>
<div>
<div v-for="item in items" :key="item.id" v-if="item.visible">
{{ item.name }}
</div>
<draggable v-model="items" :filter="filter">
<div v-for="item in items" :key="item.id">
{{ item.name }}
</div>
</draggable>
</div>
</template>
<script>
import { defineComponent } from 'vue';
import draggable from 'vuedraggable';
export default defineComponent({
components: {
draggable,
},
data() {
return {
items: [
{ id: 1, name: 'Item 1', visible: true },
{ id: 2, name: 'Item 2', visible: false },
{ id: 3, name: 'Item 3', visible: true },
],
};
},
methods: {
filter(item) {
return item.visible;
},
},
});
</script>
```
在上面的示例中,我们使用`v-if`指令过滤了一些可拖动元素,并使用`filter`属性将其应用于`draggable`组件。