前端项目经验 —— vue项目中使用vue-masonry插件实现瀑布流
使用该插件会有一定的兼容问题,在之前一个项目中,我在刚开始使用时不会有任何问题,但是后面的一次打包过程中报错,并且找了各种方式还是无法解决,所以无奈只能去掉这个瀑布流方案。
·
npm下载vue-masonry插件:
npm i vue-masonry
在mian.js中引入插件:
import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
// 瀑布流插件
import { VueMasonryPlugin } from "vue-masonry";
const app = createApp(App);
app.use(VueMasonryPlugin);
app.mount("#app");
使用方式:
<script setup>
// 实现随机颜色
const getRandomColor = () => {
var r = Math.floor(Math.random() * 256); // 生成 0~255 之间的随机数
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return `rgb(${r}, ${g}, ${b})`; // 拼接 RGB 字符串
};
</script>
<template>
<div v-masonry class="container">
<div
v-masonry-tile
v-for="(item, index) in 10"
:class="['item']"
:style="{
height: parseInt(Math.random() * 200) + 'px',
background: getRandomColor(),
}"
:key="index"
>
{{ index }}
</div>
</div>
</template>
<style lang="scss" scoped>
.container {
width: 80vw;
box-sizing: border-box;
> .item {
min-height: 80px;
width: 20%;
margin-bottom: 10px;
margin-left: 10px;
}
}
</style>
效果展示:
注意事项:
使用该插件会有一定的兼容问题,在之前一个项目中,我在刚开始使用时不会有任何问题,但是后面的一次打包过程中报错,并且找了各种方式还是无法解决,所以无奈只能去掉这个瀑布流方案。
更多推荐
已为社区贡献1条内容
所有评论(0)