yoe-opm-web/src/views/diy/pccomponents/edit/hot-edit.vue

<template>
  <div class="pc-edit">
    <!-- 内容 -->
    <div class="content-wrap" v-show="diyStore.editTab == 'content'">
      <div class="edit-attr-item-wrap">
        <h3 class="mb-[10px]">标题内容</h3>
        <el-form label-width="90px" class="px-[10px]">
          <el-form-item label="热区背景">
            <upload-image v-model="diyStore.editComponent.imageUrl" :limit="1" @change="selectImg" />
          </el-form-item>
          <el-form-item label="热区设置">
            <heat-map v-model="diyStore.editComponent" />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 样式 -->
    <div class="style-wrap" v-show="diyStore.editTab == 'style'">
      <!-- 组件样式 -->
      <slot name="style"></slot>
    </div>
  </div>
</template>

<script setup name="Index" lang="ts">
import usePcdiyStore from '@/store/modules/pcdiy';

const diyStore = usePcdiyStore();

console.log(diyStore.editComponent, '5555');

// 组件验证
diyStore.editComponent.verify = (index: number) => {
  const res = { code: true, message: '' };
  if (diyStore.value[index].imageUrl === '') {
    res.code = false;
    res.message = '请上传图片';
    return res;
  }
  return res;
};

const selectImg = (url: string) => {
  handleHeight();
};

// 处理高度
const handleHeight = () => {
  const image = new Image();
  image.src = diyStore.editComponent.imageUrl;
  image.onload = async () => {
    diyStore.editComponent.imgWidth = image.width;
    diyStore.editComponent.imgHeight = image.height;
  };
};

defineExpose({});
</script>

<style lang="scss" scoped>
.pc-edit {
  .edit-attr-item-wrap {
    border-top: 2px solid var(--el-color-info-light-8);
    padding-top: 20px;

    &:first-of-type {
      border-top: none;
      padding-top: 0;
    }
  }

  .data-bos {
    display: flex;
    flex-wrap: wrap;
    gap: 0 12px;
    .data-list {
      background-color: #f9fafb;
      border: 1px solid #e5e7eb;
      &.border-primary {
        border-color: var(--el-color-primary);
      }
      img {
        width: 100%;
      }
    }
  }

  :deep(.el-form-item__label) {
    font-weight: 400;
  }
}
</style>