vue3-justified-layout
v0.0.6
Published
vue3-justified-layout
Downloads
219
Maintainers
Readme
vue3-justified-layout
Usage
pnpm add vue3-justified-layout
# or
# yarn install vue3-justified-layout
# npm install vue3-justified-layout
<template>
<div style="width: 400px;border: 1px solid #ccc;min-height: 300px;">
<Vue3JustifiedLayout v-model:list="list" :options="options">
<template #default="{ item }">
<img style="border: 1px solid #ccc" :src="item.url" />
</template>
</Vue3JustifiedLayout>
</div>
<button @click="handleAdd">添加</button>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import Vue3JustifiedLayout from 'vue3-justified-layout'
import 'vue3-justified-layout/dist/style.css'
import type { IJLItem } from '@/components/JustifiedLayout'
import img1 from '@/assets/1.jpeg'
import img2 from '@/assets/2.jpeg'
import img3 from '@/assets/3.jpeg'
import img4 from '@/assets/4.jpeg'
const options = {
targetRowHeight: 120 // 高度
}
const test: IJLItem[] = [
{
url: img1,
width: 800,
height: 572
},
{
url: img2,
width: 6000,
height: 4000
},
{
url: img3,
width: 800,
height: 533
},
{
url: img4,
width: 1000,
height: 1418
}
]
const list = ref([...test])
const handleAdd = () => {
list.value.push(test[Math.floor(Math.random() * 4)])
}
</script>