Я использую vue-grid-layout: https://github.com/jbaysolutions/vue-grid-layout
Они используют элемент-заполнитель, чтобы показать место перетаскивания плитки.По умолчанию это красный.Я смог стилизовать его под другой цвет, переопределив класс css, используя /deep/ в блоке стилей моего компонента vue.Теперь мне нужно добавить текст, который расположен в середине заполнителя перетаскивания.Есть ли способ, которым я могу позиционировать абсолютный элемент HTML, который я знаю только имя класса CSS?У него нет идентификатора.
Я бы хотел избежать включения базы кода библиотеки и, если возможно, редактировать ее.
РЕДАКТИРОВАТЬ: похоже, я могу использовать псевдоэлемент, как показано ниже, но есть ли способ добавить в текст динамически?Attr () не будет работать, потому что у меня нет доступа к элементу, чтобы добавить к нему атрибут. Использование CSS для вставки текста
.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
Похоже, они используют один элемент-заполнитель и переводят его положение в зависимости от того, какой gridItem в v-for перетаскивается.Ниже показано, как я переопределил этот элемент-заполнитель, чтобы иметь синий фон.
<style scoped>
/deep/.vue-grid-item.vue-grid-placeholder {
background-color:blue;
}
</style>