Merge pull request #22 from leefinder/feature/draggable-by-drag-mode

feat: dragMode icon/full
Liberty-liu · Aug 14, 2023 · d2e8c85 · d2e8c85
2 parents 2f74026 + 0fea7c3
commit d2e8c85
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 5 deletions.
diff --git a/packages/formEditor/components/Layout/DragGable.jsx b/packages/formEditor/components/Layout/DragGable.jsx
@@ -200,7 +200,7 @@ export default defineComponent({
       return (
         <dragGableWrap
           list={props.data}
-          handle=".handle"
+          handle=".ER-handle"
           class={[ns.b(), unref(isEditModel) && ns.e('edit')]}
           tag={props.tag}
           item-key="id"

diff --git a/packages/formEditor/components/Selection/selectElement.jsx b/packages/formEditor/components/Selection/selectElement.jsx
@@ -277,6 +277,7 @@ export default {
           {...useAttrs()}
           class={[
             ns.b(),
+            unref(isEditModel) && ER.props.dragMode === 'full' && props.hasDrag && 'ER-handle',
             !isField && ns.e('borderless'),
             unref(isEditModel) && ns.e('editor'),
             unref(isEditModel) && Selected.value,
@@ -287,14 +288,15 @@ export default {
           ref={elementRef} onClick={unref(isEditModel) && withModifiers(handleClick, ['stop'])}
         >
           {slots.default()}
-          <span></span>
-           {
+          {!isPc.value && (<span></span>)}
+          {
+            ER.props.dragMode === 'icon' &&
             unref(isEditModel) && (
               <div class={[ns.e('topLeft')]}>
-                {props.hasDrag && (<Icon class={['handle', ns.e('dragIcon')]} icon="Rank"></Icon>)}
+                {props.hasDrag && (<Icon class={['ER-handle', ns.e('dragIcon')]} icon="Rank"></Icon>)}
               </div>
             )
-           }
+          }
           {
             unref(isEditModel) && (
               <div class={[ns.e('bottomRight')]}>

diff --git a/packages/formEditor/index.vue b/packages/formEditor/index.vue
@@ -46,6 +46,11 @@ const props = defineProps(_.merge({
   isShowI18n: {
     type: Boolean,
     default: true
+  },
+  dragMode: {
+    type: String,
+    default: 'icon',
+    validator: (value) => ['full', 'icon'].includes(value)
   }
 }, defaultProps))
 const layout = {

diff --git a/packages/theme/formEditor/Main.scss b/packages/theme/formEditor/Main.scss
@@ -142,3 +142,6 @@
     top: 0;
   }
 }
+.ER-handle {
+  cursor: move;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -142,3 +142,6 @@ @@
         top: 0;
       }
     }
+    .ER-handle {
+      cursor: move;
+    }