Блог

Я создал компонент кнопки в качестве многоразового компонента, который я хочу заменить всеми HTML-кнопками в своем проекте. Я хочу, чтобы одна и та же кнопка отображалась в основном цвете, та же в опасности, отключена и т. Д. Та же кнопка для округления с нужными значками svg внутри, что-то похожее на vuetify.

 <v-btn
  class="mx-2"
  fab
  dark
  small
  color="primary"
>
 

Я хочу передать значение цвету свойства, например цвет=» опасность», а не вводить весь CSS, и красная кнопка должна отражать. Я также хочу знать, как создавать атрибуты, такие как fab, small и т. Д., Чтобы я мог создавать их для своей кнопки . Я использую CSS tailwind для своего проекта. Я попытался создать родительский компонент, который передавал вышеуказанные значения в качестве реквизитов и использовал привязку стиля и класса, но, похоже, ничего не работает. Я хочу знать, как это сделать с помощью всего одного примера кода для кнопки, это было бы большим подспорьем.

Компонент кнопки

  <template>
<button :type="type" :class="primary" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring focus:ring-gray-300 disabled:opacity-25 transition">
    <slot></slot>
</button>
 

импорт { defineComponent, ссылка , методы} из ‘vue’

экспорт defineComponent по умолчанию({
настройка() {

const primary = ссылка(‘bg-синий-500’)
ошибка const = ссылка(‘bg-red-500’)
возвращение{
первичный
}
}
})