刘勇虎的官方网站
网站内容包含大前端、服务器开发、Python开发、iOS开发、Android开发、网站维护等技术文章。专注于分享技术经验,职业心得体会,IT优秀文章与教程创作。
Stay hungry,Stay foolish,Stay young
yarn add vuedraggable@next
npm i -S vuedraggable@next
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/3.0.2/vue.min.js"></script>
<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.10.2/Sortable.min.js"></script>
<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/4.0.0/vuedraggable.umd.min.js"></script>
<draggable
v-model="myArray"
group="people"
@start="drag=true"
@end="drag=false"
item-key="id">
<template #item="{element}">
<div>{{element.name}}</div>
</template>
</draggable>
import draggable from 'vuedraggable'
...
export default {
components: {
draggable,
},
data() {
return {
drag: false,
}
},
...
代码中的 item 是渲染列表的元素,他被组件的插槽(slot-item)接收。
<draggable v-model="myArray" tag="transition-group" item-key="id">
<template #item="{element}">
<div> {{element.name}} </div>
</template>
</draggable>
# footer
<draggable v-model="myArray" item-key="id">
<template #item="{element}">
<div> {{element.name}} </div>
</template>
<template #footer>
<button @click="addPeople">Add</button>
</template>
</draggable>
# header
<draggable v-model="myArray" item-key="id">
<template #item="{element}">
<div> {{element.name}} </div>
</template>
<template #header>
<button @click="addPeople">Add</button>
</template>
</draggable>
<!-- vue 2 version -->
<draggable v-model="myArray">
<div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>
<!-- vue 3 version -->
<draggable v-model="myArray" item-key="id">
<template #item="{element}">
<div>{{element.name}}</div>
</template>
</draggable>
代码:
<draggable
v-model="formData.contacts"
@start="drag = true"
@end="drag = false"
item-key="index"
>
<template #item="{ element, index }">
<!-- {{ element.name }} -->
<div class="connects">
<!-- {{ element.name }} -->
<el-input
v-model="element.name"
@input="inputContacts(index)"
placeholder="名字"
></el-input>
<el-input
v-model="element.phone"
@input="inputContacts(index)"
placeholder="联系方式"
></el-input>
</div>
</template>
</draggable>
删除中间注释。ok。