全部 vue3222C程序设计111瀑布流111vue生命周期111paths111windicss111时间处理111joi111图片懒加载111我的世界111ts111markdown111dayjs111koa111饥荒111nginx111v3-瀑布流组件封装 2025-03-11 10:41:41记录一下封装的瀑布流组件 ``` <template> <div class="relative" ref="containerRef" :style="{ height: `${contentHeight}px` }"> <div class="item absolute top-0 left-0 transform" v-for="item, index in props.list" :key="index" :style="{ width: `${columnWidth}px` }" > <slot name059vue3前端v3自定义指令-图片懒加载 2025-03-11 10:38:14封装代码: ``` export const useImgLazyLoad = () => { // v-lazy 指令 const vLazy = { // 元素加载完成时 mounted mounted: (el: HTMLImageElement) => { el.src = 'https://i.gifer.com/ZKZg.gif' // 加载占位符 el.addEventListener('error', () => { el.src = 'https://img.ixintu.com/download/jpg/202056vue3前端 / 1鲁ICP备2020040502号-2