图片预览

代码事例

<template>
	<fk-row v-for="el in imgs" :key="el">
        <img v-lazy="el" />
    </fk-row>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { vLazy } from '@erp/common';

const imgs = reactive([
	'//static.erp.91spyc.com/default/1EzWlF4f1I5umcaik9LU1c86zlH9ZNjIeRT99yfY.png',
	'//test.img.fukerp.com/default/FLIrNHVfnvjvOXN40Rm1l5dugEwsjUDsxEDW3kIP.jpg',
	'//test.img.fukerp.com/default/j44G9LTLBxBkNlLu84HOSGF6qgzQLjg7kK3WuuVg.jpg',
    '//static.erp.91spyc.com/default/1EzWlF4f1I5umcaik9LU1c86zlH9ZNjIeRT99yfY.png',
	'//test.img.fukerp.com/default/FLIrNHVfnvjvOXN40Rm1l5dugEwsjUDsxEDW3kIP.jpg',
	'//test.img.fukerp.com/default/j44G9LTLBxBkNlLu84HOSGF6qgzQLjg7kK3WuuVg.jpg',
    '//static.erp.91spyc.com/default/1EzWlF4f1I5umcaik9LU1c86zlH9ZNjIeRT99yfY.png',
	'//test.img.fukerp.com/default/FLIrNHVfnvjvOXN40Rm1l5dugEwsjUDsxEDW3kIP.jpg',
	'//test.img.fukerp.com/default/j44G9LTLBxBkNlLu84HOSGF6qgzQLjg7kK3WuuVg.jpg',
    '//static.erp.91spyc.com/default/1EzWlF4f1I5umcaik9LU1c86zlH9ZNjIeRT99yfY.png',
	'//test.img.fukerp.com/default/FLIrNHVfnvjvOXN40Rm1l5dugEwsjUDsxEDW3kIP.jpg',
	'//test.img.fukerp.com/default/j44G9LTLBxBkNlLu84HOSGF6qgzQLjg7kK3WuuVg.jpg',
    '//static.erp.91spyc.com/default/1EzWlF4f1I5umcaik9LU1c86zlH9ZNjIeRT99yfY.png',
	'//test.img.fukerp.com/default/FLIrNHVfnvjvOXN40Rm1l5dugEwsjUDsxEDW3kIP.jpg',
	'//test.img.fukerp.com/default/j44G9LTLBxBkNlLu84HOSGF6qgzQLjg7kK3WuuVg.jpg',
]);
</script>

<style lang="less" scoped>
img {
    width: 200px;
    margin-bottom: 10px;
}
</style>