在Vue3项目中使用vue-waterfall-plugin-next插件,可以方便地实现瀑布流布局,支持PC和移动端自适应,以及多种动画效果和图片懒加载功能。以下是详细的步骤和注意事项: 1. 安装插件 首先,你需要在Vue3项目中安装vue-waterfall-plugin-next插件。可以通过npm或yarn进行安装: bash npm install vue-waterfall-plugin-next ...
WaterFall组件向外暴露了一个renderer函数,可以直接调用,该方法可以主动重绘列表,使用其他懒加载图片组件的回调函数里可以调用这个renderer来重绘。 动画样式 首先需要明白,这里的动画指的是数据插入时的动画,比如第一次加载数据已经加载更多的时候的一个插入动画。想要使用动画必须引入animate.css或者定义一个动画className ...
vue create my-waterfall #创建vue3/cli项目 cd my-waterfall #进入项目目录 yarn add element-plus #安装element-plus yarn add vue-waterfall-plugin-next #安装瀑布流组件 使用组件 <template> <Waterfall :list="list" :breakpoints="{1200:{rowPerView:4,} ,800:{rowPerView:3,},500: {rowPerView: ...
vue文件中引入使用 import { RouterLink } from'vue-router'import { Waterfall } from'vue-waterfall-plugin-next'import'vue-waterfall-plugin-next/dist/style.css'import { ref } from'vue'import { readCategoryTree } from'@/api/ele'import { useAppStore } from'@/stores/app'interface ICategoryTree ...
npm install vue-waterfall-plugin-next 使用 import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next' import 'vue-waterfall-plugin-next/dist/style.css' // 数据 data: { list: [ { src: "xxxx.jpg", ... } ... ] } <Waterfall :list="list"> <!-- v2.6.0之前版本插槽数据获取 -...
The following actions use a deprecated Node.js version and will be forced to run on node20: actions/upload-artifact@v3. For more info: https://github.blog/changelog/2024-03-07-github-actions-all-actions-will-run-on-node20-instead-of-node16-by-default/ Show more Deprecation notice: v...
maxAsyncRequests: 1, // 最大异步请求数， 默认1 maxInitialRequests: 1, // 最大初始化请求书，默认1 reuseExistingChunk: true // 可设置是否重用该chunk（查看源码没有发现默认值） } } }},compilation.mainTemplate.applyPluginsWaterfall is not a function 解决方案： yarn add ...
2. 方式一：使用 prerender-spa-plugin 插件获得 SSR 的效果。2.1 说明 插件地址：prerender-spa-plugin 严格上来说，此种实现方式并非叫做 SSR，而是预渲染。不过效果上是一样的，甚至某种程度上来说可能要比 SSR 更好。相比官方提供的 SSR 繁琐配置，prerender 配置更简单快捷，如无特殊要求只需在 webpack 中...
vue-waterfall - Vue.js 的瀑布布局组件。vueisotope - 用于同位素过滤器和排序神奇布局的 Vue 组件。vue-grid-layout - 适用于 Vue.js 的可拖动和可调整大小的网格布局。vue-drag-zone - Vue.js(2.x)的拖动区域组件。vue-masonry - 用于砌体块布局的 Vue.js 指令。vue-fraction-grid - 用于 Vue.js 的...
import 'vue-waterfall-plugin-next/dist/style.css'; import ControllerForm from './Form.vue'; import Github from './Github.vue'; @@ -87,9 +106,30 @@ function useSlideBar() { }; } function usePreview() { const previewVisible = ref(false); const previewTitle = ref(''); const previ...