【vue组件】refs挂在图片在变化时候潜入变化

最新推荐文章于 2023-02-06 17:01:40 发布

KatyLight

最新推荐文章于 2023-02-06 17:01:40 发布

阅读量348

点赞数

分类专栏： JS 插件 vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_33014695/article/details/126950263

版权

插件同时被 3 个专栏收录

29 篇文章 0 订阅

订阅专栏

22 篇文章 0 订阅

订阅专栏

vue

9 篇文章 0 订阅

订阅专栏

手动用refs挂在效果。等图片加载完，删除它的前一个，如果是错误加载，删除自己。

<template>
  <div ref="mutter" style="position: relative;height: 200px;width: 200px;"></div>
</template>
<script>
import {getCurrentInstance, nextTick, ref, watch} from "vue";
export default {
  name: "ImageLoadNext",
  props: {
    imgSrc: {
      default: ""
    },
    imgAlt: {
      default: "图片加载失败"
    },
  },
  setup(props, ctx) {
    const loading = ref(true);
    const imageList=ref([]);
    const proxy=getCurrentInstance();
    const createMeImage=(src)=>{
      let image=document.createElement('img');
      image.src=src;
      image.alt='';
      image.classList.add('loading')
      image.classList.add('vc')
      image.onload=(e)=>{
        image.classList.remove("loading")
        if( e.target.previousSibling){
          setTimeout(()=>{
            e.target.previousSibling.remove();
          },500)
        }
      }
      image.onerror=(e)=>{
        e.target.remove();
      }
      return image;
    }
    //props ()=>{}
    nextTick(()=>{
      proxy.refs.mutter.appendChild(createMeImage(props.imgSrc));
    })
    watch(()=>props.imgSrc, (c, v) => {
      proxy.refs.mutter.appendChild(createMeImage(c));
    })
    return {

    }
  }

}
</script>
<style>
.vc {
  opacity: 1;
  display: block;
  object-fit: cover;
  object-position: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  height: 200px;
  width: 200px;
  transition: opacity .4s ease-in;
}
.vc.loading{
  opacity: 0;
  transition: opacity .4s ease-in;
}
</style>