Добавить класс в область слота - PullRequest
0 голосов
/ 15 февраля 2019

Я создаю компонент таблицы и хочу, чтобы мои пользователи могли добавлять свои пользовательские <td> благодаря слоту.Итак, у меня есть:

<tbody>
  <tr v-for="(item, key) in items">
    <slot :item=item">
      <td v-for="(header, headerKey) in variableHeaders"
        :class="{
            veryImportantClass: condition > 5,
        }">
        {{item.text}}
      </td>
    </slot>
  </tr>
</tbody>

И я использую этот слот благодаря этому коду:

<my-component
  :headers="headers"
  :items="items">
  <template slot-scope="prop">
    <td :class="{ aClassAddedByAUser: true }" v-for="(header, headerKey) in headers" ...>
      {{ prop.item.text }} with some text
    </td>
  </template>
</my-component>

Проблема в том, что класс veryImportantClass является обязательным для моего компонента, но я быхотел бы не просить моих пользователей вводить его в свои созданные slot (для уменьшения сложности)

Есть ли способ просто добавить этот класс ко всем <td>, заданным моими пользователями благодаря этой области?

1 Ответ

0 голосов
/ 15 февраля 2019

Вы можете использовать хук жизненного цикла mounted(), чтобы добавить класс, используя обычные функции JavaScript.Вот как вы можете безоговорочно добавить его во все ячейки.Если вам нужно только добавить его в некоторые ячейки, настройте его соответствующим образом.

mounted() {
    // wait a tick to ensure all child components have rendered
    this.$nextTick(() => {
        this.$el.querySelectorAll("td")
            .forEach(td => {
                td.classList.add("veryImportantClass");
            }
        }
    }
}

Возможно, вам придется сделать что-то похожее на updated(), если содержимое слота будет меняться.

Примечание: Это предполагает, что родительский элемент вставляет <td> элементы в слот, что не гарантируется.Но так как это может привести к неверному HTML, вы, возможно, согласитесь с этим предположением

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...