<template> <div :class="prefixCls"> <draggable tag="ul" :model-value="list" v-bind="{ group: { name: 'form-draggable', pull: 'clone', put: false }, sort: false, clone: cloneItem, animation: 180, ghostClass: 'moving', }" item-key="type" @start="handleStart($event, list)" @add="handleAdd" > <template #item="{ element, index }"> <li class="bs-box text-ellipsis" @dragstart="$emit('add-attrs', list, index)" @click="$emit('handle-list-push', element)" > <!-- <svg v-if="element.icon.indexOf('icon-') > -1" class="icon" aria-hidden="true"> <use :xlink:href="`#${element.icon}`" /> </svg> --> <Icon :icon="element.icon" /> {{ element.label }}</li ></template > </draggable> </div> </template> <script lang="ts"> import { defineComponent, reactive } from 'vue'; import { IVFormComponent } from '../../../typings/v-form-component'; import draggable from 'vuedraggable'; import Icon from '@/components/Icon/Icon.vue'; import { useDesign } from '/@/hooks/web/useDesign'; export default defineComponent({ name: 'CollapseItem', components: { draggable, Icon }, props: { list: { type: [Array], default: () => [], }, handleListPush: { type: Function, default: null, }, }, setup(props, { emit }) { const { prefixCls } = useDesign('form-design-collapse-item'); const state = reactive({}); const handleStart = (e: any, list1: IVFormComponent[]) => { emit('start', list1[e.oldIndex].component); }; const handleAdd = (e: any) => { console.log(e); }; // https://github.com/SortableJS/vue.draggable.next // https://github.com/SortableJS/vue.draggable.next/blob/master/example/components/custom-clone.vue const cloneItem = (one) => { return props.handleListPush(one); }; return { prefixCls, state, handleStart, handleAdd, cloneItem }; }, }); </script> <style lang="less" scoped> @prefix-cls: ~'@{namespace}-form-design-collapse-item'; @import url('../styles/variable.less'); .@{prefix-cls} { ul { display: flex; flex-wrap: wrap; margin-bottom: 0; padding: 5px; list-style: none; // background: #efefef; li { width: calc(50% - 6px); height: 36px; margin: 2.7px; padding: 8px 12px; transition: all 0.3s; border: 1px solid @border-color; border-radius: 3px; line-height: 20px; cursor: move; &:hover { position: relative; border: 1px solid @primary-color; // z-index: 1; box-shadow: 0 2px 6px @primary-color; color: @primary-color; } } } svg { display: inline !important; } } </style>