vue3前端本地怎么根据点击图片去下载，图片上会根据加载状态显示不同的图标，如有未加载和加载中两种图标，包括加载完成不显示图标

Question

vue3前端本地怎么做根据点击图片去下载，图片上会根据加载状态显示不同的图标，如有未加载和加载中两种图标，包括加载完成不显示图标。

Answer 1

该回答引用ChatGPT

在Vue 3中，可以使用v-bind和v-if指令来实现根据加载状态显示不同的图标。具体步骤如下：

在模板中添加图片元素，并使用v-bind指令将图片的src属性绑定到数据中的一个变量，同时使用v-if指令根据数据中的变量显示不同的图标。

<template>
  <div>
    <img
      :src="imageUrl"
      v-if="!isLoading && !hasError"
      @click="downloadImage"
    />
    <i v-if="isLoading" class="loading-icon"></i>
    <i v-if="hasError" class="error-icon"></i>
  </div>
</template>

在Vue组件中定义变量imageUrl、isLoading和hasError，并在downloadImage方法中修改这些变量的值。

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg',
      isLoading: false,
      hasError: false,
    };
  },
  methods: {
    async downloadImage() {
      this.isLoading = true;
      try {
        // 下载图片的代码
        this.imageUrl = await downloadImage(this.imageUrl);
      } catch (error) {
        console.error(error);
        this.hasError = true;
      } finally {
        this.isLoading = false;
      }
    },
  },
};
</script>

在downloadImage方法中，首先将isLoading变量设置为true，表示正在加载。然后，使用try...catch语句下载图片。如果下载成功，将修改imageUrl变量的值为下载后的图片URL。如果下载失败，将将hasError变量设置为true，表示出现了错误。最后，无论下载成功还是失败，都将isLoading变量设置为false，表示加载完成。