组件代码:
<!-- 拖拽组件,使用说明见 README.md,--> <template> <div class='YxkDrag'> <VDraggable v-bind="dragBind(dragObj)" @start="dragStart" @end="dragEnd" v-on="this.$listeners"> <!-- 默认图片拖拽 --> <template v-if="!isCustomDrag"> <li v-for="(item, index) in dragObj.list" :key="index" :class="['draggable__item', item.class]"> <el-image v-bind="imageBind(item)"></el-image> </li> </template> <!-- 自定义拖拽内容 --> <template v-else> <slot></slot> </template> </VDraggable> </div> </template> <script> import VDraggable from "vuedraggable"; export default { name: 'YxkDrag', componentName: 'YxkDrag', props: { dragObj: { type: Object, default: () => { return { list: [] } } } }, components: { VDraggable }, data() { return { isCustomDrag: false, defaultBind: { // 拖拽默认属性 options: { animation: 150, ghostClass: "sortable-ghost", chosenClass: "chosenClass", scroll: true, scrollSensitivity: 200, } } } }, methods: { // v-bind dragBind(obj) { if(obj.list) this.defaultBind['v-model'] = obj.list // 插槽无内容时默认图片拖拽 if (this.$slots.default) { this.isCustomDrag = true } else { this.defaultBind.tag = 'ul' this.defaultBind.draggable = '.draggable__item' } if (obj.options) { Object.assign(obj.options, this.defaultBind.options) } return { ...this.defaultBind, ...obj } }, imageBind(obj) { // 默认值 let defaultImage = { src: obj.src, 'preview-src-list': [obj.src], fit: "cover", style: this.dragObj.styles || { width: '100px', height: '100px' } } return defaultImage }, // 拖拽事件 dragStart() { this.$emit("dragStart", this.dragObj) }, dragEnd() { this.$emit('dragEnd', this.dragObj) } }, computed: {}, watch: {}, created() {}, mounted() {} } </script> <style lang='scss'> .YxkDrag { ul { display: flex; flex-wrap: wrap; .draggable__item { position: relative; height: 100px; &:not(:last-child) { margin: 0 10px 10px 0; } } } } </style>
// 插件 vuedraggable
示例:
参数说明: