Vue 中使用 Flickr 对齐布局的组件 - vue-justified-layout

Vue 中使用 Flickr 对齐布局的组件 - vue-justified-layout
插件名称 vue-justified-layout
发布时间 2021年6月10日
插件作者 codekraft-studio

Flickr 的对齐布局模块的 Vue 集成。

下载安装

npm install vue-justified-layout

使用

使用插件安装功能全局注册组件。

import Vue from 'vue'
import VueJustifiedLayout from 'vue-justified-layout'

Vue.use(VueJustifiedLayout)

或者将其导入您的脚本并将其注册为本地组件。

import VueJustifiedLayout from 'vue-justified-layout'

export default {
  name: 'app',
  components: {VueJustifiedLayout},
  data () {
    return {
      images: [{
        width: 250,
        height: 400,
        url: 'https://source.unsplash.com/featured/250x400?green,blue'
      }, {
        width: 300,
        height: 400,
        url: 'https://source.unsplash.com/featured/300x400?green,blue'
      }]
    }
  }
}

(可选)为图像添加一些样式。

.justified-container {}
.justified-item {
  img {
    max-width: 100%;
  }
}

然后使用它来显示具有良好对齐布局的图像数组。

<VueJustifiedLayout :items="images" v-slot="{ item }">
  <img :src="item.url" />
</VueJustifiedLayout>

或者对于vue < 2.6.0使用旧合成器的版本。

<VueJustifiedLayout :items="images">
  <template slot-scope="{ item }">
    <img :src="item.url" />
  </template>
</VueJustifiedLayout>