VueJS Conditional Props and CSS：如何在一行文本的末尾有条件地显示 svg？

Posted 2023-02-22

【中文标题】VueJS Conditional Props and CSS：如何在一行文本的末尾有条件地显示 svg？

【英文标题】：VueJS Conditional Props and CSS: How to show an svg at the end of a line of text conditionally?

【发布时间】：2021-05-12 03:23:30

【问题描述】：

我正在尝试通过 props 和三元运算符添加 svg，但与我使用的其他样式（例如 has-border）不同，我无法弄清楚如何让它正常工作。

让 svg 直接显示在字符串的末尾和正确的大小已被证明具有挑战性。就目前而言，svg 正在从上面使用的 svg 中获取填充和边距；很可能是由于使用了 img 标签。

这最后可能是一个简单的 CSS 问题，但我不禁觉得我实现 prop 的方式以及因此注入 svg 的方式是不正确的。

我想要的只是让文本和 svg 在同一行，在 cardButton 的中间：像这样：

正如您在下面的代码和屏幕截图中看到的那样，我有一些用于图像定位的条件道具，这些 css 变量可能会丢弃外部链接 svg（通过为其添加边距）。

是否正确实现了 vue 条件属性，只是我没有正确使用 css？如果是这样，我该如何纠正这种重叠？我的修复 " 。外部链接 图像 填充：0 边距：0 " 好像没有效果，但是宽高呢？ （也许我对 sass 的使用不正确）

抱歉，问题太长了。我尽量简化代码，只提供与问题相关的信息。

如果您需要查看更多信息，请告诉我！

Vue 代码

<template>
  <div
    :class="[
      hasBorder ? 'has-border' : '',
      imgPosition === 'left' ? 'img-left' : 'img-top',
      isExternalLink ? 'isExternalLink' : '',
    ]"
    class="card-button-wrapper"
  >
    <img :src="imgURL"  />
    <div class="labels">
         label <img v-if="isExternalLink" src="external-link.svg" class="external-link" />
    </div>
  </div>
</template>

<style lang="sass" scoped>
.card-button-wrapper
  display: flex
  position: relative
  border-radius: 10px
  width: max-content
  max-width: 630px
  max-height: 340px

.img-left
  width: 630px
  height: 160px
  img
    margin: 24px 40px

.img-top
  flex-direction: column
  align-items: center
  text-align: center
  img
    width: 138px
    height: 138px
    margin-left: 89px
    margin-top: 40px
    margin-right: 72px
    margin-bottom: 50px

.labels
  flex: 1
  display: flex
  justify-content: center
  align-items: left
  flex-direction: column

.has-border
  border: 4px solid navy

.external-link
  img
    padding: 0
    margin: 0
    width: 14px
    height: 14px
</style>

<script>
export default 
  name: 'CardButton',
  props: 
    imgURL: 
      type: String,
    ,
    imgPosition: 
      default: 'left',
    ,
    hasBorder: 
      type: Boolean,
      default: false,
    ,
    label: 
      type: String,
    ,
    isExternalLink: 
      type: Boolean,
      default: false,
    ,
  
</script>

Example.vue（我的开发页面）

<CardButton
      imgURL="/woman-panel-station.svg"
      imgPosition="left"
      :hasBorder="true"
      label="Choices List"
      subLabel="Low Power Simulation/Item Catalogue"
/>
    <br />
 <CardButton label="Company Website" :isExternalLink="true" />

【参考方案1】：

首先，您没有isExternalLink 类。应该是：

isExternalLink ? 'external-link' : ''

第二，你不能两次声明一个prop（即class），一个值会被另一个值覆盖。所以应该是：

  <div
    :class="[
      hasBorder ? 'has-border' : '',
      imgPosition === 'left' ? 'img-left' : 'img-top',
      isExternalLink ? 'external-link' : '',
      'card-button-wrapper'
    ]"
  >
    <img :src="imgURL"  />
    <div class="labels">
         label <img v-if="isExternalLink" src="external-link.svg" class="external-link" />
    </div>
  </div>

更新：

在class 属性中，静态类和动态类可以在同一个数组中声明。例如：

:class="[
    condition ? 'true-class' : 'false-class',
    'static-class'
]"

关于css，从您发布的图片中，宽度正确应用为14px x 14px。图像的位移是由img-left 中声明的边距（24px 40px）引起的。当您未定义imgPosition 时，默认应用此类。您应该尝试在 'external-link' 类中设置 margin: 0 !important，以便覆盖此值。

【讨论】：

感谢您的回复！是的，我肯定在课堂上搞砸了。不过，在您的第二点上，我认为您可以有一个条件类和一个默认类（card-button-wrapper）；该类是静态的而不是有条件的。不是这样吗？最后一个问题：我对 .img-left -- img 之类的类的实施是否正确？ imgPosition 的那些似乎有效，但“.external-link -- img”似乎没有任何影响（svg 的大小根本没有改变）。再次为响应干杯！我真的很感激

当然你可以同时拥有条件类和静态类。请参阅我的更新答案。希望对您有所帮助。

感谢您花时间向我解释这一切！我对所有这些网络开发的东西只有大约 5 个月的时间，而这些小插曲真的会让我觉得自己像个白痴。你教会了我一些我不会忘记的事情

不客气。跟上，5 个月的 web 开发，你做得很好。干杯！