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

Question

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

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

<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" 但它不起作用。

有人知道怎么做吗？

Answer 1

您可以使用 file 插槽并添加 text-red class 并且它有效。

<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

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

Quasar file picker change text color of selected file name in q-file

javascript

vue.js

vuejs2

quasar-framework