时间戳

首页 > 解决方案 > 如何为 ex 之类的按钮组件创建自己的可重用属性。vuetify 的 fab，dark，small，color="primary"，而不在 vue .js 中使用 vuetity

vue.js - 如何为 ex 之类的按钮组件创建自己的可重用属性。vuetify 的 fab，dark，small，color="primary"，而不在 vue .js 中使用 vuetity

问题描述

我创建了一个按钮组件作为可重用组件，我想用我项目中的所有 HTML 按钮替换它。我希望相同的按钮以原色显示，相同的危险，禁用等。相同的按钮用于四舍五入，其中包含所需的 svg 图标，类似于 vuetify。

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

我想将值传递给属性颜色，例如 color="danger" 而不是输入整个 CSS，红色按钮应该反映。我还想知道如何创建诸如 fab、small 等属性，以便我可以为我的 button 设计它们。我正在为我的项目使用顺风 CSS。我尝试创建一个父组件，将上述值作为道具传递并使用样式和类绑定，但似乎没有任何效果。我想知道如何使用按钮的一个示例代码来做到这一点，这将是一个很大的帮助。

按钮组件

 <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>
import {defineComponent, ref, methods} from 'vue' export default defineComponent({ setup() { const primary = ref('bg-blue-500') const error = ref('bg-red-500') return { primary } } })

标签： vue.jsvue-componentvuetify.jstailwind-css

解决方案

推荐阅读