vuetify-如何在文本区域内更改 vuetify 中的箭头颜色和图标大小？

Question

我正在尝试制作这样的文本输入区域。

我试过这种方式

        <v-text-field
          label="Outlined"
          placeholder="Placeholder"
          background-color="white"
          append-icon="mdi-arrow-right x-large primary"
          outlined
        ></v-text-field>

它给了我这个结果。

问题是

1. 图标不够大，无法填满整个文本区域
2. 无法更改箭头笔划的颜色
3. 我应该怎么做才能使这个文本区域也接收文件拖放？（用户可能想要键入或有时将文件拖放到文本区域

非常感谢。 希望熟悉vuetify的人可以帮助我。

Answer 1

对于您关于输入设计和外观的部分问题，您应该使用v-text-field 组件中提供的slot，这样您可以获得更多效果，这里是关于此的 vuetify 文档：text field icon slots

要检查此组件还有哪些其他可用插槽，请查看以下列表：all text field slots

即使使用slot 会比prop 实现更多效果，但要完全实现所需的结果，您可能需要覆盖一些 CSS 样式，您可以通过检查浏览器开发工具中的元素来找到它们.

我在下面的代码中使用上述方法制作了您想要的外观：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})

.v-text-field.v-text-field--enclosed .v-text-field__details,
.v-text-field.v-text-field--enclosed:not(.v-text-field--rounded)>.v-input__control>.v-input__slot {
  padding-right: 0 !important;
}

.v-text-field--enclosed .v-input__append-inner,
.v-text-field--enclosed .v-input__append-outer,
.v-text-field--enclosed .v-input__prepend-inner,
.v-text-field--enclosed .v-input__prepend-outer,
.v-text-field--full-width .v-input__append-inner,
.v-text-field--full-width .v-input__append-outer,
.v-text-field--full-width .v-input__prepend-inner,
.v-text-field--full-width .v-input__prepend-outer {
  margin-top: 0 !important;
}

.pointer {
  cursor: pointer;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-text-field label="Outlined" placeholder="Placeholder" outlined>
          <template v-slot:append>
            <v-sheet color="red" class="d-flex justify-center align-center rounded-r pointer"  width="50" height="56">
              <v-icon dark>
                mdi-arrow-right
              </v-icon>
            </v-sheet>
          </template>
        </v-text-field>
      </v-container>
    </v-main>
  </v-app>
</div>

关于拖放问题 vuetify 的 v-file-input 组件本身并不支持这种行为（至少目前是这样），但您可以阅读下面的文章以了解如何在 vuetify 中编写此功能：

Step by Step: Custom drag & drop upload component in Vuetify (Vue 2)