Question

我创建了这个组件，一旦加载到客户端，就会在图像中淡入淡出。我认为有一种更像Vue的解决方法，比如使用Vue事件，却找不到它。什么是Vue方式来检测何时加载图像？

＆＃13;

Vue.component('imageThatFadesInOnLoad',{

  data: function(){
    return {
      src: 'http://via.placeholder.com/350x150',
      loaded: false,
    }
  },

  mounted: function () {
    var image = new Image()
    var that =  this
    this.loaded = image.addEventListener('load', function(){that.onLoaded()}) // This is the key part: it is basically vanilla JS
    image.src = this.src
  },

  methods:{
    onLoaded(){
      this.loaded = true
    }
  },

  template: `
    <div class="wrapper">
      <transition name="fade">
        <img class="icon" v-bind:src="src" v-if="loaded">&nbsp;
      </transition>
   </div>
  `
})

new Vue({
  el: '#wrapper'
});

＆＃13;

.wrapper{
  width: 350px;
  height: 150px;
  background: slategrey;
}
.fade-enter-active {
  transition: opacity 3s ease-in-out;
}
.fade-enter-to{
  opacity: 1;
}
.fade-enter{
  opacity: 0;
}

＆＃13;

<script src="https://unpkg.com/vue@2.4.4/dist/vue.js"></script>
<div id="wrapper">
<image-that-fades-in-on-load></image-that-fades-in-on-load>
</div>

＆＃13;

Answer 1

您可以使用v-on:（或@简写）语法绑定任何DOM事件。在您的情况下，load事件，在加载图像时触发。

因为您正在加载图像＆＃34; DOM方式＆＃34;你不能使用v-if，因为Vue不会渲染元素（但你需要它，所以提取图像src）。相反，您可以使用v-show，它将呈现但隐藏元素。

＆＃13;

Vue.component('imageThatFadesInOnLoad', {
  data: function() {
    return {
      src: 'http://via.placeholder.com/350x150',
      loaded: false,
    }
  },
  methods: {
    onLoaded() {
      this.loaded = true;
    }
  },
  template: `
    <div class="wrapper">
      <transition name="fade">
        <img class="icon" v-bind:src="src" v-on:load="onLoaded" v-show="loaded">&nbsp;
      </transition>
   </div>
  `
});

new Vue({
  el: '#wrapper'
});

＆＃13;

.wrapper {
  width: 350px;
  height: 150px;
  background: slategrey;
}

.fade-enter-active {
  transition: opacity 3s ease-in-out;
}

.fade-enter-to {
  opacity: 1;
}

.fade-enter {
  opacity: 0;
}

＆＃13;

<script src="https://unpkg.com/vue@2.4.4/dist/vue.js"></script>

<div id="wrapper">
  <image-that-fades-in-on-load></image-that-fades-in-on-load>
</div>

＆＃13;

Answer 2

要在动态替换缓存的图像时使过渡生效，您需要添加唯一键。否则，vue的编译器将仅替换元素的内容以提高效率，并且不会触发转换。

<template>
  <div :style="{width: width+'px', height: height+'px'}">
    <transition name="fade">
      <img
        v-show="loaded"
        @load="onImageLoad"
        :src="src"
        :alt="alt"
        :width="width"
        :height="height"
        :key="src"
      />
    </transition>
  </div>
</template>
<script>
export default {
  props: ["src", "width", "height", "alt"],
  data() {
    return {
      loaded: false,
    };
  },
  methods: {
    onImageLoad() {
      this.loaded = true;
    },
  },
  watch: {
    src: {
      handler() {
        this.loaded = false;
      },
      immediate: true,
    },
  },
};
</script>
<style scoped>
.fade-enter-active {
  transition: opacity 1s ease-in-out;
}
.fade-enter-to {
  opacity: 1;
}
.fade-enter {
  opacity: 0;
}
</style>

Answer 3

只需使用本机CSS解决方案而不是Vue SELECT CASE WHEN u.how_heard IN ('facebook', 'youtube', 'instagram', 'advert') THEN u.how_heard ELSE 'other' END as how_heard_new, COUNT(*) AS total, COUNT(*) / SUM(COUNT(*)) OVER() * 100 AS `percentage` FROM users u GROUP BY how_heard_new方式为上述答案提供略有不同的方法。

在下面的代码中，我们在加载<Transition>时会向其添加class，以触发转换。

<img>

加载Vue时如何淡入图像

3 个答案: