可视化装修能拖拽排序
This commit is contained in:
xinjie
parent
37d39503bd
commit
abbd23e332
|
|
@ -1,37 +1,36 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<del-wrap
|
<draggable class="draggable" v-model="navLists" animation="300">
|
||||||
class="max-w-[400px]"
|
<template v-slot:item="{ element: item, index }">
|
||||||
v-for="(item, index) in modelValue"
|
<del-wrap class="max-w-[400px]" :key="index" @close="handleDelete(index)">
|
||||||
:key="index"
|
<div class="bg-fill-light flex items-center w-full p-4 mb-4 cursor-move">
|
||||||
@close="handleDelete(index)"
|
<material-picker
|
||||||
>
|
v-model="item.image"
|
||||||
<div class="bg-fill-light flex items-center w-full p-4 mb-4">
|
upload-class="bg-body"
|
||||||
<material-picker
|
size="60px"
|
||||||
v-model="item.image"
|
exclude-domain
|
||||||
upload-class="bg-body"
|
>
|
||||||
size="60px"
|
<template #upload>
|
||||||
exclude-domain
|
<div class="upload-btn w-[60px] h-[60px]">
|
||||||
>
|
<icon name="el-icon-Plus" :size="20" />
|
||||||
<template #upload>
|
</div>
|
||||||
<div class="upload-btn w-[60px] h-[60px]">
|
</template>
|
||||||
<icon name="el-icon-Plus" :size="20" />
|
</material-picker>
|
||||||
|
<div class="ml-3 flex-1">
|
||||||
|
<div class="flex">
|
||||||
|
<span class="text-tx-regular flex-none mr-3">名称</span>
|
||||||
|
<el-input v-model="item.name" placeholder="请输入名称" />
|
||||||
|
</div>
|
||||||
|
<div class="flex mt-[18px]">
|
||||||
|
<span class="text-tx-regular flex-none mr-3">链接</span>
|
||||||
|
<link-picker v-model="item.link" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
|
||||||
</material-picker>
|
|
||||||
<div class="ml-3 flex-1">
|
|
||||||
<div class="flex">
|
|
||||||
<span class="text-tx-regular flex-none mr-3">名称</span>
|
|
||||||
<el-input v-model="item.name" placeholder="请输入名称" />
|
|
||||||
</div>
|
</div>
|
||||||
<div class="flex mt-[18px]">
|
</del-wrap>
|
||||||
<span class="text-tx-regular flex-none mr-3">链接</span>
|
</template>
|
||||||
<link-picker v-model="item.link" />
|
</draggable>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</del-wrap>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<el-button type="primary" @click="handleAdd">添加</el-button>
|
<el-button type="primary" @click="handleAdd">添加</el-button>
|
||||||
|
|
@ -41,7 +40,7 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import feedback from '@/utils/feedback'
|
import feedback from '@/utils/feedback'
|
||||||
import type { PropType } from 'vue'
|
import type { PropType } from 'vue'
|
||||||
|
import Draggable from 'vuedraggable'
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
modelValue: {
|
modelValue: {
|
||||||
type: Array as PropType<any[]>,
|
type: Array as PropType<any[]>,
|
||||||
|
|
@ -57,9 +56,19 @@ const props = defineProps({
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['update:modelValue'])
|
||||||
|
const navLists = computed({
|
||||||
|
get() {
|
||||||
|
return props.modelValue
|
||||||
|
},
|
||||||
|
set(value) {
|
||||||
|
emit('update:modelValue', value)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
const handleAdd = () => {
|
const handleAdd = () => {
|
||||||
if (props.modelValue?.length < props.max) {
|
if (props.modelValue?.length < props.max) {
|
||||||
props.modelValue.push({
|
navLists.value.push({
|
||||||
image: '',
|
image: '',
|
||||||
name: '导航名称',
|
name: '导航名称',
|
||||||
link: {}
|
link: {}
|
||||||
|
|
@ -72,7 +81,7 @@ const handleDelete = (index: number) => {
|
||||||
if (props.modelValue?.length <= props.min) {
|
if (props.modelValue?.length <= props.min) {
|
||||||
return feedback.msgError(`最少保留${props.min}个`)
|
return feedback.msgError(`最少保留${props.min}个`)
|
||||||
}
|
}
|
||||||
props.modelValue.splice(index, 1)
|
navLists.value.splice(index, 1)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-form label-width="70px">
|
<el-form label-width="70px">
|
||||||
<el-form-item label="是否启用">
|
<el-form-item label="是否启用" v-if="type == 'mobile'">
|
||||||
<el-radio-group v-model="content.enabled">
|
<el-radio-group v-model="content.enabled">
|
||||||
<el-radio :label="1">开启</el-radio>
|
<el-radio :label="1">开启</el-radio>
|
||||||
<el-radio :label="0">停用</el-radio>
|
<el-radio :label="0">停用</el-radio>
|
||||||
|
|
@ -10,28 +10,43 @@
|
||||||
<el-form-item label="图片设置">
|
<el-form-item label="图片设置">
|
||||||
<div class="flex-1">
|
<div class="flex-1">
|
||||||
<div class="form-tips">最多添加5张，建议图片尺寸：750px*340px</div>
|
<div class="form-tips">最多添加5张，建议图片尺寸：750px*340px</div>
|
||||||
<del-wrap
|
<draggable class="draggable" v-model="content.data" animation="300">
|
||||||
v-for="(item, index) in content.data"
|
<template v-slot:item="{ element: item, index }">
|
||||||
:key="index"
|
<del-wrap
|
||||||
@close="handleDelete(index)"
|
:key="index"
|
||||||
class="max-w-[400px]"
|
@close="handleDelete(index)"
|
||||||
>
|
class="max-w-[400px]"
|
||||||
<div class="bg-fill-light flex items-center w-full p-4 mt-4">
|
>
|
||||||
<material-picker
|
<div
|
||||||
v-model="item.image"
|
class="bg-fill-light flex items-center w-full p-4 mt-4 cursor-move"
|
||||||
upload-class="bg-body"
|
>
|
||||||
exclude-domain
|
<material-picker
|
||||||
/>
|
v-model="item.image"
|
||||||
<div class="ml-3 flex-1">
|
upload-class="bg-body"
|
||||||
<el-form-item label="图片名称">
|
exclude-domain
|
||||||
<el-input v-model="item.name" placeholder="请输入名称" />
|
/>
|
||||||
</el-form-item>
|
<div class="ml-3 flex-1">
|
||||||
<el-form-item class="mt-[18px]" label="图片链接">
|
<el-form-item label="图片名称">
|
||||||
<link-picker v-model="item.link" />
|
<el-input
|
||||||
</el-form-item>
|
v-model="item.name"
|
||||||
</div>
|
placeholder="请输入名称"
|
||||||
</div>
|
/>
|
||||||
</del-wrap>
|
</el-form-item>
|
||||||
|
<el-form-item class="mt-[18px]" label="图片链接">
|
||||||
|
<link-picker
|
||||||
|
v-if="type == 'mobile'"
|
||||||
|
v-model="item.link"
|
||||||
|
/>
|
||||||
|
<el-input
|
||||||
|
placeholder="请输入链接"
|
||||||
|
v-model="item.link.path"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</del-wrap>
|
||||||
|
</template>
|
||||||
|
</draggable>
|
||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item v-if="content.data?.length < limit">
|
<el-form-item v-if="content.data?.length < limit">
|
||||||
|
|
@ -44,6 +59,7 @@
|
||||||
import feedback from '@/utils/feedback'
|
import feedback from '@/utils/feedback'
|
||||||
import type { PropType } from 'vue'
|
import type { PropType } from 'vue'
|
||||||
import type options from './options'
|
import type options from './options'
|
||||||
|
import Draggable from 'vuedraggable'
|
||||||
const limit = 5
|
const limit = 5
|
||||||
type OptionsType = ReturnType<typeof options>
|
type OptionsType = ReturnType<typeof options>
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
|
|
@ -54,6 +70,10 @@ const props = defineProps({
|
||||||
styles: {
|
styles: {
|
||||||
type: Object as PropType<OptionsType['styles']>,
|
type: Object as PropType<OptionsType['styles']>,
|
||||||
default: () => ({})
|
default: () => ({})
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String as PropType<'mobile' | 'pc'>,
|
||||||
|
default: 'mobile'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,28 +10,36 @@
|
||||||
<el-form-item label="图片设置">
|
<el-form-item label="图片设置">
|
||||||
<div class="flex-1">
|
<div class="flex-1">
|
||||||
<div class="form-tips">最多添加5张，建议图片尺寸：750px*200px</div>
|
<div class="form-tips">最多添加5张，建议图片尺寸：750px*200px</div>
|
||||||
<del-wrap
|
<draggable class="draggable" v-model="content.data" animation="300">
|
||||||
v-for="(item, index) in content.data"
|
<template v-slot:item="{ element: item, index }">
|
||||||
:key="index"
|
<del-wrap
|
||||||
@close="handleDelete(index)"
|
:key="index"
|
||||||
class="max-w-[400px]"
|
@close="handleDelete(index)"
|
||||||
>
|
class="max-w-[400px]"
|
||||||
<div class="bg-fill-light flex items-center w-full p-4 mt-4">
|
>
|
||||||
<material-picker
|
<div
|
||||||
v-model="item.image"
|
class="bg-fill-light flex items-center w-full p-4 mt-4 cursor-move"
|
||||||
upload-class="bg-body"
|
>
|
||||||
exclude-domain
|
<material-picker
|
||||||
/>
|
v-model="item.image"
|
||||||
<div class="ml-3 flex-1">
|
upload-class="bg-body"
|
||||||
<el-form-item label="图片名称">
|
exclude-domain
|
||||||
<el-input v-model="item.name" placeholder="请输入名称" />
|
/>
|
||||||
</el-form-item>
|
<div class="ml-3 flex-1">
|
||||||
<el-form-item class="mt-[18px]" label="图片链接">
|
<el-form-item label="图片名称">
|
||||||
<link-picker v-model="item.link" />
|
<el-input
|
||||||
</el-form-item>
|
v-model="item.name"
|
||||||
</div>
|
placeholder="请输入名称"
|
||||||
</div>
|
/>
|
||||||
</del-wrap>
|
</el-form-item>
|
||||||
|
<el-form-item class="mt-[18px]" label="图片链接">
|
||||||
|
<link-picker v-model="item.link" />
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</del-wrap>
|
||||||
|
</template>
|
||||||
|
</draggable>
|
||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item v-if="content.data?.length < limit">
|
<el-form-item v-if="content.data?.length < limit">
|
||||||
|
|
@ -44,6 +52,7 @@
|
||||||
import feedback from '@/utils/feedback'
|
import feedback from '@/utils/feedback'
|
||||||
import type { PropType } from 'vue'
|
import type { PropType } from 'vue'
|
||||||
import type options from './options'
|
import type options from './options'
|
||||||
|
import Draggable from 'vuedraggable'
|
||||||
const limit = 5
|
const limit = 5
|
||||||
type OptionsType = ReturnType<typeof options>
|
type OptionsType = ReturnType<typeof options>
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue