Блог

Главная - Вопросы по программированию - как удалить добавленные по умолчанию классы из компонентов quasar vue?

как удалить добавленные по умолчанию классы из компонентов quasar vue?

#javascript #jquery #quasar

Вопрос:

В моем проекте quasar я использую компонент q-option-group. когда я проверил его в инструментах разработки, он показывает, что по умолчанию добавлен один класс q-gutter-x-sm. потому что этот класс добавляет дополнительное пустое пространство в правой части div. Поэтому я хочу избавиться от этого занятия. Как я могу этого достичь?

мой код таков:

 <div class="col col-12">
   <q-option-group
     v-model="selectedFeature"
     :options="featureOptions"
     inline
     type="checkbox"
     color="primary"
     class="margin-none"
    />
 </div>

он отображается как:

 <div class="margin-none q-option-group q-gutter-x-sm q-option-group--inline" >
   all options
</div>

поэтому он добавляет класс q-gutter-x-sm, который я хочу удалить. Как это сделать?

Комментарии:

1. Стиль может зависеть от родительского элемента. См. Документы по Квазару: Сеточный желоб

2. Я нигде не применял q-gutter в коде. И когда я удалил «q-gutter-x-sm» в инструментах разработки, он работает так, как ожидалось. Поэтому я хочу удалить этот класс из своего кода.

3. Вы можете посмотреть примеры квазаров для группы q-опций . Если желоба там нет, он, вероятно, взят откуда-то из вашего кода. Если вам все равно нужен обходной путь, вы также можете добавить CSS с областью действия, который переопределяет отступы/поля, как вы хотите.

4. Спасибо @PeterKrebs за столь быстрый ответ. Но дело не в полях и дополнениях.

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

Ответ №1:

Чтобы решить проблему с пробелом справа, я использовал следующий код вместо q-option-group.

 <div class="row">
   <div
    class="col col-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"
    v-for="option in featureOptions"
    :key="option.value"
   >
   <q-checkbox
     v-model="selectedFeature"
     :val="option.value"
     :label="option.label"
   />
  </div>
</div>

Но я не мог понять, как удалить этот класс. Так что, если вы знаете ответ, пожалуйста, поделитесь.

Метки: