javascript - vue2弹窗打开没有加载状态?

Question

<template>  <div id="app">    <el-dialog :visible.sync="isVisible">      <template slot="title">        <div>          <span>图片查看</span>        </div>      </template>      <div v-loading="imgLoading">        <img          :src="currentImage"          v-show="imgDataArr.length > 0 && !imgLoading"          @load="imageLoaded"          @error="imageLoadedFailed"          alt=""        >      </div>    </el-dialog>  </div></template><script>export default {  data() {    return  {      isVisible: this.fileImageData.show,      currentIndex: '',      imgDataArr: [],      currentImage: '',      imgLoading: true    }  },  props: {    fileImageData: Object  },  watch:{    currentIndex: {      hanler(newV){        if(this.imgDataArr.length > 0) {          const formData = new FormData()          formData.append('file', this.imgDataArr[newV].attId)          const res = downloadFileImage(formData)          res.then(blob => {            if(blob instanceof Blob) {              const url = window.URL.createObjectURL(blob)              this.currentImage = url            }          })        }      }    }  },  mounted() {    this.getImage()  },  methods: {    getImage() {      const arr = []      this.fileImageData.imageData.map(item => {        arr.push({attId:item.attId})      })      this.imgDataArr = arr      this.currentIndex = 0    },    imageLoaded() {      this.imgLoading = false    },    imageLoadedFailed() {      this.imgLoading = false    }  }}</script>

这是子组件，上面这样写，弹窗打开的时候没有加载状态，是什么原因

Answer 1

<template>  <!-- ... -->  <div v-loading="imgLoading">    <img      :src="currentImage"      v-if="currentImage" <!-- 用 v-if 替换 v-show ->      @load="imageLoaded"      @error="imageLoadedFailed"      alt=""    >  </div>  <!-- ... --></template><script>export default {  // ...  watch:{    // 修改 typo    currentIndex: {      handler(newV, oldV) {        if(newV !== oldV) {          this.imgLoading = true;           // ... your code to load the image        }      },      immediate: true // watcher绑定后立马触发    }  },  methods: {    // ...    getImage() {      // ... your code      this.imgLoading = true;     },    imageLoaded() {      this.imgLoading = false;    },    imageLoadedFailed() {      this.imgLoading = false;      // 错误处理    }  }}</script>

Answer 2

你的代码中使用了 v-loading 指令来控制图片加载的状态，然而这个指令只有在 Vue 2.x 的版本中才有。如果你在 Vue 3.x 中使用这段代码，就会发现 v-loading 指令不再可用。

在 Vue 3.x 中，官方已经弃用了 v-loading 指令，并推荐使用第三方库，例如 vue-loading-overlay。

如果你仍然想在 Vue 2.x 中使用这段代码，你需要确保你已经正确安装并引入了 vue-loading-overlay。你可以通过以下命令来安装：

npm install vue-loading-overlay --save

然后在你的组件中引入并使用：

<template>  <div id="app">    <el-dialog :visible.sync="isVisible">      <template slot="title">        <div>          <span>图片查看</span>        </div>      </template>      <div>        <vue-loading-overlay :active.sync="imgLoading" text="正在加载...">          <img            :src="currentImage"            v-show="imgDataArr.length > 0 && !imgLoading"            @load="imageLoaded"            @error="imageLoadedFailed"            alt=""          >        </vue-loading-overlay>      </div>    </el-dialog>  </div></template>

注意，在 Vue 3.x 中，你可能需要调整你的代码以适应新的生命周期方法和新的语法特性。例如，你可以使用 setup 方法来引入和使用 vue-loading-overlay：

<template>  <div id="app">    <el-dialog :visible.sync="isVisible">      <template slot="title">        <div>          <span>图片查看</span>        </div>      </template>      <div>        <vue-loading-overlay :active.sync="imgLoading" text="正在加载...">          <img            :src="currentImage"            :hidden="imgDataArr.length <= 0 || imgLoading"            @load="imageLoaded"            @error="imageLoadedFailed"            alt=""          >        </vue-loading-overlay>      </div>    </el-dialog>  </div></template>