kotcich
@kotcich
Я скучный.

Каков наилучший способ v-bind для :hover :active и тд, и можно ли вообще так сделать?

Можно спокойно добавить стили html тегу с помощью :style
let css = {width: '100%', borderRadius: '10px'}
<input :style="css" />

Но что мне делать, если я хочу так же указать стили для :hover, -autofill, :not:(:last-of-type) и тд?
  • Вопрос задан
  • 69 просмотров
Решения вопроса 1
Aetae
@Aetae Куратор тега Vue.js
Тлен
Вопрос по большому счёту не относится к vue.

Решения:
1. Использовать класс-модификатор, который порасит как надо.
<template>
  <input class="hover--red"/>
</template>

<style>
.hover--red:hover {
  color: #f00
}
</style>

2. Использовать css (не путать с scss) переменные.
<script setup>
// ...
const hoverColor = '#f00'
</script>

<template>
  <input :style="{'--hover-color': hoverColor}"/>
</template>

<style>
input:hover {
  color: var(--hover-color)
}
</style>


...upd: совсем забыл про такую фичу vue:
3. Если стили лежат в sfc можно использовать переменные через v-bind в <style>:
<script setup>
// ...
const hoverColor = '#f00'
</script>

<template>
  <input />
</template>

<style>
input:hover {
  color: v-bind(hoverColor)
}
</style>

А забыл я про неё потому, что категорически против такого смешения кода и стилей. Но я не могу вам запретить.:)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы