在Vue3项目中使用vue-waterfall-plugin-next插件,可以方便地实现瀑布流布局,支持PC和移动端自适应,以及多种动画效果和图片懒加载功能。以下是详细的步骤和注意事项: 1. 安装插件 首先,你需要在Vue3项目中安装vue-waterfall-plugin-next插件。可以通过npm或yarn进行安装: bash npm install
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之前版本插槽数据获取 -...
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: ...
npm install vue-waterfall-plugin-next 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...
2 2 "name": "vue-waterfall-plugin-next", 3 - "version": "2.6.4", 3 + "version": "2.6.5", 4 4 "license": "UNLICENSED", 5 5 "author": "Yaowen Liu <576079353@qq.com>", 6 6 "main": "dist/my-lib.umd.js", 0 commit comments Comments0 (0) Please sign in to ...
constuseItemHeight = () => {// 初始化item高度列表itemsHeight = []// 获取 item 元素constitemElements = [...document.getElementsByClassName('hm-waterfall-item')]// 获取item高度itemElements.forEach((itemEl) => { itemsHeight.push(itemEl.offsetHeight) ...
但是这样项目中并不能知道svg图标的路径,我们需要使用vite-plugin-svg-icons插件来指定查找路径。 在vite.config.js中配置svg相关内容 import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'import{join}from"path"import{createSvgIconsPlugin}from"vite-plugin-svg-icons"// https://vitejs.dev/config...
a waterfall plugin for Vue 3. 一个 vue 3 的自适应瀑布流组件。. Contribute to gk-shi/v3-waterfall development by creating an account on GitHub.
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...
waterfall 组件 (复杂) item 遮罩层只有 PC 端显示 class="opacity-0 group-hover:opacity-100 hidden xl:block" 作用域插槽 <m-waterfall ...><templatev-slot="{ _item, _width }">// _item, _width 是父组件传出来的<itemVue:data="_item":width="_width"@click="onToPins"/></template></m...