vue3-waterfall3 v1.1.26

vue3-waterfall3 瀑布流插件

介绍

vue3-waterfall3 是 vue+ts 构建的瀑布组件在 pc 端能够根据屏幕宽度做自适应变化调整，主要采取的方案就是图片预加载

插件下载

npm install vue3-waterfall3

组件引入

<template>
  <water-fall>
  </water-fall>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { WaterFall } from '@/components/index';

代码演示

<template>
  <water-fall
    v-model:imgs-arr="data"
    :maxCols="8"
    :gap="10"
    v-slot:default="props"
    :reachBottomDistance="100"
    @scrollReachBottom="scrollReachBottom"
    @img-error="imgError"
  >
    <div>
      <span> 第: {{ props.index + 1 }} 张</span>
      <span> 描述 {{ props.value.text }} </span>
    </div>
  </water-fall>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { WaterFall } from '@/components/index';



const imgList = [
  {
    src: 'https://ts3.cn.mm.bing.net/th?id=OIP-C.ZkoPhpKfJwsvGmpm8RsragHaFp&w=286&h=218&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
    text: '天使'
  }, {
    src: 'https://ts3.cn.mm.bing.net/th?id=OIP-C.bVb769JBdzVZYuksxZ2Y-AHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
    text: '花园里可爱美女鞠婧祎'
  }, {
    src: 'https://ts3.cn.mm.bing.net/th?id=OIP-C.Md86Wi2EYiKHNPldRZiD4gHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
    text: '甜美可爱美女'
  }, {
    src: 'https://ts1.cn.mm.bing.net/th?id=OIP-C.Zte3ljd4g6kqrWWyg-8fhAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
    text: '复古风格美女杨幂'
  }, {
    src: 'https://ts2.cn.mm.bing.net/th?id=OIP-C.th6FlIUU3ebI8pl4ccYHZgHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
    text: '清新可爱美女鞠婧祎'
  }, {
    src: 'https://ts4.cn.mm.bing.net/th?id=OIP-C.Fx6P4aoVRKGGircQ7tgtggHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
    text: '刘诗诗 一手托腮'
  }, {
    src: 'https://ts3.cn.mm.bing.net/th?id=OIP-C.E6m4s0dlHQhce_kPus5WJAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
    text: '高颜值气质美女 侧脸'
  }, {
    src: 'https://ts3.cn.mm.bing.net/th?id=OIP-C.E6m4s0dlHQhce_kPus5WJAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
    text: '室内游泳池 美女 刘亦菲 侧脸 白色裙子'
  }, {
    src: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.7sAjIeoQYWnXV_QnuYs1jQHaEK?w=290&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
    text: '赵露思 猫 鲜花 '
  }, {
    src: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.d95XU9rPpliLu_FNqV9hHQHaFN?w=231&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
    text: '明亮客厅 沙发 美女 刘亦菲 '
  }, {
    src: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.EYdT7l9cizAp4u7dRlA8ywHaD5?w=309&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
    text: '清新绿草地美女4K'
  },
  {
    src: 'https://ts3.cn.mm.bing.net/th?id=OIP-C.ZkoPhpKfJwsvGmpm8RsragHaFp&w=286&h=218&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
    text: '天使'
  }, {
    src: 'https://ts3.cn.mm.bing.net/th?id=OIP-C.bVb769JBdzVZYuksxZ2Y-AHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
    text: '花园里可爱美女鞠婧祎'
  }, {
    src: 'https://ts3.cn.mm.bing.net/th?id=OIP-C.Md86Wi2EYiKHNPldRZiD4gHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
    text: '甜美可爱美女'
  }, {
    src: 'https://ts1.cn.mm.bing.net/th?id=OIP-C.Zte3ljd4g6kqrWWyg-8fhAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
    text: '复古风格美女杨幂'
  }, {
    src: 'https://ts2.cn.mm.bing.net/th?id=OIP-C.th6FlIUU3ebI8pl4ccYHZgHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
    text: '清新可爱美女鞠婧祎'
  }, {
    src: 'https://ts4.cn.mm.bing.net/th?id=OIP-C.Fx6P4aoVRKGGircQ7tgtggHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
    text: '刘诗诗 一手托腮'
  }, {
    src: 'https://ts3.cn.mm.bing.net/th?id=OIP-C.E6m4s0dlHQhce_kPus5WJAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
    text: '高颜值气质美女 侧脸'
  }, {
    src: 'https://ts3.cn.mm.bing.net/th?id=OIP-C.E6m4s0dlHQhce_kPus5WJAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
    text: '室内游泳池 美女 刘亦菲 侧脸 白色裙子'
  }, {
    src: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.7sAjIeoQYWnXV_QnuYs1jQHaEK?w=290&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
    text: '赵露思 猫 鲜花 '
  }, {
    src: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.d95XU9rPpliLu_FNqV9hHQHaFN?w=231&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
    text: '明亮客厅 沙发 美女 刘亦菲 '
  }, {
    src: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.EYdT7l9cizAp4u7dRlA8ywHaD5?w=309&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
    text: '清新绿草地美女4K'
  }
]
const data = ref<any[]>([])
data.value = imgList


const scrollReachBottom = () => {
  console.log('加载图片');
  data.value = data.value.concat(imgList)
}

const imgError = (item: any) => {
  console.log('加载失败', item);

}
</script>

效果图

API

Interfaces​

Events

slot