Как создать компонент vue, в котором через пропсы можно менять css свойства, как во фреймворках для vue. Например есть компонент Button, ему в пропсах можно указать width='200' и кнопка станет такой же ширины. Здесь вроде бы все просто и понятно, возьми да через реф поменяй свойство style.width, но вот у них это реализовано как то по другому, там свойство style не меняется и мне вот интересно как это реализовано у них. Подумал в сторону изменения css-переменных через js, но может быть есть еще какой то вариант реализации?
1 ответ
Совету читать документацию вдоль и поперек :)
Вот, в документации по вашему вопросу найдете кучу информации
// AppButton.vue
export default {
props: ['width']
}
<!-- Home.vue -->
<app-button width="200">Button text</app-button>
<!-- AppButton.vue -->
<button :style="width">
<slot />
</button>