qjkankan_v1.1.1/packages/qjkankan-editor/src/components/sceneInGroupInEditor.vue

<template>
  <div class="scene-item" :class="isConfirmingDeletion ? '' : 'not-confirming-deletion'" @dragstart="onDragStart" @dragend="clearDragInfo" draggable="true">
    <div class="drag-image" ref="drag-image">
      <img :src="sceneInfo.icon + ossImagePreviewUrlSuffix()" alt="" class="scene-image" draggable="false" />
    </div>
    <img :src="sceneInfo.icon + ossImagePreviewUrlSuffix()" alt="" class="scene-image" draggable="false" />
    <div class="right">
      <span v-if="!isRenaming" class="scene-title" v-title="sceneInfo.name">{{ sceneInfo.name }}</span>
      <input
        v-if="isRenaming"
        class="scene-title-input"
        v-model.trim="newName"
        ref="input-for-rename"
        maxlength="50"
        :placeholder="$i18n.t('navigation.enter_name')"
        @blur="onInputNewNameComplete"
        @keydown.enter="onInputEnter"
      />
      <div class="right-bottom">
        <span class="scene-type">{{ translateSceneType(sceneInfo.type) }}</span>
        <div class="icons">
          <i class="iconfont icon-editor_list_edit icon-edit" v-tooltip="$i18n.t('navigation.rename')" @click="onRequestForRename"> </i>
          <i class="iconfont icon-editor_list_delete icon-delete" v-tooltip="$i18n.t('navigation.delete')" @click="onRequestForDelete"> </i>
        </div>
      </div>
    </div>
    <div class="deletion-confirm-wrap">
      <div class="deletion-confirm" :class="isConfirmingDeletion ? 'show' : 'hide'" v-clickoutside="onRequestForCancelDelete" @click="onConfirmDelete">
        {{ $i18n.t("navigation.delete") }}
      </div>
    </div>
  </div>
</template>

<script>
import { ossImagePreviewUrlSuffix } from "@/utils/other.js";
import { mapMutations } from "vuex";
import { i18n } from "@/lang";

export default {
  name: "SceneInGroupInEditor",
  components: {},
  props: {
    sceneInfo: {
      type: Object,
      require: true,
    },
  },
  data() {
    return {
      isRenaming: false,
      newName: "",
      isConfirmingDeletion: false,
    };
  },
  computed: {},
  methods: {
    ...mapMutations({
      recordDragType: "setEditorNavDragType",
      recordDragNode: "setEditorNavDragNode",
      clearDragInfo: "clearEditorNavDragInfo",
    }),
    onDragStart(e) {
      console.error(this.sceneInfo);

      this.recordDragType("scene");
      this.recordDragNode(this.sceneInfo);
      e.dataTransfer.setDragImage(this.$refs["drag-image"], -10, -18);
    },
    ossImagePreviewUrlSuffix,
    translateSceneType(type) {
      if (type === "pano") {
        return this.$i18n.t("navigation.pano");
      } else {
        return this.$i18n.t("navigation.scene");
      }
    },
    onRequestForRename() {
      this.isRenaming = true;
      this.newName = this.sceneInfo.name;
      this.$nextTick(() => {
        this.$refs["input-for-rename"].focus();
      });
    },
    onInputNewNameComplete() {
      this.isRenaming = false;
      if (String(this.newName).trim().length === 0 || String(this.newName).trim().length > 50) {
        this.$msg.warning(this.$i18n.t("hotspot.title_placeholder"));
        return;
      }

      this.$emit("rename", this.sceneInfo.id, this.newName);
      setTimeout(() => {
        this.newName = "";
      }, 100);
    },
    onInputEnter() {
      this.isRenaming = false; // 会导致input blur，进而触发onInputNewNameComplete
    },
    onRequestForDelete() {
      this.isConfirmingDeletion = true;
    },
    onRequestForCancelDelete() {
      this.isConfirmingDeletion = false;
    },
    onConfirmDelete() {
      this.$emit("delete", this.sceneInfo.id);
      this.isConfirmingDeletion = false;
    },
  },
};
</script>

<style lang="less" scoped>
.scene-item {
  position: relative;
  margin-left: -12px;
  margin-right: -10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  border-radius: 4px;
  &:hover {
    background: #313131;
  }
  &.not-confirming-deletion:hover {
    .icons {
      display: block !important;
    }
  }
  .drag-image {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    padding: 4px;
    background: #313131;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
    position: absolute;
    z-index: -1;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 2px;
    }
  }
  .scene-image {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    background: #b0b0b0;
    border-radius: 2px;
    object-fit: cover;
  }
  .right {
    margin-left: 10px;
    width: 0px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .scene-title {
      word-break: break-all;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.6);
    }
    .scene-title-input {
      height: 30px;
      background: #1a1b1d;
      border-radius: 2px;
      border: 1px solid #404040;
      color: #fff;
      font-size: 14px;
      padding: 0 10px 0 16px;
      &:focus {
        border-color: #0076f6;
      }
    }
    .right-bottom {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      .scene-type {
        color: #0076f6;
        line-height: 16px;
      }
      .icons {
        display: none;
        i {
          font-size: 16px;
          cursor: pointer;
          color: rgba(255, 255, 255, 0.6);
        }
        .icon-edit {
          &:hover {
            color: #0076f6;
          }
        }
        .icon-delete {
          margin-left: 11px;
          &:hover {
            color: #fa5555;
          }
        }
      }
    }
  }
  .deletion-confirm-wrap {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 44px;
    overflow: hidden;
    pointer-events: none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    > .deletion-confirm {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      background: #fa5555;
      transition: right 0.3s;
      cursor: pointer;
      text-align: center;
      font-size: 12px;
      color: #fff;
      pointer-events: auto;
      &::after {
        content: "";
        height: 100%;
        vertical-align: middle;
        display: inline-block;
      }
      &.show {
        right: 0;
      }
      &.hide {
        right: -44px;
      }
    }
  }
}
</style>