vue3 下载图片的方法

在Vue 3中下载图片，通常可以使用`<a>`标签配合事件处理程序来实现。以下是基本步骤：

1. 首先，在你的组件模板中创建一个链接元素，设置`href`属性为图片的URL：

<a @click="downloadImage" :href="imageUrl" target="_blank">
  <img :src="imageUrl" alt="图片描述" />
</a>

2. 定义一个名为`downloadImage`的方法，在这个方法中，你可以直接触发`href`的点击事件来下载图片。由于浏览器的安全限制，你可能需要使用`download`属性：

methods: {
  downloadImage() {
    const aLink = new HTMLAnchorElement();
    aLink.href = this.imageUrl;
    aLink.download = 'image filename'; // 图片保存的名称
    aLink.click();
    // 如果在某些浏览器中存在延迟，可以移除该链接元素
    setTimeout(() => {
      document.body.removeChild(aLink);
    }, 0);
  },
}

3. 确保`imageUrl`数据已从父组件或响应式数据源传递过来。