qjkankan_v1.1.1/packages/code/src/components/sceneInGroupInEditor.vue

<template>
  <div
    class="scene-item"
    :class="isConfirmingDeletion ? '' : 'not-confirming-deletion'"
    @dragstart="onDragStart"
    draggable="true"
  >
    <img
      :src="sceneInfo.icon + ossImagePreviewUrlSuffix()"
      alt=""
      class="scene-image"
      draggable="false"
    >
    <div class="right">
      <span v-if="!isRenaming" class="scene-title" v-title="sceneInfo.sceneTitle">{{sceneInfo.sceneTitle}}</span>
      <input
        v-if="isRenaming"
        class="scene-title-input"
        v-model.trim="newName"
        ref="input-for-rename"
        maxlength="50"
        placeholder="输入名字"
        @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="'重命名'"
            @click="onRequestForRename"
          >
          </i>
          <i class="iconfont icon-editor_list_delete icon-delete" v-tooltip="'删除'"
            @click="onRequestForDelete"
          >
          </i>
        </div>
      </div>
    </div>
    <div class="deletion-confirm-wrap">
      <div class="deletion-confirm" :class="isConfirmingDeletion ? 'show' : 'hide'"
        v-clickoutside="onRequestForCancelDelete"
        @click="onConfirmDelete"
      >
        删除
      </div>
    </div>
  </div>
</template>

<script>
import { ossImagePreviewUrlSuffix } from '@/utils/other.js'

export default {
  name: 'SceneInGroupInEditor', 
  components: {
  },
  props: {
    sceneInfo: {
      type: Object,
      require: true,
    },
  },
  data() {
    return {
      isRenaming: false,
      newName: '',
      isConfirmingDeletion: false,
    }
  },
  methods: {
    onDragStart(e) {
      e.dataTransfer.setData("application/target-type", `scene`)
      e.dataTransfer.setData("application/target-id", this.sceneInfo.id)
      e.dataTransfer.setDragImage(e.target.children[0], -10, -18)
    },
    ossImagePreviewUrlSuffix,
    translateSceneType(type) {
      if (type === 'pano') {
        return '全景'
      } else {
        return '三维'
      }
    },
    onRequestForRename() {
      this.isRenaming = true
      this.newName = this.sceneInfo.sceneTitle
      this.$nextTick(() => {
        this.$refs['input-for-rename'].focus()
      })
    },
    onInputNewNameComplete() {
      this.isRenaming = false
      this.$emit('rename', this.sceneInfo.id, this.newName)
      this.newName = ''
    },
    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;
    }
  }
  .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>