代码之家 › 专栏 › 技术社区 › domjanzsoo

顺风:无间隙的动态网格柱

alpine.js css-grid tailwind-css css javascript

domjanzsoo · 技术社区 · 2 年前

文档对其中的所有网格选项都不太清楚。

我在alpinejs中有一个网格模板,用顺风对其进行样式设置:

<div x-show="multiple" class="w-auto grid mt-3" :style="`grid-template-columns: 
 repeat(${images.length < 6 ? images.length : 6}, minmax(0, 1fr))`">
    <template x-for="image in images" :key="image.name">
        <div
            x-data="{
                imgUrl: null
            }"
            x-init="() => {
                let reader = new FileReader();

                reader.onload = e => {
                    imgUrl = e.target.result;
                };

                console.log('image');
                console.log(image);

                reader.readAsDataURL(image);
            }"
        >
        <img :src="imgUrl" alt="image.name" class="h-24 w-auto">
        </div>
    </template>
</div>

我面临的问题是,网格容器似乎保持了其父级的全宽,网格元素之间存在巨大的间隙:

我想要的是每张图片都能很好地在左边对齐。

此处为截图

<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

<style>
[x-cloak] { display: none !important }
</style>

<div
    x-data="{
        inputId: 'blabla',
        selectedFileName: '',
        fileInput: null,
        multiple: true,
        images: [],
        imgCols: 0
    }"
    x-init="() => {
        fileInput = document.getElementById(inputId);
    }"
    class="w-full"
    x-on:drop="$event => {
        $event.preventDefault();
        const dataTransfer = new DataTransfer();

        if (multiple) {
            Array.from(fileInput.files).forEach(file => {
            dataTransfer.items.add(file);
            });
        }

        Array.from($event.dataTransfer.files).forEach(file => {
            dataTransfer.items.add(file);
        });

        fileInput.files = dataTransfer.files;

        if (!multiple) {
            selectedFileName = $event.dataTransfer.files[0].name;
        } else {
            images = Array.from(fileInput.files);
        }

        fileInput.dispatchEvent(new Event('change', { bubbles: true }));
    }"
    x-on:dragover.prevent="() => console.log('drag over prevented')"
>
    <label class="flex justify-center w-full h-32 px-4 transition bg-white border-2 border-gray-300 border-dashed rounded-md appearance-none cursor-pointer hover:border-gray-400 focus:outline-none"
    >
        <span class="flex items-center space-x-2">
            <x-icon name="upload" />
            <span class="font-medium text-gray-600">
                drop or
                <span class="text-blue-600 underline">browse</span>
            </span>
        </span>
        <input id="blabla" type="file" name="file_upload" >
    </label>
    <div x-cloak class="w-full text-center" x-show="selectedFileName">
        files selected: <span x-text="selectedFileName"></span>
    </div>
    <div x-show="multiple" class="w-auto grid mt-3" :style="`grid-template-columns: repeat(${images.length < 6 ? images.length : 6}, minmax(0, 1fr))`">
        <template x-for="image in images" :key="image.name">
            <div
                x-data="{
                    imgUrl: null
                }"
                x-init="() => {
                    let reader = new FileReader();

                    reader.onload = e => {
                        imgUrl = e.target.result;
                    };

                    reader.readAsDataURL(image);
                }"
            >
            <img :src="imgUrl" alt="image.name" class="h-24 w-auto">
            </div>
        </template>
    </div>
</div>

谢谢

1 回复 | 直到 2 年前

Wongjn 2 年前

空白是由网格轨道列比它们包含的图像宽造成的。这是由于 minmax(0, 1fr) 内部值 repeat() 此值表示允许网格列轨道的宽度增加到1“份额”的空间。

为了防止这种行为,您可以考虑在 重复 喜欢 max-content :

<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

<style>
  [x-cloak] {
    display: none !important;
  }
</style>

<div
  x-data="{
    inputId: 'blabla',
    selectedFileName: '',
    fileInput: null,
    multiple: true,
    images: [],
    imgCols: 0
  }"
  x-init="() => {
    fileInput = document.getElementById(inputId);
  }"
  class="w-full"
  x-on:drop="$event => {
    $event.preventDefault();
    const dataTransfer = new DataTransfer();

    if (multiple) {
      Array.from(fileInput.files).forEach(file => {
        dataTransfer.items.add(file);
      });
    }

    Array.from($event.dataTransfer.files).forEach(file => {
      dataTransfer.items.add(file);
    });

    fileInput.files = dataTransfer.files;

    if (!multiple) {
        selectedFileName = $event.dataTransfer.files[0].name;
    } else {
        images = Array.from(fileInput.files);
    }

    fileInput.dispatchEvent(new Event('change', { bubbles: true }));
  }"
  x-on:dragover.prevent="() => console.log('drag over prevented')"
>
  <label
    class="flex justify-center w-full h-32 px-4 transition bg-white border-2 border-gray-300 border-dashed rounded-md appearance-none cursor-pointer hover:border-gray-400 focus:outline-none"
  >
    <span class="flex items-center space-x-2">
      <x-icon name="upload" />
      <span class="font-medium text-gray-600">
        drop or
        <span class="text-blue-600 underline">browse</span>
      </span>
    </span>
    <input id="blabla" type="file" name="file_upload" />
  </label>
  <div x-cloak class="w-full text-center" x-show="selectedFileName">
    files selected: <span x-text="selectedFileName"></span>
  </div>
  <div
    x-show="multiple"
    class="w-auto grid mt-3"
    :style="`grid-template-columns: repeat(${images.length < 6 ? images.length : 6}, max-content)`"
  >
    <template x-for="image in images" :key="image.name">
      <div
        x-data="{
          imgUrl: null
        }"
        x-init="() => {
          let reader = new FileReader();

          reader.onload = e => {
            imgUrl = e.target.result;
          };

          reader.readAsDataURL(image);
        }"
      >
        <img :src="imgUrl" alt="image.name" class="h-24 w-auto" />
      </div>
    </template>
  </div>
</div>