@dx123/gimage

图片大小-自动生成工具

基于：https://picsum.photos

用法

import ImageCenterManager from '@dx123/gImage'
const instance = new ImageCenterManager({})
icmInstance.init({
  <!-- 参数 -->
})

参数

size: number width: number height: number 图片宽高82x82 图片数量：5张

vue3用法示例

<!--
 * @Descripttion: 
 * @Author: xiangjun
 * @Date: 2021-10-21 09:42:04
 * @LastEditors: sueRimn
 * @LastEditTime: 2021-10-21 19:41:28
-->
<template>
  <div>
    <ul>
      <li v-for="item in icmInstance.list" :key="item.id">
        <img :src="item.src" alt/>
      </li>
    </ul>
    <div>{{icmInstance.loading ? '加载中...':'加载完成'}}</div>
    <button @click="()=>icmInstance.search({width: 100, height: 50, size: 10})">重新生成10张：100*50</button>
    <button @click="()=>icmInstance.search({width: 750, height: 250, size: 10})">重新生成10张：750*10</button>
    <button @click="()=>icmInstance.search({width: 1980, height: 450, size: 10})">重新生成10张：1980*450</button>
    <button @click="()=>icmInstance.reset()">清除</button>
  </div>
</template>
<script>
import GImage from "@dx123/gimage";
import { reactive } from "@vue/reactivity";
export default {
  setup() {
    const state = reactive({
      icmInstance: new GImage({})
    });
    state.icmInstance.init({
      width: 500,
      height: 100,
      size: 5
    })
    return {
      icmInstance: state.icmInstance
    };
  },
};
</script>

<style lang="css" scope>
ul,
li {
  list-style: none;
}
ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
</style>