Merge branch 'fix_use_uuid_to_get_editing_element' into master

ly525
2 parents 383deb83 f65fa61d
Showing 4 changed files with 21 additions and 4 deletions
front-end/h5/src/components/core/editor/canvas/edit.js
front-end/h5/src/components/core/models/element.js
front-end/h5/src/components/core/plugins/lbp-text.js
front-end/h5/src/utils/element.js
@@ -193,6 +193,7 @@ export default {
                   props: element.getProps()
                 })
               }
+              const isEditingElement = this.editingElement && this.editingElement.uuid === element.uuid
               const data = {
                 style: {
                   width: '100%',
@@ -203,7 +204,8 @@ export default {
                 class: 'element-on-edit-canvas',
                 props: {
                   ...element.getProps(), // #6 #3,
-                  editorMode: 'edit'
+                  editorMode: 'edit',
+                  isEditingElement
                 },
                 // nativeOn: {
                 //   contextmenu: e => {
-import { parsePx } from '@/utils/element.js'
+import { parsePx, guid } from '@/utils/element.js'
  
 // #! 编辑状态，不可以点击的按钮，因为点击按钮会触发一些默认行为，比如表单提交等
 const disabledPluginsForEditMode = ['lbp-form-input', 'lbp-form-button', 'lbp-video']
@@ -19,7 +19,7 @@ const defaultStyle = {
 class Element {
   constructor (ele) {
     this.name = ele.name
-    this.uuid = ele.uuid || +new Date()
+    this.uuid = ele.uuid || guid()
     /**
      * #!zh:
      * 之前版本代码：https://github.com/ly525/luban-h5/blob/a7875cbc73c0d18bc2459985ca3ce1d4dc44f141/front-end/h5/src/components/core/models/element.js#L21
@@ -22,7 +22,7 @@ export default {
     clickOutside: vClickOutside.directive
   },
   render (h) {
-    const canEdit = this.canEdit && this.editorMode === 'edit'
+    const canEdit = this.canEdit && this.editorMode === 'edit' && this.isEditingElement
     const style = {
       position: 'relative',
       color: `${this.color} !important`,
@@ -109,6 +109,11 @@ export default {
       defaultValue: 'preview', // 可选值: preview/edit
       label: '模式',
       visible: false
+    }),
+    isEditingElement: PropTypes.boolean({
+      defaultValue: false, // 可选值: preview/edit
+      label: '是否当前元素',
+      visible: false
     })
   },
   editorConfig: {
@@ -71,3 +71,13 @@ export const genUUID = () =&gt; {
   // http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript
   return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
 }
+
+// Generate four random hex digits.
+function S4 () {
+  return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
+}
+
+// Generate a pseudo-GUID by concatenating random hexadecimal.
+export function guid () {
+  return (S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4())
+}