css 如何在不降低组件自身宽度的情况下将组件包起来？

bwntbbo3 于 2023-02-06 发布在其他

关注(0)|答案(1)|浏览(99)

在标记内 Package 某些组件时，它们会失去其原始宽度

<v-badge color="warning" icon="mdi-lock">
  <v-text-field label="lost width due to badge" />  
</v-badge>

导致了这个（复制链接）

我知道textfield组件提供了一个append插槽

<v-text-field label="field goes here">
  <template v-slot:append>
    <v-avatar color="warning" size="small">
      <v-icon icon="mdi-lock" />
    </v-avatar>
  </template>
</v-text-field>

但这是不一样的（再现链接）

有没有一种方法可以使用徽章，但不影响实际宽度？

css

来源：https://stackoverflow.com/questions/75307324/how-to-wrap-badge-around-component-without-lowering-its-own-width

1条答案

按热度按时间

7cwmlq891#

将width: 100%添加到工卡标签，如下所示：

<template>
  <v-app>
    <v-main>
      <v-container>
        <v-text-field label="width is fine" />
        <v-badge style="width: 100%" color="warning" icon="mdi-lock">
          <v-text-field label="lost width due to badge" />  
        </v-badge>
      </v-container>
    </v-main>
  </v-app>
</template>

结果：

赞(0）回复(0）举报 2023-02-06

我来回答

css 如何在不降低组件自身宽度的情况下将组件包起来？

1条答案

相关问题

热门标签

最新问答