При использовании стилей в Vuejs можно указать строку подписи? - PullRequest
Новая
       14

При использовании стилей в Vuejs можно указать строку подписи?

0 голосов
/ 10 марта 2019

Когда вы используете стиль в Vuejs, он включает строку data-v-XXX с определенной подписью. 

<template>
  <div>
    <h1>this is a title</h1>
    <p>this is a paragraph</p>
  </div>
</template>

<style scoped>
h1 {
  color: red;
  background-color: black;
}

p {
  font-style: italic;
}
</style>

Вы получаете сгенерированный стиль 

h1[data-v-3fe14d6d] {
    color: red;
    background-color: black;
}

p[data-v-3fe14d6d] {
    font-style: italic;
}

IsЕсть ли способ предоставить строку подписи, которая вводится в строку data-v?Таким образом, вы можете иметь data-v-MyCustomControlName.

Как упомянуто ниже, основная причина, по которой я собираюсь предоставить конкретную строку, заключается в том, чтобы разрешить инъекции в стиле третьих лиц.

Хотя значения data-v-XXXX могут использоваться для этой цели и гарантируют отсутствие коллизий, с сгенерированными числами работать неудобно.

Возможно, мне следует изменить вопрос на «Каков наилучший способ использования Nuxtjs для минимизации коллизий стилей и при максимальной поддержке стилей сторонних разработчиков?»

Ответы [ 2 ]

0 голосов
/ 10 марта 2019

Как упомянуто в комментариях выше, я могу придумать 3 способа решения этой проблемы вручную, если предоставление строки подписи невозможно.

Недостатком всего этого является то, что они выполняются вручную.Кроме того, Vue по-прежнему будет иметь некоторые коллизии стилей, если вы выберете имя, которое используется в другом коде.Например, если вы используете имя класса «обертка», ваш класс все равно будет конфликтовать с любым другим классом «обертки».Таким образом, именованные классы по-прежнему должны быть уникальными.

  1. Использовать оболочку с именованным классом.Это позволит ориентироваться на детей и по-прежнему иметь ограниченные стили.Это самое простое, но и наиболее вероятное столкновение. 
<template>
  <div class="class-for-scoped-styles">
    <h1>this is a title</h1>
    <p>this is a paragraph</p>
  </div>
</template>

<style>
.class-for-scoped-styles h1 {
  color: red;
  background-color: black;
}

.class-for-scoped-styles p {
  font-style: italic;
}
</style>
Добавление имен областей в каждый тег.Чуть менее вероятно возникновение проблем столкновения. 
<template>
  <div>
    <h1 class="class-for-scoped-styles">this is a title</h1>
    <p class="class-for-scoped-styles">this is a paragraph</p>
  </div>
</template>

<style>
h1.class-for-scoped-styles {
  color: red;
  background-color: black;
}

p.class-for-scoped-styles {
  font-style: italic;
}
</style>
Используйте именованный префикс и именованные классы для каждого тега.Я считаю, что это вручную делать то, что с помощью модулей CSS - но делать это вручную.Это наименее вероятно, чтобы вызвать коллизии, но также является наиболее многословным и самым легким для внедрения ошибок ручного кодирования. 
<template>
  <div>
    <h1 class="class-for-scoped-styles blog-entry-title">this is a title</h1>
    <p class="class-for-scoped-styles blog-entry-description">this is a paragraph</p>
  </div>
</template>

<style>
.class-for-scoped-styles.blog-entry-title {
  color: red;
  background-color: black;
}

.class-for-scoped-styles.blog-entry-description {
  font-style: italic;
}
</style>

Все это позволило бы использовать стили с заданной областью и все же позволить легкую вставку темы или сторонних разработчиков.Пользовательские стили.Я все еще изучаю использование модулей CSS, и в конечном итоге это может быть лучшим решением.

0 голосов
/ 10 марта 2019

Короче, это невозможно.

...