编辑器-基础-自定义按钮 初步开发（搞清楚需求和设计再详细开发）

src/components/pulldownMenuInEditor.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="pull-down-menu-in-editor">
+    <button class="menu-cover" @click="isExpand = !isExpand">
+      {{placeholder ? placeholder : valueList[currentIdx]}}
+      <i class="iconfont icon-edit_input_arrow"></i>
+    </button>
+    <div class="menu" v-show="isExpand">
+      <button v-for="(value, index) of valueList" :key="index"
+        @click="onSelect(index)"
+      >
+        {{value}}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    valueList: {
+      type: Array,
+      default: function() {
+        return [
+        '111',
+        '222',
+        ]
+      },
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    defaultIdx: {
+      type: Number,
+      default: 0,
+    }
+  },
+  data() {
+    return {
+      currentIdx: this.defaultIdx,
+      isExpand: false,
+    }
+  },
+  methods: {
+    onSelect(index) {
+      this.currentIdx = index
+      this.isExpand = false
+      this.$emit('change', this.valueList[this.currentIdx])
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  button {
+    background: #252526;
+    border: 1px solid #404040;
+    height: 36px;
+    color: #fff;
+    width: 100%;
+  }
+.pull-down-menu-in-editor {
+  width: 140px;
+  position: relative;
+  > button.menu-cover {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px;
+    cursor: pointer;
+    > .icon-edit_input_arrow {
+      color: rgba(255, 255, 255, 0.3);
+      border-radius: 2px;
+    }
+  }
+  > .menu {
+    position: absolute;
+    width: 100%;
+    > button {
+      display: block;
+      border-top: none;
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/views/base/Toolbar.vue

@@ -66,6 +66,7 @@
         <BackgroundMusicSettings v-show="activeTab === '背景音乐'"></BackgroundMusicSettings>
         <CustomLogoSettings v-show="activeTab === '自定义LOGO'"></CustomLogoSettings>
         <CustomMaskSettings v-show="activeTab === '自定义遮罩'"></CustomMaskSettings>
+        <CustomButtonSettings v-show="activeTab === '自定义按钮'"></CustomButtonSettings>
       </div>
     </div>
 
@@ -111,6 +112,7 @@ import AutoCruiseSettings from '@/views/base/autoCruiseSettings.vue'
 import BackgroundMusicSettings from "@/views/base/backgroundMusicSettings.vue";
 import CustomLogoSettings from "@/views/base/customLogoSettings.vue";
 import CustomMaskSettings from "@/views/base/customMaskSettings.vue";
+import CustomButtonSettings from "@/views/base/customButtonSettings.vue";
 import Table from "@/components/tableSelect";
 import Table2 from "@/components/tableSelect2";
 import Select from "@/components/select";
@@ -130,6 +132,7 @@ export default {
     BackgroundMusicSettings,
     CustomLogoSettings,
     CustomMaskSettings,
+    CustomButtonSettings,
   },
   data() {
     return {

src/views/base/customButtonSettings.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="custom-button-settings">
+    <span class="title">自定义按钮</span>
+    <i class="iconfont icon-material_prompt tool-tip-for-editor" v-tool-tip-wrapper>
+      <TooltipInEditor
+        :text="'？？？？？？？？？？？？？？？？'"
+        :framePosLeft="'30px'"
+        :arrowPosLeft="'calc(50% - 24px)'"
+      ></TooltipInEditor>
+    </i>
+    <br/>
+    
+    <div class="button-setting-item" :class="{expand: isFirstSettingItemExpand}">
+      <div class="title-bar"
+        @click="isFirstSettingItemExpand = !isFirstSettingItemExpand"
+      >
+        <div class="left">
+          <i class="iconfont icon-edit_input_arrow icon-expand"></i>
+          <img :src="require('@/assets/images/icons/phone.png')" class="button-icon" alt="">
+          <span class="button-name">公司电话</span>
+        </div>
+        <div class="right">
+          <i class="iconfont icon-editor_list_edit"></i>
+          <img class="eye-on" :src="require('@/assets/images/icons/eye_on.png')" alt="">
+          <img class="eye-off" :src="require('@/assets/images/icons/eye_off.png')" alt="">
+        </div>
+      </div>
+      <div class="edit-content">
+        <div class="edit-content-item">
+          <span class="item-name">按钮名称</span>
+          <PulldownMenuInEditor class="selector"></PulldownMenuInEditor>
+          <input class="name-input" placeholder="请输入按钮名称">
+        </div>
+        <div class="edit-content-item">
+          <span class="item-name">电话号码</span>
+          <input class="value-input" placeholder="请输入电话号码">
+        </div>
+      </div>
+    </div>
+
+    <div class="button-setting-item" :class="{expand: isSecondSettingItemExpand}">
+      <div
+        class="title-bar"
+        @click="isSecondSettingItemExpand = !isSecondSettingItemExpand"
+      >
+        <div class="left">
+          <i class="iconfont icon-edit_input_arrow icon-expand"></i>
+          <img :src="require('@/assets/images/icons/link.png')" class="button-icon" alt="">
+          <span class="button-name">链接</span>
+        </div>
+        <div class="right">
+          <i class="iconfont icon-editor_list_edit"></i>
+          <img class="eye-on" :src="require('@/assets/images/icons/eye_on.png')" alt="">
+          <img class="eye-off" :src="require('@/assets/images/icons/eye_off.png')" alt="">
+        </div>
+      </div>
+      <div class="edit-content">
+        <div class="edit-content-item">
+          <span class="item-name" placeholder="请输入按钮名称">按钮名称</span>
+          <PulldownMenuInEditor class="selector"></PulldownMenuInEditor>
+          <input class="name-input">
+        </div>
+        <div class="edit-content-item">
+          <span class="item-name">电话号码</span>
+          <input class="value-input" placeholder="请输入电话号码">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import TooltipInEditor from '@/components/TooltipInEditor.vue'
+import PulldownMenuInEditor from "@/components/pulldownMenuInEditor.vue";
+
+export default {
+  components: {
+    TooltipInEditor,
+    PulldownMenuInEditor,
+  },
+  data() {
+    return {
+      isFirstSettingItemExpand: false,
+      isSecondSettingItemExpand: false,
+    }
+  },
+  computed: {
+    ...mapGetters({
+      info:'info'
+    })
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.custom-button-settings {
+  padding: 24px 30px;
+  background: #252526;
+  height: 546px;
+  .title {
+    font-size: 18px;
+    color: #FFFFFF;
+  }
+  .tool-tip-for-editor {
+    margin-left: 4px;
+    font-size: 12px;
+    cursor: default;
+    position: relative;
+    top: -2px;
+  }
+  > .button-setting-item {
+    margin-top: 16px;
+    position: relative;
+    min-height: 50px;
+    > .title-bar {
+      position: absolute;
+      width: 100%;
+      height: 50px;
+      background: #1A1B1D;
+      border-radius: 2px;
+      border: 1px solid #404040;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 16px;
+      > .left {
+        display: flex;
+        align-items: center;
+        > .icon-expand {
+          font-size: 10px;
+          color: rgba(255, 255, 255, 0.6);
+          transform: rotate(-90deg);
+        }
+        > .button-icon {
+          width: 36px;
+          height: 36px;
+        }
+        > .button-name {
+          font-size: 16px;
+          color: #fff;
+        }
+      }
+      > .right {
+        display: flex;
+        align-items: center;
+        > i {
+          margin-left: 16px;
+        }
+        > .eye-on {
+          display: none;
+          margin-left: 16px;
+        }
+        > .eye-off {
+          display: inline-block;
+          margin-left: 16px;
+        }
+      }
+    }
+    > .edit-content {
+      border-radius: 2px;
+      border: 1px solid #404040;
+      padding-top: 58px;
+      padding-bottom: 26px;
+      display: none;
+      > .edit-content-item {
+        margin-top: 16px;
+        display: flex;
+        align-items: center;
+        > .item-name {
+          margin-left: 16px;
+          font-size: 14px;
+          color: rgba(255, 255, 255, 0.5)
+        }
+        > .selector {
+          margin-left: 16px;
+        }
+        > .name-input {
+          height: 36px;
+          background: #1A1B1D;
+          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: #1A1B1D;
+          border-radius: 2px;
+          border: 1px solid #404040;
+          color: #fff;
+          font-size: 14px;
+          padding: 0 16px;
+          letter-spacing: 1px;
+          width: 610px;
+          &:focus {
+            border-color: #0076F6;
+          }
+        }
+      }
+    }
+  }
+  > .button-setting-item.expand {
+    > .title-bar {
+      > .left {
+        > .icon-expand {
+          transform: rotate(0deg);
+        }
+        > .button-icon {
+        }
+        > .button-name {
+        }
+      }
+      > .right {
+        > .eye-on {
+          display: inline-block;
+        }
+        > .eye-off {
+          display: none;
+        }
+      }
+    }
+    > .edit-content {
+      display: block;
+    }
+  }
+}
+</style>