fix: eslint
parent
5b27f87ef3
commit
96501ceb00
|
|
@ -35,7 +35,7 @@ function toggleDarkMode() {
|
||||||
@click="toggleDarkMode"
|
@click="toggleDarkMode"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="dark:(transform translateX(calc(100% + 2px))) absolute z-1 h-4.5 w-4.5 rounded-1/2 bg-white will-change-transform"
|
class="absolute z-1 h-4.5 w-4.5 rounded-1/2 bg-white will-change-transform"
|
||||||
/>
|
/>
|
||||||
<SvgIcon size="14" name="sun" />
|
<SvgIcon size="14" name="sun" />
|
||||||
<SvgIcon size="14" name="moon" />
|
<SvgIcon size="14" name="moon" />
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
-->
|
-->
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import draggable from 'vuedraggable'
|
import draggable from 'vuedraggable'
|
||||||
import { computed, defineComponent } from 'vue'
|
import { computed } from 'vue'
|
||||||
import { cloneDeep } from 'lodash-es'
|
import { cloneDeep } from 'lodash-es'
|
||||||
import { Empty, Form } from 'ant-design-vue'
|
import { Empty, Form } from 'ant-design-vue'
|
||||||
import { useFormDesignState } from '../../../hooks/useFormDesignState'
|
import { useFormDesignState } from '../../../hooks/useFormDesignState'
|
||||||
|
|
@ -46,30 +46,17 @@ const layoutTag = computed(() => {
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="v-form-container form-panel">
|
<div class="v-form-container form-panel">
|
||||||
<Empty
|
<Empty v-show="formConfig.schemas.length === 0" class="empty-text" description="从左侧选择控件添加" />
|
||||||
v-show="formConfig.schemas.length === 0"
|
|
||||||
class="empty-text"
|
|
||||||
description="从左侧选择控件添加"
|
|
||||||
/>
|
|
||||||
<Form v-bind="formConfig">
|
<Form v-bind="formConfig">
|
||||||
<div class="draggable-box">
|
<div class="draggable-box">
|
||||||
<Draggable
|
<Draggable
|
||||||
v-model="formConfig.schemas"
|
v-model="formConfig.schemas" class="list-main ant-row" group="form-draggable"
|
||||||
class="list-main ant-row"
|
:component-data="{ name: 'list', tag: 'div', type: 'transition-group' }" ghost-class="moving" :animation="180"
|
||||||
group="form-draggable"
|
handle=".drag-move" item-key="key" @add="addItem" @start="handleDragStart"
|
||||||
:component-data="{ name: 'list', tag: 'div', type: 'transition-group' }"
|
|
||||||
ghost-class="moving"
|
|
||||||
:animation="180"
|
|
||||||
handle=".drag-move"
|
|
||||||
item-key="key"
|
|
||||||
@add="addItem"
|
|
||||||
@start="handleDragStart"
|
|
||||||
>
|
>
|
||||||
<template #item="{ element }">
|
<template #item="{ element }">
|
||||||
<LayoutItem
|
<LayoutItem
|
||||||
class="drag-move"
|
class="drag-move" :schema="element" :data="formConfig"
|
||||||
:schema="element"
|
|
||||||
:data="formConfig"
|
|
||||||
:current-item="formConfig.currentItem || {}"
|
:current-item="formConfig.currentItem || {}"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -80,10 +67,11 @@ const layoutTag = computed(() => {
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@import url('../styles/variable.less');
|
@import url('../styles/variable.less');
|
||||||
@import url('../styles/drag.less');
|
@import url('../styles/drag.less');
|
||||||
|
|
||||||
|
.v-form-container {
|
||||||
|
|
||||||
.v-form-container {
|
|
||||||
// 内联布局样式
|
// 内联布局样式
|
||||||
.ant-form-inline {
|
.ant-form-inline {
|
||||||
.list-main {
|
.list-main {
|
||||||
|
|
@ -101,9 +89,9 @@ const layoutTag = computed(() => {
|
||||||
min-width: 175px !important;
|
min-width: 175px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-panel {
|
.form-panel {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
|
|
@ -127,6 +115,7 @@ const layoutTag = computed(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-main {
|
.list-main {
|
||||||
|
|
||||||
// 列表动画
|
// 列表动画
|
||||||
.list-enter-active {
|
.list-enter-active {
|
||||||
transition: all 0.5s;
|
transition: all 0.5s;
|
||||||
|
|
@ -147,5 +136,5 @@ const layoutTag = computed(() => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue