smart-flow/yudao-ui-admin-vben
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：【ele】【mall】将 draggable 迁移到 mall/promotion/components 中，聚焦一点

Browse Source
This commit is contained in:
YunaiV
2025-10-25 16:31:59 +08:00
parent 1af1a9b2d4
commit ae345d6fb2
11 changed files with 28 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web-ele/src/components/diy-editor/components/mobile/Carousel/property.vue
View File

@@ -17,7 +17,7 @@ import {
} from 'element-plus'; } from 'element-plus';
import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue'; import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
import Draggable from '#/components/draggable/index.vue'; import { Draggable } from '#/views/mall/promotion/components';
import UploadFile from '#/components/upload/file-upload.vue'; import UploadFile from '#/components/upload/file-upload.vue';
import UploadImg from '#/components/upload/image-upload.vue'; import UploadImg from '#/components/upload/image-upload.vue';
import { AppLinkInput } from '#/views/mall/promotion/components'; import { AppLinkInput } from '#/views/mall/promotion/components';

2
apps/web-ele/src/components/diy-editor/components/mobile/Popover/property.vue
View File

@@ -10,7 +10,7 @@ import {
ElTooltip, ElTooltip,
} from 'element-plus'; } from 'element-plus';
import Draggable from '#/components/draggable/index.vue'; import { Draggable } from '#/views/mall/promotion/components';
import UploadImg from '#/components/upload/image-upload.vue'; import UploadImg from '#/components/upload/image-upload.vue';
import { AppLinkInput } from '#/views/mall/promotion/components'; import { AppLinkInput } from '#/views/mall/promotion/components';

2
apps/web-ele/src/components/diy-editor/components/mobile/floating-action-button/property.vue
View File

