渐进式图片

基础用法

下面是渐进式图片的基础用法。

<template>
  <div class="t-progressive-image-area">
    <div class="btn-area">
      <button class="show-btn" @click="showImage">显示图片</button>
      <button class="hide-btn" @click="hideImage">隐藏图片</button>
    </div>
    <div class="text-area" v-if="animationProgressiveShow">
      <as-animation-progressive-image
          src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?fit=crop&crop=entropy&w=3456&h=2304"
          placeholder="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?w=100"
         @load="loadImage">
      </as-animation-progressive-image>
    </div>
  </div>
</template>

<script>
export default {
  name: "t-progressive-image",
  data(){
    return{
      animationProgressiveShow:false,
    }
  },
  methods:{
    showImage(){
      this.animationProgressiveShow=true;
    },
    hideImage(){
      this.animationProgressiveShow=false;
    },
    loadImage(){
      console.log("图片加载完成")
    },
  }
}
</script>
<style>
.t-progressive-image-area .btn-area{
  width: 100%;
  height: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.t-progressive-image-area .btn-area button{
  background-color: dodgerblue;
  border-radius: 5px;
  width: 100px;
  height: 40px;
  outline: none;
  border: none;
  color: #ffffff;
}
.t-progressive-image-area .btn-area .hide-btn{
 margin-left: 20px;
}
.t-progressive-image-area .text-area{
  width: 100%;
  height: 340px;
}
@media screen and (max-width: 480px) {
  .t-progressive-image-area .text-area{
    height: 180px;
  }
}
</style>

Expand Copy Copy

Attributes

参数	说明	必填
src	原始图片路径,类型为String,无默认值。	是
placeholder	原始图片加载完成前的占位图片,类型为String,无默认值。	是
duration	原始图片加载完成后切换到原始图片经过的秒数,类型为Number,默认值为5000,单位为ms。	否
border-radius	图片边角弧度类型为Number或者String,默认值为8。	否

Events

事件名称	说明	回调参数
load	图片加载结束	不传参,如上所示,在方法里面写要执行的操作。