Question

我正在使用vue-grid-layout：https://github.com/jbaysolutions/vue-grid-layout

它们使用占位符项来显示将图块拖动到的位置。默认情况下为红色。通过在vue组件的样式块中使用/deep/覆盖css类，可以将其样式化为其他颜色。现在，我需要添加位于拖动占位符中间的文本。有没有办法我可以定位绝对只知道CSS类名称的html元素？没有ID。

我想避免将库的代码库包括在内，并尽可能对其进行编辑。

编辑：看起来我可以像下面那样使用伪元素，但是有没有办法动态添加文本？ Attr（）无法使用，因为我无权访问该元素以在其上添加属性。 Using CSS to insert text

.OwnerJoe:before {
  content: "Joe's Task:";
}

EDIT2：

<grid-layout :layout.sync="coords"
                       :col-num="4"
                       :row-height="150"
                       :is-draggable="true"
                       :is-resizable="true"
                       :is-mirrored="false"
                       :auto-size="true"
                       :use-css-transforms="true"
                       @layout-updated="autoSave"
          >
              <grid-item class="exit"
                         v-for="coord in coords"
                         :i="coord.i"
                         :x="coord.x"
                         :y="coord.y"
                         :w="coord.w"
                         :h="coord.h">
                  <my-tile-component /> 
              </grid-item>
          </grid-layout>

这就是我的仪表板的外观。在他们的src代码中，他们有： https://github.com/jbaysolutions/vue-grid-layout/blob/master/src/components/GridLayout.vue#L4

似乎他们使用一个占位符项并根据要拖动v-for中的gridItem转换其位置。以下是我如何覆盖该占位符项目以使其具有蓝色背景的方法。

 <style scoped>
        /deep/.vue-grid-item.vue-grid-placeholder {
            background-color:blue;
        }
    </style>

将元素定位到第三方元素

0 个答案: