Commit 1c3d39f7434de3613f2f0d277f6152ab95836dbc
1 parent
6f665b8d
fix: #171
Showing
2 changed files
with
23 additions
and
6 deletions
front-end/h5/src/components/core/editor/shortcuts-panel/shortcut-button.js
| @@ -11,7 +11,13 @@ export default { | @@ -11,7 +11,13 @@ export default { | ||
| 11 | }, | 11 | }, |
| 12 | clickFn: { | 12 | clickFn: { |
| 13 | required: false, | 13 | required: false, |
| 14 | - type: Function | 14 | + type: Function, |
| 15 | + default: () => {} | ||
| 16 | + }, | ||
| 17 | + mousedownFn: { | ||
| 18 | + required: false, | ||
| 19 | + type: Function, | ||
| 20 | + default: () => {} | ||
| 15 | }, | 21 | }, |
| 16 | disabled: { | 22 | disabled: { |
| 17 | type: Boolean, | 23 | type: Boolean, |
| @@ -19,11 +25,11 @@ export default { | @@ -19,11 +25,11 @@ export default { | ||
| 19 | } | 25 | } |
| 20 | }, | 26 | }, |
| 21 | render: (h, { props, listeners, slots }) => { | 27 | render: (h, { props, listeners, slots }) => { |
| 22 | - const onClick = props.clickFn || function () {} | ||
| 23 | return ( | 28 | return ( |
| 24 | - <a-button | 29 | + <button |
| 25 | class="shortcut-button" | 30 | class="shortcut-button" |
| 26 | - onClick={onClick} | 31 | + onClick={props.clickFn} |
| 32 | + onMousedown={props.mousedownFn} | ||
| 27 | disabled={props.disabled} | 33 | disabled={props.disabled} |
| 28 | > | 34 | > |
| 29 | <i | 35 | <i |
| @@ -31,7 +37,7 @@ export default { | @@ -31,7 +37,7 @@ export default { | ||
| 31 | aria-hidden='true' | 37 | aria-hidden='true' |
| 32 | /> | 38 | /> |
| 33 | <span>{ props.title }</span> | 39 | <span>{ props.title }</span> |
| 34 | - </a-button> | 40 | + </button> |
| 35 | ) | 41 | ) |
| 36 | } | 42 | } |
| 37 | } | 43 | } |
front-end/h5/src/components/core/styles/shortcut-btn.scss
| @@ -11,7 +11,10 @@ | @@ -11,7 +11,10 @@ | ||
| 11 | background-color: #f5f8fb !important; | 11 | background-color: #f5f8fb !important; |
| 12 | color: #393e46 !important; | 12 | color: #393e46 !important; |
| 13 | 13 | ||
| 14 | - transition: all .25s; | 14 | + // !#zh: 移除动画，防止因为动画导致的拖拽延迟 |
| 15 | + // !#en: remove animation to prevent moving delay | ||
| 16 | + // transition: all .25s; | ||
| 17 | + // transition: none !important; | ||
| 15 | cursor: pointer; | 18 | cursor: pointer; |
| 16 | 19 | ||
| 17 | &:disabled { | 20 | &:disabled { |
| @@ -20,4 +23,12 @@ | @@ -20,4 +23,12 @@ | ||
| 20 | .shortcut-icon { | 23 | .shortcut-icon { |
| 21 | padding: 4px; | 24 | padding: 4px; |
| 22 | } | 25 | } |
| 26 | + | ||
| 27 | + // !#zh: learn from ant-design-vue button style which prevent show the select area | ||
| 28 | + // !#en: 从 ant-design-vue 借鉴而来，防止从组件列表拖拽元素至画布过程中，出现用户选中文字内容效果 | ||
| 29 | + user-select: none; | ||
| 30 | + span { | ||
| 31 | + pointer-events: none; | ||
| 32 | + } | ||
| 23 | } | 33 | } |
| 34 | + |