如何用值移動元素 X 和 Y

Question

我的網站中有一個元素塊 class = "relative"，我還有另一個元素 class="absolute"。

我將絕對元素的大小與高度和寬度綁定，但我想綁定 X 和 Y 軸。

let size = 50; //pixel
let x = 150; //pixel
let y = 150; //pixel

          <div class="relative">
             <span class="relative block">
                <span class="inline-block w-full h-full" />
                <div class="absolute inset-0 overflow-hidden z-0 visible">
                  <div class="absolute inset-0 overflow-hidden z-0 visible">
                    <canvas id="pdf_canvas" ref="pdfViewer"></canvas>
                  </div>
                  <div class="absolute top-0 left-0">
                    <div
                      id="frame"
                      class="border-dashed border-4 border-indigo-500 active:z-auto"
                      :style="{ width: size + 'px', height: size + 'px'}"         // It work
                      :class="{ top : y + 'px', left : x + 'px' }"         // Here
                    >
                      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAA8CAYAAACtrX6oAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AYht+mSqVWHOwg0iFDdbIgKuKoVShChVArtOpgcukfNDEkKS6OgmvBwZ/FqoOLs64OroIg+APi5uak6CIlfpcUWsR4x3EP733vy913gNCoMs3qGgM03TYzqaSYy6+IoVeEEUMvzYjMLGNWktLwHV/3CPD9LsGz/Ov+HH1qwWJAQCSeYYZpE68TT23aBud94igryyrxOfGoSRckfuS64vEb55LLAs+MmtnMHHGUWCx1sNLBrGxqxJPEcVXTKV/Ieaxy3uKsVWusdU/+wkhBX17iOq0YUljAIiSIUFBDBVXYSNCuk2IhQ+dJH/+Q65fIpZCrAkaOeWxAg+z6wf/gd2+t4sS4lxRJAt0vjvMxDIR2gWbdcb6PHad5AgSfgSu97d9oANOfpNfbWvwI6N8GLq7bmrIHXO4Ag0+GbMquFKQlFIvA+xl9Ux4YuAXCq17fWuc4fQCy1Kv0DXBwCIyUKHvN5909nX37t6bVvx8hCHKGQhND5wAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+UKHAsNE+dnAGUAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVR42u3BAQ0AAADCoPdPbQ8HFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPBscLwAAft69nkAAAAASUVORK5CYII="
                        class="absolute cursor-move"
                      />
                    </div> // This is an absolute element that I want to bind X and Y.
                  </div>
                </div>
              </span>
            </div>

想象一下，我在背景中有一個空白區域，我有一個大小為 50 像素的藍色矩形，我希望它移動到 X 和 Y 綁定它的任何位置。 （實際上我想把它拖到我想要的地方，並將它與 X 和 Y 綁定。）

Answer 1

您可以使用 Tailwind 的方括號表示法以任意值即時生成 class：

<div class="top-[117px]">
  <!-- ... -->
</div>

在您的情況下，生成的代碼將如下所示：

<div :class="'top-[' + y + 'px] left-[' + x + 'px]'">
  <!-- ... -->
</div>

參考： https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values