@@ -11,7 +11,7 @@ import {
ElSwitch, ElSwitch,
} from 'element-plus'; } from 'element-plus';
import Draggable from '#/components/draggable/index.vue'; import { Draggable } from '#/views/mall/promotion/components';
import UploadImg from '#/components/upload/image-upload.vue'; import UploadImg from '#/components/upload/image-upload.vue';
import { import {
AppLinkInput, AppLinkInput,

2
apps/web-ele/src/components/diy-editor/components/mobile/menu-grid/property.vue
View File

@@ -12,7 +12,7 @@ import {
} from 'element-plus'; } from 'element-plus';
import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue'; import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
import Draggable from '#/components/draggable/index.vue'; import { Draggable } from '#/views/mall/promotion/components';
import UploadImg from '#/components/upload/image-upload.vue'; import UploadImg from '#/components/upload/image-upload.vue';
import { AppLinkInput } from '#/views/mall/promotion/components'; import { AppLinkInput } from '#/views/mall/promotion/components';

2
apps/web-ele/src/components/diy-editor/components/mobile/menu-list/property.vue
View File

@@ -5,7 +5,7 @@ import { useVModel } from '@vueuse/core';
import { ElForm, ElFormItem, ElText } from 'element-plus'; import { ElForm, ElFormItem, ElText } from 'element-plus';
import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue'; import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
import Draggable from '#/components/draggable/index.vue'; import { Draggable } from '#/views/mall/promotion/components';
import UploadImg from '#/components/upload/image-upload.vue'; import UploadImg from '#/components/upload/image-upload.vue';
import { import {
AppLinkInput, AppLinkInput,

2
apps/web-ele/src/components/diy-editor/components/mobile/menu-swiper/property.vue
View File

@@ -14,7 +14,7 @@ import {
} from 'element-plus'; } from 'element-plus';
import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue'; import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
import Draggable from '#/components/draggable/index.vue'; import { Draggable } from '#/views/mall/promotion/components';
import UploadImg from '#/components/upload/image-upload.vue'; import UploadImg from '#/components/upload/image-upload.vue';
import { import {
AppLinkInput, AppLinkInput,

2
apps/web-ele/src/components/diy-editor/components/mobile/notice-bar/property.vue
View File

@@ -5,7 +5,7 @@ import { useVModel } from '@vueuse/core';
import { ElCard, ElForm, ElFormItem, ElInput } from 'element-plus'; import { ElCard, ElForm, ElFormItem, ElInput } from 'element-plus';
import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue'; import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
import Draggable from '#/components/draggable/index.vue'; import { Draggable } from '#/views/mall/promotion/components';
import UploadImg from '#/components/upload/image-upload.vue'; import UploadImg from '#/components/upload/image-upload.vue';
import { AppLinkInput, ColorInput } from '#/views/mall/promotion/components'; import { AppLinkInput, ColorInput } from '#/views/mall/promotion/components';

2
apps/web-ele/src/components/diy-editor/components/mobile/search-bar/property.vue
View File

@@ -19,7 +19,7 @@ import {
} from 'element-plus'; } from 'element-plus';
import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue'; import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
import Draggable from '#/components/draggable/index.vue'; import { Draggable } from '#/views/mall/promotion/components';
/** 搜索框属性面板 */ /** 搜索框属性面板 */
defineOptions({ name: 'SearchProperty' }); defineOptions({ name: 'SearchProperty' });

2
apps/web-ele/src/components/diy-editor/components/mobile/tab-bar/property.vue
View File

@@ -15,7 +15,7 @@ import {
ElText, ElText,
} from 'element-plus'; } from 'element-plus';
import Draggable from '#/components/draggable/index.vue'; import { Draggable } from '#/views/mall/promotion/components';
import UploadImg from '#/components/upload/image-upload.vue'; import UploadImg from '#/components/upload/image-upload.vue';
import { AppLinkInput, ColorInput } from '#/views/mall/promotion/components'; import { AppLinkInput, ColorInput } from '#/views/mall/promotion/components';

34
apps/web-ele/src/components/draggable/index.vue → apps/web-ele/src/views/mall/promotion/components/draggable/index.vue
View File

@@ -5,43 +5,44 @@ import { IconifyIcon } from '@vben/icons';
import { cloneDeep } from '@vben/utils'; import { cloneDeep } from '@vben/utils';
import { useVModel } from '@vueuse/core'; import { useVModel } from '@vueuse/core';
// 拖拽组件
import VueDraggable from 'vuedraggable'; import VueDraggable from 'vuedraggable';
// 拖拽组件封装 /** 拖拽组件封装 */
defineOptions({ name: 'Draggable' }); defineOptions({ name: 'Draggable' });
// 定义属性 /** 定义属性 */
const props = defineProps({ const props = defineProps({
// 绑定值
modelValue: { modelValue: {
type: Array, type: Array,
default: () => [], default: () => [],
}, }, // 绑定值
// 空的元素：点击添加按钮时，创建元素并添加到列表；默认为空对象
emptyItem: { emptyItem: {
type: Object, type: Object,
default: () => ({}), default: () => ({}),
}, }, // 空的元素：点击添加按钮时，创建元素并添加到列表；默认为空对象
// 数量限制：默认为0，表示不限制
limit: { limit: {
type: Number, type: Number,
default: Number.MAX_VALUE, default: Number.MAX_VALUE,
}, }, // 数量限制：默认为 0，表示不限制
// 最小数量：默认为1
min: { min: {
type: Number, type: Number,
default: 1, default: 1,
}, }, // 最小数量：默认为1
}); });
// 定义事件
const emit = defineEmits(['update:modelValue']); const emit = defineEmits(['update:modelValue']);
const formData = useVModel(props, 'modelValue', emit); const formData = useVModel(props, 'modelValue', emit);
// 处理添加 /** 处理添加 */
const handleAdd = () => formData.value.push(cloneDeep(props.emptyItem || {})); function handleAdd() {
// 处理删除 return formData.value.push(cloneDeep(props.emptyItem || {}));
const handleDelete = (index: number) => formData.value.splice(index, 1); }
/** 处理删除 */
const handleDelete = function (index: number) {
return formData.value.splice(index, 1);
};
</script> </script>
<template> <template>
@@ -57,6 +58,7 @@ const handleDelete = (index: number) => formData.value.splice(index, 1);
<template #item="{ element, index }"> <template #item="{ element, index }">
<div class="mb-1 flex flex-col gap-1 rounded border border-gray-200 p-2"> <div class="mb-1 flex flex-col gap-1 rounded border border-gray-200 p-2">
<!-- 操作按钮区 --> <!-- 操作按钮区 -->
<!-- TODO @AI：是不是用错了？看看项目里，有没替代的 -->
<div <div
class="-m-2 mb-1 flex flex-row items-center justify-between p-2" class="-m-2 mb-1 flex flex-row items-center justify-between p-2"
style="background-color: var(--app-content-bg-color)" style="background-color: var(--app-content-bg-color)"

1
apps/web-ele/src/views/mall/promotion/components/index.ts
View File

@@ -1,5 +1,6 @@
export { default as AppLinkInput } from './app-link-input/index.vue'; export { default as AppLinkInput } from './app-link-input/index.vue';
export { default as ColorInput } from './color-input/index.vue'; export { default as ColorInput } from './color-input/index.vue';
export { default as Draggable } from './draggable/index.vue';
export { default as InputWithColor } from './input-with-color/index.vue'; export { default as InputWithColor } from './input-with-color/index.vue';
export { default as MagicCubeEditor } from './magic-cube-editor/index.vue'; export { default as MagicCubeEditor } from './magic-cube-editor/index.vue';
export { default as VerticalButtonGroup } from './vertical-button-group/index.vue'; export { default as VerticalButtonGroup } from './vertical-button-group/index.vue';