naive-ui图片下载

### 使用 naive-ui 实现图片下载功能

为了实现使用 `naive-ui` 组件库来完成图片下载的功能，可以借助于原生 JavaScript 或者第三方插件来进行文件处理。下面提供一种通过按钮点击触发图片下载的方式，并利用 `naive-ui` 提供的弹窗确认组件 (`NPopconfirm`) 来增强用户体验。

#### 利用 NPopconfirm 和自定义逻辑实现图片下载

import { defineComponent, ref } from 'vue';
import { NButton, NPopconfirm } from 'naive-ui';

export default defineComponent({
  setup() {
    const handleDownloadImage = () => {
      // 假设这是要下载的图片URL
      const imageUrl = 'https://example.com/path/to/image.png';
      
      fetch(imageUrl)
        .then(response => response.blob())
        .then(blob => {
          const url = window.URL.createObjectURL(new Blob([blob]));
          const link = document.createElement('a');
          link.href = url;
          link.setAttribute('download', 'image.png'); // 设置下载后的文件名
          document.body.appendChild(link);
          link.click();
          link.remove(); // 清理临时创建的<a>标签
        })
        .catch(() => alert('无法获取图像'));
    };

    return {
      handleDownloadImage,
    };
  },
});

<template>
  <div>
    <!-- 使用NPopconfirm包裹按钮 -->
    <n-popconfirm @positive-click="handleDownloadImage">
      <template #trigger>
        <n-button type="primary">下载图片</n-button>
      </template>
      是否确定要下载此图片？
    </n-popconfirm>
  </div>
</template>

<script lang="ts" src="./path-to-your-script.ts"></script>
<style scoped></style>

上述代码展示了如何结合 `naive-ui` 的 `NPopconfirm` 组件与简单的 JavaScript 文件操作API一起工作，从而实现在用户交互下执行图片下载的任务[^1]。