vue3-waterfall-plugin瀑布流

vue3 （vue3-waterfall-plugin）实现瀑布流组件

<script setup>
import {ref} from 'vue'
import { LazyImg, Waterfall } from "vue-waterfall-plugin-next";
import "vue-waterfall-plugin-next/dist/style.css";
import ButtomOpera from '@/components/ButtomOpera/index.vue'
const list =  ref([
  {
    type: '环境传感器',
    name: '环境传感器',
    modelName: 'env_data',
    dateLabel: '环境数据',
    status: 0,
    data: [
      {fieldName: 'temperature', fieldLabel: '温度', unit: '℃'},
      {fieldName: 'humidity', fieldLabel: '湿度', unit: '%'},
      {fieldName: 'co2', fieldLabel: '二氧化碳', unit: 'ppm'},
      {fieldName: 'pm25', fieldLabel: 'PM2.5', unit: 'μg/m3'},
      {fieldName: 'pm10', fieldLabel: 'PM10', unit: 'μg/m3'},
      {fieldName: 'no2', fieldLabel: 'NO2', unit: 'μg/m3'},
      {fieldName: 'so2', fieldLabel: 'SO2', unit: 'μg/m3'},
      {fieldName: 'o3', fieldLabel: 'O3', unit: 'μg/m3'},
    ]
  },
  {
    type: '水表',
    name: '水表',
    modelName: 'water_data',
    dateLabel: '水表数据',
    status: 1,
    data: [
      {fieldName: 'water_flow', fieldLabel: '水流量', unit: 'L/min'},
      {fieldName: 'water_level', fieldLabel: '水位', unit: 'cm'},
    ]
  },
  {
    type: '电表',
    name: '电表',
    modelName: 'electricity_data',
    dateLabel: '电表数据',
    status: 0,
    data: [
      {fieldName: 'electricity_flow', fieldLabel: '电流流量', unit: 'A'},
      {fieldName: 'voltage', fieldLabel: '电压', unit: 'V'},
    ]
  },
  {
    type: '水表',
    name: '水表',
    modelName: 'water_data',
    dateLabel: '水表数据',
    status: 1,
    data: [
      {fieldName: 'water_flow', fieldLabel: '水流量', unit: 'L/min'},
      {fieldName: 'water_level', fieldLabel: '水位', unit: 'cm'},
    ]
  },
  {
    type: '电表',
    name: '电表',
    modelName: 'electricity_data',
    dateLabel: '电表数据',
    status: 0,
    data: [
      {fieldName: 'electricity_flow', fieldLabel: '电流流量', unit: 'A'},
      {fieldName: 'voltage', fieldLabel: '电压', unit: 'V'},
    ]
  },
])
</script>

<template>
  <Waterfall :list="list">
    <template #default="{ item, url, index }">
      <el-card>
        <template #header>
          <div class="card-header">
            <span> {{ item.dateLabel }}</span>
          </div>
        </template>
        <div v-for="gItem in item.data" :key="gItem" class="card">
          <!--        <LazyImg class="card_img" :url="url" />-->

          <span>{{gItem.fieldLabel}}：</span>
          <span>{{gItem.unit}}</span>
        </div>
        <div class="buttom" >
          <buttom-opera :data="item" />
        </div>
      </el-card>
    </template>
  </Waterfall>
</template>


<style scoped lang="scss">
.card-header {
  background-color: #f4f7fa;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: bold;
}

.card-header span {
  display: block;
  margin-bottom: 5px;
  color: #333;
}
.card {
  margin: 6px 0;
  border: 1px solid #b5efed;
  border-radius: 6px;
  padding: 4px 10px ;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #f9f9f9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;

  &:hover {
    background-color: #f0f8ff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

.card span {
  display: flex;
  color: #666;
  line-height: 1.5;
}

.card span:first-child {
  font-weight: bold;
  color: #333;
}

.card span:last-child {
  color: #1a73e8;
}
.buttom {
  margin-top: 10px;
  border-top: 1.5px solid #e9e9ec;
}

</style>

下载：

npm install vue-waterfall-plugin-next

示例：

<Waterfall :list="list">
  <!-- v2.6.0之前版本插槽数据获取 -->
  <!-- <template #item="{ item, url, index }"> -->
  <!-- 新版插槽数据获取 -->
  <template #default="{ item, url, index }">
    <div class="card">
      <LazyImg :url="url" />
      <p class="text">这是具体内容</p>
    </div>
  </template>
</Waterfall>

import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
import 'vue-waterfall-plugin-next/dist/style.css'

// 数据
data: {
  list: [
    {
      src: "xxxx.jpg",
      ...
    }
    ...
  ]
}

参考网址： GitHub - heikaimu/vue3-waterfall-plugin: vue3 瀑布流插件，支持 PC 和移动端，支持 animate 的所有动画效果，支持图片懒加载