智能图库模块-图片功能扩展分享和批量处理功能

今天实现了图片的分享功能和批量处理功能。对于图片分享功能，本项目采用了纯前端实现，即通过一个弹窗让用户选择是复制图片链接分享还是二维码分享，antd组件库中有弹窗组件和二维码组件，不需要自行实现，考虑到这个弹窗可能会在其他页面也用到，因此也是把它单独写成一个组件ShareModal，由父组件传入图片的title和链接：

▼
vue
复制代码
<template>
  <div>
    <a-modal v-model:open="visible" :title="title" :footer="false" @cancel="closeModal">
      <h4>复制分享链接</h4>
      <a-typography-link copyable>
        {{ link }}
      </a-typography-link>
      <div style="margin-bottom: 16px" />
      <h4>手机扫码查看</h4>
      <a-qrcode :value="link"  />
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

interface Props {
  title: string;
  link: string;
}

const props = withDefaults(defineProps<Props>(),{
  title: '分享图片',
  link: 'https://xxx'
})


const visible = ref<boolean>(false);

const openModal = () => {
  visible.value = true;
};

const closeModal = () => {
  visible.value = false;
};

//暴露函数给父组件
defineExpose({
  openModal
})
</script>

因为要在父页面中打开该弹窗，因此需要把openModal方法暴露给父组件使其可以打开弹窗，在父组件引用该组件：<ShareModal ref="shareModalRef" :link="shareLink" />，这里给子组件注册了一个引用shareModalRef，通过这个引用可以直接访问这个 DOM 元素或组件实例，给分享按钮写一个点击事件：

▼
ts
复制代码
const shareModalRef = ref()
const shareLink = ref<string>()
const doShare = () => {
  shareLink.value = `${window.location.protocol}//${window.location.host}/picture/${picture.value.id}`
  if (shareModalRef.value) {
    shareModalRef.value.openModal()
  }
}

对于批量处理功能，本项目选择的是对当前页面的图片进行批量处理，相较于通过自行点击选择图片实现起来会比较简单，mybatisPlus中有一个updateBatchById方法可以进行批量更新，不需要通过for循环一次次发数据请求给数据库来进行更新。本项目目前由于图片较少实现较为简单，不需要用到线程池来实现，如果一次性需要修改一千条或者更多数据，则可以通过线程池开线程，每个线程处理一定数量图片来实现。