时间戳

首页 > 解决方案 > 如何在图像加载时将光标更改为进度，并在图像在 vuejs 中完全加载时将其更改为指针？

css - 如何在图像加载时将光标更改为进度，并在图像在 vuejs 中完全加载时将其更改为指针？

问题描述

我希望在卡内的图像尚未加载时cursor成为一个。并在卡内的图像完全加载时progress更改为cursor。pointer我使用样式绑定来实现这一点。:style="{ cursor: imageLoaded[index] ? pointer : progress }". 但cursor始终保持为pointer. 这是我的代码：

<v-row>
   <v-col v-for="(option, index ) in options" :key="index" cols="6">
       <v-lazy :options="{ threshold: 0.5 }" min-height="130">
             <v-hover v-slot:default="{ hover }">
                  <v-card
                      link
                      width="160"
                      id="options_card"
                      :class="[option.selected ? 'elevation-8 primary' : 'elevation-2']"
                      @click="OptionSelected( index, option )"
                      :style="{ cursor: imageLoaded[index] ? pointer : progress }"
                  >
                  <v-list-item>
                      <v-list-item-content>
                          <span id="option_title">{{ option.title }}</span>
                      </v-list-item-content>
                  </v-list-item>

                  <v-img
                      width="100%"
                      height="130"
                      :src="option.thumbnail"
                      id="thumbnail"
                      @load="imageLoaded[index]=true"
                  >
                      <template v-slot:placeholder>
                          <v-sheet color="grey lighten-4" class="px-3 pt-3 pb-6 fill-height">
                              <v-skeleton-loader type="image">
                              </v-skeleton-loader>
                         </v-sheet>
                      </template>
                  </v-img>
              </v-card> 
           </v-hover>
       </v-lazy>
   </v-col>
</v-row>


data () {
   return {
       imageLoaded: []
   }
}

任何人都可以帮忙吗？谢谢。

标签： cssvue.jsvuetify.js

解决方案

我认为它不起作用，因为数组是反应性的，因为 to 开头的元素为零。您必须填充imageLoaded数组，false然后将所需索引处的项目更改true为加载图像时

就像是。

data() {
  return {
    imageLoaded: [...options.map(op => false)]
  };
}

推荐阅读