fix: #171

Author: ly525

front-end/h5/src/components/core/editor/shortcuts-panel/shortcut-button.js

@@ -11,27 +11,33 @@ export default {
     },
     clickFn: {
       required: false,
-      type: Function
+      type: Function,
+      default: () => {}
+    },
+    mousedownFn: {
+      required: false,
+      type: Function,
+      default: () => {}
     },
     disabled: {
       type: Boolean,
       default: false
     }
   },
   render: (h, { props, listeners, slots }) => {
-    const onClick = props.clickFn || function () {}
     return (
-      <a-button
+      <button
         class="shortcut-button"
-        onClick={onClick}
+        onClick={props.clickFn}
+        onMousedown={props.mousedownFn}
         disabled={props.disabled}
       >
         <i
           class={['shortcut-icon', 'fa', `fa-${props.faIcon}`]}
           aria-hidden='true'
         />
         <span>{ props.title }</span>
-      </a-button>
+      </button>
     )
   }
 }

front-end/h5/src/components/core/styles/shortcut-btn.scss

@@ -11,7 +11,10 @@
   background-color: #f5f8fb !important;
   color: #393e46 !important;
 
-  transition: all .25s;
+  // !#zh: 移除动画，防止因为动画导致的拖拽延迟
+  // !#en: remove animation to prevent moving delay
+  // transition: all .25s;
+  // transition: none !important;
   cursor: pointer;
 
   &:disabled {
@@ -20,4 +23,12 @@
   .shortcut-icon {
     padding: 4px;
   }
+
+  // !#zh: learn from ant-design-vue button style which prevent show the select area
+  // !#en: 从 ant-design-vue 借鉴而来，防止从组件列表拖拽元素至画布过程中，出现用户选中文字内容效果
+  user-select: none;
+  span {
+    pointer-events: none;
+  }
 }
+