12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152 |
- <template>
- <div class="component-group" v-if="group.components.length>0">
- <div class="component-group__label">
- {{group.label}}
- </div>
- <vue-draggable :model-value="group.components"
- item-key="type"
- tag="ul"
- :group="{name: 'components', pull: 'clone', put:false}"
- :sort="false"
- :clone="cloneComponent">
- <template #item="{element}">
- <form-component-item :item="element"></form-component-item>
- </template>
- </vue-draggable>
- </div>
- </template>
- <script>
- import VueDraggable from 'vuedraggable'
- import FormComponentItem from '../form-components/item'
- import { getCopyRow } from '../util'
- export default {
- components: { VueDraggable, FormComponentItem },
- props: {
- group: Object
- },
- setup () {
- const cloneComponent = (component) => {
- return getCopyRow({ config: component })
- }
- return {
- cloneComponent
- }
- }
- }
- </script>
- <style lang="less">
- .component-group{
- &__label{
- font-size: 13px;
- color: rgb(102, 102, 102);
- padding: 8px 12px;
- }
- ul{
- margin:0;
- padding: 0 10px 10px;
- overflow: hidden;
- position: relative;
- }
- }
- </style>
|