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

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

有人知道怎么做吗？

标签： javascriptvue.jsvuejs2quasar-framework

Answer 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