编辑器-基础-自定义按钮：样式与代码优化；添加一项：打开方式。

packages/qjkankan-editor/README.md

@@ -81,12 +81,14 @@ npm run build-testprod
       "type": "电话",
       "name": "电话",
       "value": "",
+      "openMethod": "弹出层打开",
       "isShow": false
     },
     {
       "type": "链接",
       "name": "链接",
       "value": "",
+      "openMethod": "弹出层打开",
       "isShow": false
     }
   ],

packages/qjkankan-editor/src/lang/_en.json

@@ -707,6 +707,7 @@
     "show": "Display",
     "button_name": "Button name",
     "button_type":"按钮类型",
+    "button_open_method": "打开方式",
     "button_placeholder": "Please enter the button name",
     "please_input": "Please enter",
     "phone": "Phone",
@@ -747,6 +748,8 @@
   "zh_key": {
     "电话": "Tel",
     "链接": "Link",
+    "弹出层打开": "弹出层打开",
+    "新窗口打开": "新窗口打开",
     "小行星开场": "Start with asteroid",
     "小行星巡游开场": "Start with asteroid cruise",
     "小行星缩放开场": "Start with asteroid zoom",

packages/qjkankan-editor/src/lang/_zh.json

@@ -712,6 +712,7 @@
     "show": "显示",
     "button_name": "按钮名称",
     "button_type":"按钮类型",
+    "button_open_method": "打开方式",
     "button_placeholder": "请输入按钮名称",
     "please_input": "请输入",
     "phone": "电话号码",
@@ -753,6 +754,8 @@
   "zh_key": {
     "电话": "电话",
     "链接": "链接",
+    "弹出层打开": "弹出层打开",
+    "新窗口打开": "新窗口打开",
     "小行星开场": "小行星开场",
     "小行星巡游开场": "小行星巡游开场",
     "小行星缩放开场": "小行星缩放开场",

packages/qjkankan-editor/src/views/base/customButtonSettings copy.vue

@@ -1,497 +0,0 @@
-<template>
-  <div class="custom-button-settings">
-    <span class="title">{{ custom_button }}</span>
-
-
-    <i class="iconfont icon-material_prompt tool-tip-for-editor" v-tooltip="custom_button_tips">
-    </i>
-    <br />
-
-    <div v-for="(item, index) of info.customButton" :key="index" class="button-setting-item"
-      :class="{ expand: expandStatus[index] }">
-      <div class="title-bar" :class="info.customButton[index].isShow ? 'bright' : 'dark'"
-        @click="onRequestForChangeExpandStatus(index)">
-        <div class="left">
-          <i class="iconfont icon-edit_input_arrow icon-expand"></i>
-          <img v-if="info.customButton[index].type === '电话' && info.customButton[index].isShow"
-            :src="require('@/assets/images/icons/phone.svg')" class="button-icon" alt="">
-          <img v-if="info.customButton[index].type === '电话' && !info.customButton[index].isShow"
-            :src="require('@/assets/images/icons/phone-dark.svg')" class="button-icon" alt="">
-          <img v-if="info.customButton[index].type === '链接' && info.customButton[index].isShow"
-            :src="require('@/assets/images/icons/link.svg')" class="button-icon" alt="">
-          <img v-if="info.customButton[index].type === '链接' && !info.customButton[index].isShow"
-            :src="require('@/assets/images/icons/link-dark.svg')" class="button-icon" alt="">
-          <span class="button-name">
-            {{ buttonName[index] }}
-            <!-- {{ info.customButton[index].name  }} -->
-          </span>
-        </div>
-        <div class="right">
-          <i class="iconfont icon-editor_list_edit btn-edit" @click.stop="onRequestForEdit(index)" v-tooltip="edittips">
-          </i>
-          <i v-show="info.customButton[index].isShow" class="iconfont icon-editor_on btn-show" v-tooltip="hidetips"
-            @click.stop="info.customButton[index].isShow = false"></i>
-          <i v-show="!info.customButton[index].isShow" class="iconfont icon-editor_off btn-hide" v-tooltip="showtips"
-            @click.stop="onRequestForShow(index)"></i>
-        </div>
-      </div>
-      <div class="edit-content">
-        <div class="edit-content-item">
-          <span class="item-name">{{ button_name }}</span>
-          <PulldownMenuInEditor class="selector" :valueList="buttonTypeList" v-model="info.customButton[index].type">
-          </PulldownMenuInEditor>
-          <input class="name-input" :placeholder="button_placeholder" v-model="info.customButton[index].name"
-            maxlength="15">
-        </div>
-        <div class="edit-content-item">
-          <span class="item-name">{{ buttonValueTips[index] }}</span>
-          <input class="value-input" v-model="info.customButton[index].value">
-        </div>
-      </div>
-    </div>
-
-    <popup v-if="isEditing" :canClose="false">
-      <div class="ui-message ui-message-confirm dark edit-window">
-        <div class="ui-message-header">
-          <span>{{ custom_button }}</span>
-          <span @click="isEditing = false">
-            <i class="iconfont icon_close"></i>
-          </span>
-        </div>
-
-        <div class="ui-message-main">
-          <div class="edit-content-item">
-            <span class="item-name">{{ button_name }}</span>
-            <PulldownMenuInEditor class="selector" :valueList="buttonTypeList" v-model="editingInfo.type">
-            </PulldownMenuInEditor>
-            <input class="name-input" :placeholder="button_placeholder" v-model="editingInfo.name" maxlength="15">
-          </div>
-          <div class="edit-content-item">
-            <span class="item-name">{{ editingButtonValueTip }}</span>
-            <input class="value-input" :placeholder="`${please_input}${editingButtonValueTip}`"
-              v-model="editingInfo.value">
-          </div>
-        </div>
-
-        <div class="ui-message-footer">
-          <button class="ui-button deepcancel" @click="isEditing = false">
-            {{ canceltips }}
-          </button>
-          <button class="ui-button submit" @click="onConfirmEditing">
-            {{ comfirmtips }}
-          </button>
-        </div>
-      </div>
-    </popup>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from "vuex";
-import PulldownMenuInEditor from "@/components/pulldownMenuInEditor.vue";
-import { isValidPhoneNumber } from "@/utils/other.js";
-import Popup from "@/components/shared/popup/index.vue";
-import { i18n } from "@/lang"
-
-
-export default {
-  components: {
-    PulldownMenuInEditor,
-    Popup,
-  },
-  data() {
-    return {
-      custom_button: i18n.t("edit_settings.custom_button"),
-      custom_button_tips: i18n.t("edit_settings.custom_button_tips"),
-      edittips: i18n.t("edit_settings.edit"),
-      hidetips: i18n.t("edit_settings.hide"),
-      showtips: i18n.t("edit_settings.show"),
-      button_name: i18n.t("edit_settings.button_name"),
-      button_placeholder: i18n.t("edit_settings.button_placeholder"),
-      please_input: i18n.t("edit_settings.please_input"),
-
-      canceltips: i18n.t("gather.cancel"),
-      comfirmtips: i18n.t("gather.comfirm"),
-
-      expandStatus: [],
-      buttonTypeList: [
-        'phone_short',
-        'link_short',
-      ],
-      isEditing: false,
-      editingButtonIdx: -1,
-      isIgnoreTypeChangeWhenEditing: false,
-      editingInfo: {
-        type: '',
-        name: '',
-        value: '',
-      }
-    }
-  },
-  computed: {
-    ...mapGetters({
-      info: 'info'
-    }),
-    buttonValueTips() {
-      if (this.info.customButton) {
-        return this.info.customButton.map((item) => {
-          if (item.type === '电话') {
-            return i18n.t("edit_settings.phone")
-          } else if (item.type === '链接') {
-            return i18n.t("edit_settings.link")
-          } else {
-            return ''
-          }
-        })
-      } else {
-        return null
-      }
-    },
-
-    buttonName() {
-      if (this.info.customButton) {
-        return this.info.customButton.map((item) => {
-          if (item.type === '电话') {
-            return i18n.t("edit_settings.phone_short")
-          } else if (item.type === '链接') {
-            return i18n.t("edit_settings.link_short")
-          } else {
-            return ''
-          }
-        })
-      } else {
-        return null
-      }
-    },
-    editingButtonValueTip() {
-      if (this.editingInfo.type === '电话') {
-        return i18n.t("edit_settings.phone")
-      } else if (this.editingInfo.type === '链接') {
-        return i18n.t("edit_settings.link")
-      } else {
-        return ''
-      }
-    },
-  },
-  watch: {
-    'editingInfo.type': {
-      handler(vNew) {
-        if (!this.isIgnoreTypeChangeWhenEditing) {
-          console.log(vNew);
-          this.editingInfo.name = vNew
-          this.editingInfo.value = ''
-        }
-        this.isIgnoreTypeChangeWhenEditing = false
-      }
-    },
-  },
-  beforeMount() {
-    if (!this.info.customButton) {
-      // 这是在v1.2版之前创建的作品，还没设置过自定义按钮，所以还没有customButton字段
-      this.info.customButton = [
-        {
-          "type": "phone",
-          "name": "电话",
-          "value": "",
-          "isShow": false
-        },
-        {
-          "type": "link",
-          "name": "链接",
-          "value": "",
-          "isShow": false
-        }
-      ]
-    }
-  },
-  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
-    },
-    onRequestForShow(index) {
-      if (!this.checkButtonName(this.info.customButton[index].name)) {
-        return
-      }
-      if (!this.checkButtonValue(this.info.customButton[index].value, this.info.customButton[index].type)) {
-        return
-      }
-      this.info.customButton[index].isShow = true
-    }
-  }
-}
-</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;
-      cursor: pointer;
-
-      &.bright {
-        color: #fff;
-      }
-
-      &.dark {
-        color: #808080;
-      }
-
-      >.left {
-        display: flex;
-        align-items: center;
-
-        >.icon-expand {
-          font-size: 10px;
-          color: rgba(255, 255, 255, 0.6);
-          transform: rotate(-90deg);
-          cursor: pointer;
-        }
-
-        >.button-icon {
-          width: 18px;
-          height: 18px;
-          margin-left: 6px;
-        }
-
-        >.button-name {
-          font-size: 16px;
-          margin-left: 6px;
-        }
-      }
-
-      >.right {
-        display: flex;
-        align-items: center;
-
-        i.btn-edit {
-          margin-left: 16px;
-          cursor: pointer;
-
-          &:hover {
-            color: #0076F6;
-          }
-        }
-
-        >.btn-show {
-          margin-left: 16px;
-          cursor: pointer;
-
-          &:hover {
-            color: #0076F6;
-          }
-        }
-
-        >.btn-hide {
-          margin-left: 16px;
-          cursor: pointer;
-
-          &:hover {
-            color: #0076F6;
-          }
-        }
-      }
-    }
-
-    >.edit-content {
-      border-radius: 2px;
-      border: 1px solid #404040;
-      padding-top: 58px;
-      padding-bottom: 26px;
-      display: none;
-      pointer-events: 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: transparent;
-          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: transparent;
-          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);
-        }
-      }
-    }
-
-    >.edit-content {
-      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>

packages/qjkankan-editor/src/views/base/customButtonSettings.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="custom-button-settings">
-    <span class="title">{{ custom_button }}</span>
+    <span class="title">{{ $i18n.t("edit_settings.custom_button") }}</span>
 
     <i
       class="iconfont icon-material_prompt tool-tip-for-editor"
-      v-tooltip="custom_button_tips"
+      v-tooltip="$i18n.t(`edit_settings.custom_button_tips`)"
     >
     </i>
     <br />
@@ -17,7 +17,7 @@
     >
       <div
         class="title-bar"
-        :class="info.customButton[index].isShow ? 'bright' : 'dark'"
+        :class="item.isShow ? 'bright' : 'dark'"
         @click="onRequestForChangeExpandStatus(index)"
       >
         <!-- 新增的体验图片 -->
@@ -29,8 +29,8 @@
           <i class="iconfont icon-edit_input_arrow icon-expand"></i>
           <img
             v-if="
-              info.customButton[index].type === '电话' &&
-              info.customButton[index].isShow
+              item.type === '电话' &&
+              item.isShow
             "
             :src="require('@/assets/images/icons/phone.svg')"
             class="button-icon"
@@ -38,8 +38,8 @@
           />
           <img
             v-if="
-              info.customButton[index].type === '电话' &&
-              !info.customButton[index].isShow
+              item.type === '电话' &&
+              !item.isShow
             "
             :src="require('@/assets/images/icons/phone-dark.svg')"
             class="button-icon"
@@ -47,8 +47,8 @@
           />
           <img
             v-if="
-              info.customButton[index].type === '链接' &&
-              info.customButton[index].isShow
+              item.type === '链接' &&
+              item.isShow
             "
             :src="require('@/assets/images/icons/link.svg')"
             class="button-icon"
@@ -56,82 +56,68 @@
           />
           <img
             v-if="
-              info.customButton[index].type === '链接' &&
-              !info.customButton[index].isShow
+              item.type === '链接' &&
+              !item.isShow
             "
             :src="require('@/assets/images/icons/link-dark.svg')"
             class="button-icon"
             alt=""
           />
           <span class="button-name">
-            {{ buttonName[index] }}
+            {{ getButtonTypeI18n(item.type)}}
           </span>
         </div>
         <div class="right">
           <i
             class="iconfont icon-editor_list_edit btn-edit"
             @click.stop="onRequestForEdit(index)"
-            v-tooltip="edittips"
+            v-tooltip="$i18n.t(`edit_settings.edit`)"
           >
           </i>
           <i
-            v-show="info.customButton[index].isShow"
+            v-show="item.isShow"
             class="iconfont icon-editor_on btn-show"
-            v-tooltip="hidetips"
-            @click.stop="info.customButton[index].isShow = false"
+            v-tooltip="$i18n.t(`edit_settings.hide`)"
+            @click.stop="item.isShow = false"
           ></i>
           <i
-            v-show="!info.customButton[index].isShow"
+            v-show="!item.isShow"
             class="iconfont icon-editor_off btn-hide"
-            v-tooltip="showtips"
+            v-tooltip="$i18n.t(`edit_settings.show`)"
             @click.stop="onRequestForShow(index)"
           ></i>
         </div>
       </div>
       <div class="edit-content">
         <div class="edit-content-item">
-          <span class="item-name">{{ button_type }}</span>
-          <div style="margin-left: 16px">{{ buttonName[index] }}</div>
+          <span class="item-name">{{ $i18n.t(`edit_settings.button_type`) }}</span>
+          <div style="margin-left: 16px">{{ getButtonTypeI18n(item.type) }}</div>
         </div>
         <div class="edit-content-item">
-          <span class="item-name">{{ button_name }}</span>
+          <span class="item-name">{{ $i18n.t(`edit_settings.button_name`) }}</span>
           <div style="margin-left: 16px">
-            {{ info.customButton[index].name }}
+            {{ item.name }}
           </div>
         </div>
         <div class="edit-content-item">
           <span class="item-name">{{ buttonValueTips[index] }}</span>
           <div style="margin-left: 16px">
-            {{ info.customButton[index].value }}
+            {{ item.value }}
+          </div>
+        </div>
+        <div class="edit-content-item">
+          <span class="item-name">{{ $i18n.t("edit_settings.button_open_method") }}</span>
+          <div style="margin-left: 16px">
+            {{ $i18n.t(`zh_key.${item.openMethod}`) }}
           </div>
         </div>
-
-        <!-- <div class="edit-content-item">
-          <span class="item-name">{{ button_name }}</span>
-          <PulldownMenuInEditor
-            class="selector"
-            :valueList="buttonTypeList"
-            v-model="info.customButton[index].type"
-          >
-          </PulldownMenuInEditor>
-          <input
-            class="name-input"
-            :placeholder="button_placeholder"
-            v-model="info.customButton[index].name"
-            maxlength="15"
-          />
-        </div> -->
-        <!-- <div class="edit-content-item">
-          <span class="item-name">{{ buttonValueTips[index] }}</span>
-          <input class="value-input" v-model="info.customButton[index].value" />
-        </div> -->
       </div>
     </div>
 
     <popup v-if="isEditing" :canClose="false">
       <div class="ui-message ui-message-confirm dark edit-window">
         <div class="ui-message-header">
-          <span>{{ custom_button }}</span>
+          <span>{{ $i18n.t("edit_settings.custom_button") }}</span>
           <span @click="isEditing = false">
             <i class="iconfont icon_close"></i>
           </span>
@@ -139,16 +125,15 @@
 
         <div class="ui-message-main">
           <div class="edit-content-item">
-            <span class="item-name">{{ button_name }}</span>
+            <span class="item-name">{{ $i18n.t(`edit_settings.button_name`) }}</span>
             <PulldownMenuInEditor
               class="selector"
               :valueList="buttonTypeList"
               v-model="editingInfo.type"
-            >
-            </PulldownMenuInEditor>
+            />
             <input
               class="name-input"
-              :placeholder="button_placeholder"
+              :placeholder="$i18n.t(`edit_settings.button_placeholder`)"
               v-model="editingInfo.name"
               maxlength="15"
             />
@@ -157,18 +142,26 @@
             <span class="item-name">{{ editingButtonValueTip }}</span>
             <input
               class="value-input"
-              :placeholder="`${please_input}${editingButtonValueTip}`"
+              :placeholder="`${$i18n.t(`edit_settings.please_input`)}${editingButtonValueTip}`"
               v-model="editingInfo.value"
             />
           </div>
+          <div class="edit-content-item">
+            <span class="item-name">{{ $i18n.t('edit_settings.button_open_method') }}</span>
+            <PulldownMenuInEditor
+              class="selector"
+              :valueList="buttonOpenMethodList"
+              v-model="editingInfo.openMethod"
+            />
+          </div>
         </div>
 
         <div class="ui-message-footer">
           <button class="ui-button deepcancel" @click="isEditing = false">
-            {{ canceltips }}
+            {{ $i18n.t("gather.cancel") }}
           </button>
           <button class="ui-button submit" @click="onConfirmEditing">
-            {{ comfirmtips }}
+            {{ $i18n.t("gather.comfirm") }}
           </button>
         </div>
       </div>
@@ -190,28 +183,16 @@ export default {
   },
   data() {
     return {
-      custom_button: i18n.t("edit_settings.custom_button"),
-      custom_button_tips: i18n.t("edit_settings.custom_button_tips"),
-      edittips: i18n.t("edit_settings.edit"),
-      hidetips: i18n.t("edit_settings.hide"),
-      showtips: i18n.t("edit_settings.show"),
-      button_name: i18n.t("edit_settings.button_name"),
-      button_type: i18n.t("edit_settings.button_type"),
-      button_placeholder: i18n.t("edit_settings.button_placeholder"),
-      please_input: i18n.t("edit_settings.please_input"),
-
-      canceltips: i18n.t("gather.cancel"),
-      comfirmtips: i18n.t("gather.comfirm"),
-
       expandStatus: [],
       buttonTypeList: ["电话", "链接"],
+      buttonOpenMethodList: ['弹出层打开', '新窗口打开'],
       isEditing: false,
       editingButtonIdx: -1,
-      isIgnoreTypeChangeWhenEditing: false,
       editingInfo: {
         type: "",
         name: "",
         value: "",
+        openMethod: "",
       },
     };
   },
@@ -234,22 +215,6 @@ export default {
         return null;
       }
     },
