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>

它给了我这个结果。

问题是

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

非常感谢。希望对 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)

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

vuetify- How do I change arrow color and the size of the icon in vuetify within text-area?

drag-and-drop

vuetify.js

textarea