neicanCMS/src/view/allMedia/AIeditor/components/image.vue

<template>
  <div class="image">
    <el-input style="width: 310px" v-model="input" placeholder="请输入图片描述">
      <template #append>
        <el-button
          type="primary"
          :loading="is_status === 'load'"
          @click="search"
          >查找</el-button
        >
      </template>
    </el-input>

    <div style="width: 310px; margin: 0 auto" v-if="is_status === 'none'">
      <el-image style="width: 310px; height: 232.5px" :src="image" fit="fill" />
      <div class="none_title">输入描述，自动配图</div>
      <ul>
        <li>根据您对图片的描述，智能匹配相关图片</li>
        <li>图片均来自Pixabay等图库，可免费商用</li>
      </ul>
    </div>
    <div class="masonry" v-if="is_status === 'data' && oriD.length">
      <div class="item" v-for="(item, index) in oriD" :key="index">
        <img :src="item.url" style="width: 100%;" />
        <el-icon class="saveImg" @click="()=>saveImg(item)"><Warning /></el-icon>
      </div>
    </div>
  </div>
</template>

<script setup>
// 图片
import image from '@/assets/img/image.png';
import { textImageMatch } from '@/api/aleditor.js';
import { ref, defineEmits } from 'vue';
const is_status = ref('none');
const input = ref('');
const oriD = ref({});
const emits = defineEmits(['closeType', 'setHtml', 'getImage', 'setImage']);
const search = () => {
  is_status.value = 'load';
  textImageMatch({
    data: {
      text: input.value,
      type: '',
    },
  })
    .then(r => {
      const li = r ? r.data || [] : [];
      oriD.value= li;
      is_status.value = oriD.value.length ? 'data' : 'none';
    })
    .catch(() => {
      is_status.value = 'none';
    });
};

const saveImg = item => {
    emits('setImage', [item.url]);
}
</script>

<style scoped>
.none_title {
  font-size: 24px;
  text-align: left;
  font-weight: 700;
  margin-bottom: 16px;
  margin-left: 11.3%;
}
ul {
  margin-left: 20px;
}
ul > li {
  font-size: 14px;
  color: #2c3e50;
  margin-bottom: 16px;
}

.masonry {
  /* width: 95%;
  margin: 0 auto;
   padding-top: 1em;
   column-count: 2;
  column-gap: 0; 
  display: flex;
  flex-wrap: wrap; */
  column-count: 3;
  column-gap: 3px;
}


.item{
    padding: 2px;
    position: relative;
    counter-increment: item-counter;
}

.item img{
    display: block;
    width: 100%;
    height: auto;
}

/* .item::after{
    position: absolute;
    display: block;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    background-color: #000;
    color: #fff;
    content: counter(item-counter);
} */

.saveImg{
    position: absolute;
    background-color: #fff;
    border-radius: 50%;
    right: 2px;
    top: 2px;
    display: none;
    cursor: pointer;
}

.item:hover .saveImg{
    display: block;
}
</style>