Quasar 文件选择器更改 q-file 中所选文件名的文本颜色

【问题标题】：Quasar file picker change text color of selected file name in q-fileQuasar 文件选择器更改 q-file 中所选文件名的文本颜色
【发布时间】：2021-01-21 06:19:35
【问题描述】：

Quasar File Picker 组件更改<q-file> 中所选文件名的文本颜色。

选择的文本文件是 test.odt，如何更改它的文本颜色，例如 Red？

<q-file
  standout
  class="registration-field text-red"
  bg-color="blue-2"
  v-model="registrationNumber"
  color="red"
>
  <template v-slot:prepend>
    <q-icon name="o_insert_photo" size="24px" color="blue" />
  </template>
  <template v-slot:append>
    <div class="attachment text-grey-14">File</div>
  </template>
</q-file>

我尝试过使用样式道具 color="red"，但它不起作用。

有人知道吗？

【问题讨论】：

标签： javascript vue.js vuejs2 quasar-framework

【解决方案1】：

您可以使用file 插槽并添加text-red 类，它可以工作。

<q-file
  standout
  class="registration-field text-red"
  bg-color="blue-2"
  v-model="registrationNumber"
  color="red"
>
  <template v-slot:prepend>
    <q-icon name="photo" size="24px" color="blue"/>
  </template>
  <template v-slot:append>
    <div class="attachment text-grey-14">File</div>
  </template>
  <template v-slot:file="{ index, file }">
    <div class="ellipsis text-red relative-position">
      {{ file.name }}
    </div>

    <q-tooltip>
      {{ file.name }}
    </q-tooltip>
  </template>
</q-file>

Codepen-https://codepen.io/Pratik__007/pen/wvWzOoV

【讨论】：

</q-chip> 的开头在哪里，出现格式错误
它的工作！谢谢。但我不得不删除</q-chip>，它会导致格式错误，我也删除了{ index }，因为这里没有使用它。