vuetify.js - 在默认插槽中动态更改 v-text-field 中的类
问题描述
我正在尝试根据文本的长度动态更改 v-text-field 默认插槽中的字体大小。但是,似乎 v-text-field 忽略了我在该部分中指定的任何规范。
这是代码
<v-text-field
v-model="attr.name"
hide-details
:readonly="true"
class="core-select"
label="Core Attribute"
>
<template
v-slot:default
>
<div :class="attrNameStyle[0]">
{{ attr.name }}
</div>
</template>
</v-text-field>
我已经验证 attrNameStyle[0] 设置正确,但是该样式永远不会应用于默认插槽。我可以通过这个 CSS 类改变输入槽的外观,.v-text-field__slot input { ... }
但是我不能动态更新那个 CSS。
感谢帮助!
编辑:添加更多上下文。
.core-select {
width: 180px;
}
.short-core-select {
font-size: 12px;
}
attrNameStyle[0] 设置为 '' 或 'short-core-select'。
解决方案
由于v-text-field__slot
工作正常,您可以从更高级别编辑该 CSS。
<v-text-field
v-model="attr.name"
hide-details
hide-details
class="core-select"
:class="attrNameStyle[0]"
label="Core Attribute"
>
<template>
<div>
{{ attr.name }}
</div>
</template>
</v-text-field>
<style>
.short-core-select .v-text-field__slot {
font-size: 12px;
}
</style>
推荐阅读
- c++ - 使用向量示例验证 c++ 对象的成员在运行时是否具有常量地址
- android - 用于移动地图的免费和开源工具
- c# - ASP NET Core (.NET 5) 身份系统 - 作为临时解决方法的简单登录
- r - 使用 R 包 EMCluster 绘制单变量正态分布的混合
- python - 使用正则表达式查找除特定数字外的数字形式
- python - Flask python 脚本在给出值之前运行
- printing - Windows 10 到 Windows 服务器远程桌面打印非常慢
- camera - 如何在 libGDX 中获得相机旋转?
- python - Squish 中测试用例之间的 AUT 连接丢失
- javascript - 如何将 backgroundImage 属性设置为 Rest API 中的 URL?