Question

目前，我正在如下所示的html中设置按钮的道具。但是，如果我添加了一堆道具，它会变得杂乱无章，除非复制所有html，否则我无法真正重用确切的按钮。是否可以将fab和flat放在CSS类中？不使用主题？

<v-btn :flat="selectedUser !== user.id" :key="user.id" depressed fab flat round>
      <h4> {{user.name}} </h4> 
</v-btn>

Answer 1

很显然，您可以分解vuetify.css并以自己的风格完成工作（双关语意）。但是，在触摸CSS文件之前，您必须考虑一些更好的方法。

数字1，在btns中查找相似之处，并创建更多默认情况下具有指定道具的组件。像Component（Flab.vue）

....
› d:\git\jomi.com.v4\src\server\app.js
› d:\git\jomi.com.v4\src\server\controllers\accessRuleController.js
  - D:\git\jomi.com.v4\src\server\controllers\accessRuleController.js 
   (d:\git\jomi.com.v4\src\server\controllers\accessRuleController.js)
....

我个人不建议这样做，因为在较大的应用程序中，您可能最终会得到很多只有btns的组件

数字2，使用指令（强烈建议）。 Vue和其他一些知名框架为组件和dom元素提供了指令，可根据需要自定义它们。如果您不熟悉vue（new2vue），请允许我以最简单的方式向您解释。

基本上，您可以为任何元素（Dom或Vuetify或Components）设置一个属性（指令），然后在将该元素插入dom之前，vue会调用一个函数供您根据需要操纵该元素。现在来看一些代码。

<template>
<v-btn
 flat
 fab>
    {{btnName}}
</v-btn>
</template>

它可能看起来很复杂，但请相信我，它将使您的生活更轻松。指令具有修饰符和值，以及许多其他的钩子（基本上是Vue开发人员的瑞士军刀）。您可以详细了解here。

数字3，如果您害怕编写更多代码（例如E = mc ²或Error = more code ²），那么您的问题就只是混乱道具，然后尝试使您的代码更具可读性。正如@Mathias_R提到的那样，请打破界限，请确保您和您的团队可以轻松阅读它。

我希望这会有所帮助。

Answer 2

您总是可以在新行中对其进行分解，以使其更具可读性，如下所示。

`<v-btn 
  :flat="selectedUser 
  !== user.id" 
  :key="user.id" 
  depressed 
  fab 
  flat 
  round>
  <h4> {{user.name}} </h4> 
</v-btn>`

Vuetify在CSS中自定义v-btn道具

2 个答案: