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

Question

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

我的意图是通过使用标签槽添加图标/图像

这是数据((

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>

代码笔-https://codepen.io/Pratik__007/pen/LYZRazr