用于在 q 文件中添加自定义标签的 Quasar 文件选择器标签插槽

Question

在 Quasar 中显示自定义标签槽的正确方法是什么？

我的意图是使用标签插槽

添加icons/image

这里是数据()

  data() {
    return {
      showLabel: true,
      labelText: "My custom Label",
      registrationNumber: null,
    };
  },

这是我的模板：

<q-file
  outlined
  class="registration-field"
  :label-slot="showLabel"
  label-color="red"
  v-model="registrationNumber"
>
  // here we add our custom label slot
  <template v-slot:label>
    <div>{{ labelText }}</div>
  </template>
</q-file>

但是这个自定义标签似乎根本没有显示。

Answer 1

对于自定义标签，您不需要为其添加插槽，您可以直接更改标签。

    <q-file
  outlined
  class="registration-field"
  label-color="red"
  v-model="registrationNumber"
  :label="labelText"
>
      <template v-slot:label>
    <div><q-icon name="photo"></q-icon> Custom Label</div>
  </template>
      
</q-file>

codepen - https://codepen.io/Pratik__007/pen/LYZRazr

用于在 q 文件中添加自定义标签的 Quasar 文件选择器标签插槽

Quasar file picker label slots for adding custom label in q-file

javascript

vue.js

vuejs2

quasar-framework