编辑器-基础-自定义按钮 需求变更后重新实现

src/components/pulldownMenuInEditor.vue

@@ -1,14 +1,14 @@
 <template>
-  <div class="pull-down-menu-in-editor">
+  <div class="pull-down-menu-in-editor" v-clickoutside="onClickOutside">
     <button class="menu-cover" @click="isExpand = !isExpand">
-      {{placeholder ? placeholder : valueList[value]}}
-      <i class="iconfont icon-edit_input_arrow"></i>
+      {{placeholder ? placeholder : value}}
+      <i class="iconfont icon-material_preview_upload_collect" :class="{flip: isExpand}"></i>
     </button>
     <div class="menu" v-show="isExpand">
-      <button v-for="(value, index) of valueList" :key="index"
-        @click="onSelect(index)"
+      <button v-for="(item, index) of valueList" :key="index"
+        @click="onSelect(item)"
       >
-        {{value}}
+        {{item}}
       </button>
     </div>
   </div>
@@ -31,8 +31,8 @@ export default {
       default: '',
     },
     value: {
-      type: Number,
-      default: 0,
+      type: String,
+      required: true,
     }
   },
   data() {
@@ -41,9 +41,14 @@ export default {
     }
   },
   methods: {
-    onSelect(index) {
+    onClickOutside() {
+      if (this.isExpand) {
+        this.isExpand = false
+      }
+    },
+    onSelect(item) {
       this.isExpand = false
-      this.$emit('input', index)
+      this.$emit('input', item)
     }
   }
 }
