您现在的位置是:首页 > 正文

Vue Nuxt.js + bootstrap + masonry 实现瀑布流

2024-04-01 03:43:04阅读 2

Vue 下实现瀑布流的插件有很多,但是总是有这样那样的缺点,今天找到一款vue-masonry,可以完美的结合Nuxt.js。

  1. 安装

    yarn add vue-masonry

  2. Nuxt根目录下有个plugins文件夹,创建vue-masonry.js文件

    写入下面的内容

    import Vue from 'vue'
    import {
         VueMasonryPlugin} from 'vue-masonry'
    
    Vue.use(VueMasonryPlugin)
    
  3. 在nuxt.config.js文件中添加下面内容

    plugins: [
    	{
          src: '~/plugins/vue-masonry', ssr: false }
    ]
    
  4. 使用

官方给出的使用方式是这样的
HTML:

<no-ssr>
      <div v-masonry transition-duration="3s" item-selector=".item" class="masonry-container">
        <div v-masonry-tile class="item" :key="index" v-for="(item, index) in blocks">
          <p>{
  {item}} - {
  {index}}</p>
        </div<

网站文章

  • vue3.x路由跳转useRouter执行后undefined问题 setup

    useRouter执行一定要放在setup方法内的顶部或者其他位置,不能放在下面setup的函数里面执行(方法内定义的其他函数),否则作用域改变useRouter执行是undefined。import...

    2024-04-01 03:42:58
  • linux安装android NDK

    Error:Execution failed for task ':app:compileDebugNdk'.&gt; NDK not configured.  Download the NDK fr...

    2024-04-01 03:42:51
  • 守护线程

     在Java中有两类线程:User Thread(用户线程)、Daemon Thread(守护线程)。用户线程是指用户自定义创建的线程,主线程停止,用户线程不会停止,只要当前JVM实例中尚存在任何一个...

    2024-04-01 03:42:45
  •  新手学习嵌入式需要掌握的几点知识点

    新手学习嵌入式需要掌握的几点知识点

    从事嵌入式开发十年了,有些感想写出来,一则鞭策自己,让自己看到自己的不足,认清以后的发展方向,二则深知很多朋友会像我当初一样,为不知道储备什么知识而苦恼,所以写点东西给这些朋友们提供参考。一些浅见。这...

    2024-04-01 03:42:14
  • 使用NAFNet进行图像去模糊: Python入门指南

    使用NAFNet进行图像去模糊: Python入门指南

    图像去模糊是计算机视觉领域的一个激动人心的研究方向,它有广泛的实际应用,从修复旧照片到医学成像。尽管这里展示的是一个简化的版本,但它为读者提供了一个如何使用深度学习技术进行图像去模糊的基本概念。为了训...

    2024-04-01 03:42:09
  • centos6.5 安装redis3.0.7

    centos6.5 安装redis3.0.7

    2019独角兽企业重金招聘Python工程师标准&gt;&gt;&gt; ...

    2024-04-01 03:42:03
  • 数据分析技能树

    数据分析技能树

    2024-04-01 03:41:35
  • 裸机环境实现多任务调度(例程及源码)

    无RTOS(裸机环境)下实现分时调度法,非常适用于单片机环境下的一般应用场景。 RTOS优点不用多说了,但对于一些简单的业务需求,移植一个操作系统又显得非常麻烦,且非常占用系统资源。 通常的做法是在一...

    2024-04-01 03:41:27
  • ListIterator系列表迭代器演示

    Iterator和ListIterator主要区别有:一、ListIterator有add()方法,可以向List中添加对象,而Iterator不能。二、ListIterator和Iterator都有...

    2024-04-01 03:41:19
  • Android多媒体技术:使用MediaPlayer实现音频与视频播放

    本文介绍了如何使用Android的多媒体技术中的MediaPlayer类来实现音频和视频的播放。在Android应用程序开发中,多媒体播放是一个常见的需求,而Android提供了许多内置的类和API来...

    2024-04-01 03:40:39