-
-    buttonName() {
-      if (this.info.customButton) {
-        return this.info.customButton.map((item) => {
-          if (item.type === "电话") {
-            return i18n.t("edit_settings.phone_short");
-          } else if (item.type === "链接") {
-            return i18n.t("edit_settings.link_short");
-          } else {
-            return "";
-          }
-        });
-      } else {
-        return null;
-      }
-    },
     editingButtonValueTip() {
       if (this.editingInfo.type === "电话") {
         return i18n.t("edit_settings.phone");
@@ -263,12 +228,8 @@ export default {
   watch: {
     "editingInfo.type": {
       handler(vNew) {
-        if (!this.isIgnoreTypeChangeWhenEditing) {
-          console.log(vNew);
-          this.editingInfo.name = i18n.t(`zh_key.${vNew}`);
-          this.editingInfo.value = "";
-        }
-        this.isIgnoreTypeChangeWhenEditing = false;
+        this.editingInfo.name = i18n.t(`zh_key.${vNew}`);
+        this.editingInfo.value = "";
       },
     },
   },
@@ -280,27 +241,51 @@ export default {
           type: "电话",
           name: "电话",
           value: "",
+          openMethod: "弹出层打开",
           isShow: false,
         },
         {
           type: "链接",
           name: "链接",
           value: "",
+          openMethod: "弹出层打开",
           isShow: false,
         },
       ];
     }
+    if (!this.info.customButton[0].openMethod) {
+      // 这是在v1.3版之前创建的作品，还没设置过自定义按钮的打开方式。
+      this.info.customButton[0].openMethod = '弹出层打开'
+      this.info.customButton[1].openMethod = '弹出层打开'
+    }
+  },
+  mounted() {
+    this.info.customButton.forEach((item) => {
+      item.name =
+        i18n.t(`zh_key.${item.name}`).indexOf("zh_key") > -1
+          ? item.name
+          : i18n.t(`zh_key.${item.name}`);
+    });
   },
   methods: {
+    getButtonTypeI18n(buttonType) {
+      if (buttonType === '电话') {
+        return i18n.t("edit_settings.phone_short");
+      } else if (buttonType === '链接') {
+        return i18n.t("edit_settings.link_short");
+      } else {
+        return ''
+      }
+    },
     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.type = this.info.customButton[index].type;
       this.editingInfo.name = this.info.customButton[index].name;
       this.editingInfo.value = this.info.customButton[index].value;
+      this.editingInfo.openMethod = this.info.customButton[index].openMethod
       this.isEditing = true;
     },
     checkButtonName(name) {
@@ -357,14 +342,6 @@ export default {
       this.info.customButton[index].isShow = true;
     },
   },
-  mounted() {
-    this.info.customButton.forEach((item) => {
-      item.name =
-        i18n.t(`zh_key.${item.name}`).indexOf("zh_key") > -1
-          ? item.name
-          : i18n.t(`zh_key.${item.name}`);
-    });
-  },
 };
 </script>
 
@@ -402,8 +379,7 @@ export default {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: 0 16px;
-      padding-right: 40px;
+      padding: 0 31px 0 16px;
       cursor: pointer;
 
       .experience {
@@ -453,17 +429,17 @@ export default {
         align-items: center;
 
         i.btn-edit {
-          margin-left: 16px;
           cursor: pointer;
-
+          padding: 7px;
           &:hover {
             color: #0076f6;
           }
         }
 
         > .btn-show {
-          margin-left: 16px;
+          margin-left: 9px;
           cursor: pointer;
+          padding: 7px;
 
           &:hover {
             color: #0076f6;
@@ -471,8 +447,9 @@ export default {
         }
 
         > .btn-hide {
-          margin-left: 16px;
+          margin-left: 9px;
           cursor: pointer;
+          padding: 7px;
 
           &:hover {
             color: #0076f6;