@@ -66,9 +71,13 @@ export default {
     align-items: center;
     padding: 16px;
     cursor: pointer;
-    > .icon-edit_input_arrow {
-      color: rgba(255, 255, 255, 0.3);
+    > .icon-material_preview_upload_collect {
+      font-size: 11px;
+      color: rgba(255, 255, 255, 0.6);
       border-radius: 2px;
+      &.flip {
+        transform: translateY(-2px) rotate(180deg);
+      }
     }
   }
   > .menu {

src/components/shared/popup/index.vue

@@ -9,7 +9,7 @@ export default {
     name: "v-popup-layer",
     props: {
         isPass: Boolean,
-        canClose:Boolean,
+        canClose: Boolean,
         bgColor: String,
         zIdx: String,
     },

src/framework/show/popup/index.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import Popup from "@/components/shared/popup";
+import Popup from "@/components/shared/popup/index.vue";
 
 export default {
   props:['show','title'],

src/views/base/customButtonSettings.vue

@@ -2,7 +2,6 @@
   <div class="custom-button-settings">
     <span class="title">自定义按钮</span>
 
-    <!-- <iframe src="https://www.4dkankan.com/#/" frameborder="0" width="1280" height="960" style="transform: scale(10%); transform-origin: top left"></iframe> -->
 
     <i class="iconfont icon-material_prompt tool-tip-for-editor" v-tool-tip-wrapper>
       <TooltipInEditor
@@ -11,23 +10,23 @@
     </i>
     <br/>
     
-    <div class="button-setting-item" :class="{expand: isFirstSettingItemExpand}">
+    <div v-for="(item, index) of info.customButton" :key="index" class="button-setting-item" :class="{expand: expandStatus[index]}">
       <div class="title-bar">
         <div class="left">
           <i
             class="iconfont icon-edit_input_arrow icon-expand"
-            @click="isFirstSettingItemExpand = !isFirstSettingItemExpand"
+            @click="onRequestForChangeExpandStatus(index)"
           ></i>
-          <img v-if="info.customButton.button1.type === '电话'" :src="require('@/assets/images/icons/phone.png')" class="button-icon" alt="">
-          <img v-if="info.customButton.button1.type === '链接'" :src="require('@/assets/images/icons/link.png')" class="button-icon" alt="">
+          <img v-if="info.customButton[index].type === '电话'" :src="require('@/assets/images/icons/phone.png')" class="button-icon" alt="">
+          <img v-if="info.customButton[index].type === '链接'" :src="require('@/assets/images/icons/link.png')" class="button-icon" alt="">
           <span class="button-name">
-            {{info.customButton.button1.name}}
+            {{info.customButton[index].name}}
           </span>
         </div>
         <div class="right">
           <i
             class="iconfont icon-editor_list_edit btn-edit"
-            @click="isFirstSettingItemExpand = !isFirstSettingItemExpand"
+            @click="onRequestForEdit(index)"
             v-tool-tip-wrapper
           >
             <TooltipInEditor
@@ -36,12 +35,12 @@
           </i>
           <div
             class="btn-show"
-            v-show="info.customButton.button1.isShow"
+            v-show="info.customButton[index].value && info.customButton[index].isShow"
             v-tool-tip-wrapper
           >
             <img
               class="eye-on" :src="require('@/assets/images/icons/eye_on.png')" alt=""
-              @click="info.customButton.button1.isShow = !info.customButton.button1.isShow"
+              @click="info.customButton[index].isShow = !info.customButton[index].isShow"
             >
             <TooltipInEditor
               :text="'显示'"
@@ -49,12 +48,12 @@
           </div>
           <div
             class="btn-hide"
-            v-show="!info.customButton.button1.isShow"
+            v-show="info.customButton[index].value && !info.customButton[index].isShow"
             v-tool-tip-wrapper
           >
             <img
               class="eye-off" :src="require('@/assets/images/icons/eye_off.png')" alt=""
-              @click="info.customButton.button1.isShow = !info.customButton.button1.isShow"
+              @click="info.customButton[index].isShow = !info.customButton[index].isShow"
             >
             <TooltipInEditor
               :text="'隐藏'"
@@ -68,114 +67,73 @@
           <PulldownMenuInEditor
             class="selector"
             :valueList="buttonTypeList"
-            v-model="button1TypeIdx"
+            v-model="info.customButton[index].type"
           ></PulldownMenuInEditor>
           <input
             class="name-input"
             placeholder="请输入按钮名称"
-            v-model="info.customButton.button1.name"
+            v-model="info.customButton[index].name"
             maxlength="15"
-            @blur="checkButtonName(info.customButton.button1.name)"
           >
         </div>
         <div class="edit-content-item">
-          <span class="item-name">{{button1ValueTip}}</span>
+          <span class="item-name">{{buttonValueTips[index]}}</span>
           <input
             class="value-input"
-            :placeholder="`请输入${button1ValueTip}`"
-            v-model="info.customButton.button1.value"
-            @blur="checkButtonValue(info.customButton.button1.value, info.customButton.button1.type)"
+            :placeholder="`请输入${buttonValueTips[index]}`"
+            v-model="info.customButton[index].value"
           >
         </div>
-        <iframe v-if="info.customButton.button1.type === '链接'" :src="info.customButton.button1.value" frameborder="0"
-          width="1920" height="930"
-        ></iframe>
       </div>
     </div>
 
-    <div class="button-setting-item" :class="{expand: isSecondSettingItemExpand}">
-      <div
-        class="title-bar"
-      >
-        <div class="left">
-          <i
-            class="iconfont icon-edit_input_arrow icon-expand"
-            @click="isSecondSettingItemExpand = !isSecondSettingItemExpand"
-          ></i>
-          <img v-if="info.customButton.button2.type === '电话'" :src="require('@/assets/images/icons/phone.png')" class="button-icon" alt="">
-          <img v-if="info.customButton.button2.type === '链接'" :src="require('@/assets/images/icons/link.png')" class="button-icon" alt="">
-          <span class="button-name">
-            {{info.customButton.button2.name}}
+    <popup v-if="isEditing" :canClose="false">
+      <div class="ui-message ui-message-confirm dark edit-window">
+        <div class="ui-message-header">
+          <span>自定义按钮</span>
+          <span @click="isEditing = false">
+            <i class="iconfont icon_close"></i>
           </span>
         </div>
-        <div class="right">
-          <i
-            class="iconfont icon-editor_list_edit btn-edit"
-            @click="isSecondSettingItemExpand = !isSecondSettingItemExpand"
-            v-tool-tip-wrapper
-          >
-            <TooltipInEditor
-              :text="'编辑'"
-            />
-          </i>
-          <div
-            class="btn-show"
-            v-show="info.customButton.button2.isShow"
-              v-tool-tip-wrapper
-          >
-            <img
-              class="eye-on" :src="require('@/assets/images/icons/eye_on.png')" alt=""
-              @click="info.customButton.button2.isShow = !info.customButton.button2.isShow"
+
+        <div class="ui-message-main">
+          <div class="edit-content-item">
+            <span class="item-name">按钮名称</span>
+            <PulldownMenuInEditor
+              class="selector"
+              :valueList="buttonTypeList"
+              v-model="editingInfo.type"
+            ></PulldownMenuInEditor>
+            <input
+              class="name-input"
+              placeholder="请输入按钮名称"
+              v-model="editingInfo.name"
+              maxlength="15"
             >
-            <TooltipInEditor
-              :text="'显示'"
-            />
           </div>
-          <div
-            v-show="!info.customButton.button2.isShow"
-            v-tool-tip-wrapper
-            class="btn-hide"
-          >
-            <img
-              class="eye-off" :src="require('@/assets/images/icons/eye_off.png')" alt=""
-              @click="info.customButton.button2.isShow = !info.customButton.button2.isShow"
+          <div class="edit-content-item">
+            <span class="item-name">{{editingButtonValueTip}}</span>
+            <input
+              class="value-input"
+              :placeholder="`请输入${editingButtonValueTip}`"
+              v-model="editingInfo.value"
             >
-            <TooltipInEditor
-              :text="'隐藏'"
-            />
           </div>
         </div>
-      </div>
-      <div class="edit-content">
-        <div class="edit-content-item">
-          <span class="item-name">按钮名称</span>
-          <PulldownMenuInEditor
-            class="selector"
-            :valueList="buttonTypeList"
-            v-model="button2TypeIdx"
-          ></PulldownMenuInEditor>
-          <input
-            class="name-input"
-            placeholder="请输入按钮名称"
-            v-model="info.customButton.button2.name"
-            maxlength="15"
-            @blur="checkButtonName(info.customButton.button2.name)"
-          >
-        </div>
-        <div class="edit-content-item">
-          <span class="item-name">{{button2ValueTip}}</span>
-          <input
-            class="value-input"
-            :placeholder="`请输入${button2ValueTip}`"
-            v-model="info.customButton.button2.value"
-            @blur="checkButtonValue(info.customButton.button2.value, info.customButton.button2.type)"
+
+        <div class="ui-message-footer">
+          <button class="ui-button deepcancel" @click="isEditing = false">
+            取消
+          </button>
+          <button
+            class="ui-button submit"
+            @click="onConfirmEditing"
           >
+            确定
+          </button>
         </div>
-        <iframe v-if="info.customButton.button2.type === '链接'" :src="info.customButton.button2.value" frameborder="0"
-          width="1920" height="930"
-        ></iframe>
       </div>
-    </div>
+    </popup>
   </div>
 </template>
 
@@ -184,41 +142,54 @@ import { mapGetters } from "vuex";
 import TooltipInEditor from '@/components/TooltipInEditor.vue'
 import PulldownMenuInEditor from "@/components/pulldownMenuInEditor.vue";
 import { isValidPhoneNumber } from "@/utils/other.js";
+import Popup from "@/components/shared/popup/index.vue";
 
 export default {
   components: {
     TooltipInEditor,
     PulldownMenuInEditor,
+    Popup,
   },
   data() {
     return {
-      isFirstSettingItemExpand: false,
-      isSecondSettingItemExpand: false,
+      expandStatus: [],
       buttonTypeList: [
         '电话',
         '链接',
       ],
-      button1TypeIdx: 0,
-      button2TypeIdx: 1,
+      isEditing: false,
+      editingButtonIdx: -1,
+      isIgnoreTypeChangeWhenEditing: false,
+      editingInfo: {
+        type: '',
+        name: '',
+        value: '',
+      }
     }
   },
   computed: {
     ...mapGetters({
       info:'info'
     }),
-    button1ValueTip() {
-      if (this.buttonTypeList[this.button1TypeIdx] === '电话') {
-        return '电话号码'
-      } else if (this.buttonTypeList[this.button1TypeIdx] === '链接') {
-        return '链接地址'
+    buttonValueTips() {
+      if (this?.info?.customButton) {
+        return this.info.customButton.map((item) => {
+          if (item.type === '电话') {
+            return '电话号码'
+          } else if (item.type === '链接') {
+            return '链接地址'
+          } else {
+            return ''
+          }
+        })
       } else {
-        return ''
+        return null
       }
     },
-    button2ValueTip() {
-      if (this.buttonTypeList[this.button2TypeIdx] === '电话') {
+    editingButtonValueTip() {
+      if (this.editingInfo.type === '电话') {
         return '电话号码'
-      } else if (this.buttonTypeList[this.button2TypeIdx] === '链接') {
+      } else if (this.editingInfo.type === '链接') {
         return '链接地址'
       } else {
         return ''
@@ -226,45 +197,61 @@ export default {
     },
   },
   watch: {
-    button1TypeIdx: {
-      handler(vNew, vOld) {
-        this.info.customButton.button1.type = this.buttonTypeList[vNew]
-        // 如果按钮名称使用的是默认名称
-        if (this.info.customButton.button1.name === this.buttonTypeList[vOld]) {
-          // 按钮名称改为新按钮类型对应的默认名称
-          this.info.customButton.button1.name = this.buttonTypeList[vNew]
+    'editingInfo.type': {
+      handler(vNew) {
+        if (!this.isIgnoreTypeChangeWhenEditing) {
+          this.editingInfo.name = vNew
+          this.editingInfo.value = ''
         }
-        this.info.customButton.button1.value = ''
+        this.isIgnoreTypeChangeWhenEditing = false
       }
     },
-    button2TypeIdx: {
-      handler(vNew, vOld) {
-        this.info.customButton.button2.type = this.buttonTypeList[vNew]
-        // 如果按钮名称使用的是默认名称
-        if (this.info.customButton.button2.name === this.buttonTypeList[vOld]) {
-          // 按钮名称改为新按钮类型对应的默认名称
-          this.info.customButton.button2.name = this.buttonTypeList[vNew]
-        }
-        this.info.customButton.button2.value = ''
-      }
-    }
   },
   methods: {
+    onRequestForChangeExpandStatus(index) {
+      this.$set(this.expandStatus, index, !this.expandStatus[index])
+    },
+    onRequestForEdit(index) {
+      this.editingButtonIdx = index
+      this.isIgnoreTypeChangeWhenEditing = true,
+      this.editingInfo.type = this.info.customButton[index].type
+      this.editingInfo.name = this.info.customButton[index].name
+      this.editingInfo.value = this.info.customButton[index].value
+      this.isEditing = true
+    },
     checkButtonName(name) {
       if (!name) {
         this.$msg.warning('请填写完整信息')
+        return false
       }
+      return true
     },
     checkButtonValue(value, type) {
       if (type === '电话') {
         if (!isValidPhoneNumber(value)) {
           this.$msg.warning('请正确填写电话号码')
+          return false
         }
       } else if (type === '链接') {
         if (!value) {
           this.$msg.warning('请填写完整信息')
+          return false
         }
       }
+      return true
+    },
+    onConfirmEditing() {
+      if (!this.checkButtonName(this.editingInfo.name)) {
+        return
+      }
+      if (!this.checkButtonValue(this.editingInfo.value, this.editingInfo.type)) {
+        return
+      }
+      this.info.customButton[this.editingButtonIdx].type = this.editingInfo.type 
+      this.info.customButton[this.editingButtonIdx].name = this.editingInfo.name 
+      this.info.customButton[this.editingButtonIdx].value = this.editingInfo.value 
+      this.$msg.success('操作成功')
+      this.isEditing = false
     }
   }
 }
@@ -354,6 +341,7 @@ export default {
       padding-top: 58px;
       padding-bottom: 26px;
       display: none;
+      pointer-events: none;
       > .edit-content-item {
         margin-top: 16px;
         display: flex;
@@ -368,7 +356,7 @@ export default {
         }
         > .name-input {
           height: 36px;
-          background: #1A1B1D;
+          background: transparent;
           border-radius: 2px;
           border: 1px solid #404040;
           color: #fff;
@@ -383,7 +371,7 @@ export default {
         > .value-input {
           margin-left: 16px;
           height: 36px;
-          background: #1A1B1D;
+          background: transparent;
           border-radius: 2px;
           border: 1px solid #404040;
           color: #fff;
@@ -396,13 +384,6 @@ export default {
           }
         }
       }
-      > iframe {
-        width: 1920;
-        transform-origin: top left;
-        transform: scale(calc(737 / 1920));
-        background: #fff;
-        margin-top: 16px;
-      }
     }
   }
   > .button-setting-item.expand {
@@ -417,5 +398,54 @@ export default {
       display: block;
     }
   }
+
+  .edit-window {
+    width: 574px;
+    > .ui-message-main {
+      margin-bottom: 40px;
+      > .edit-content-item {
+        margin-top: 16px;
+        display: flex;
+        align-items: center;
+        > .item-name {
+          flex: 0 0 auto;
+          font-size: 14px;
+          color: rgba(255, 255, 255, 0.5)
+        }
+        > .selector {
+          margin-left: 16px;
+        }
+        > .name-input {
+          height: 36px;
+          background: #252526;
+          border-radius: 2px;
+          border: 1px solid #404040;
+          color: #fff;
+          font-size: 14px;
+          padding: 0 16px;
+          letter-spacing: 1px;
+          width: 470px;
+          &:focus {
+            border-color: #0076F6;
+          }
+        }
+        > .value-input {
+          margin-left: 16px;
+          height: 36px;
+          background: #252526;
+          border-radius: 2px;
+          border: 1px solid #404040;
+          color: #fff;
+          font-size: 14px;
+          padding: 0 16px;
+          letter-spacing: 1px;
+          width: 610px;
+          &:focus {
+            border-color: #0076F6;
+          }
+        }
+      }
+    }
+  }
 }
 </style>

src/views/base/index.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 编辑器-基础 -->
   <div>
-    <!-- 左侧 -->
+    <!-- 右侧 -->
     <setting></setting>
     <!-- 中间 -->
     <toolbar v-if="info"></toolbar>

src/views/navigation/index.vue

@@ -103,7 +103,7 @@
 <script>
 import InitialSceneSettings from "./initialSceneSettings.vue";
 import GroupSettings from "./groupSettings";
-import Popup from "@/components/shared/popup";
+import Popup from "@/components/shared/popup/index.vue";
 import {
   getSceneList,
   getMaterialList,