VueJS：绑定具有 3 个潜在值的变量？

Posted 2023-02-23

【中文标题】VueJS：绑定具有 3 个潜在值的变量？

【英文标题】：VueJS: Binding a variable with 3 potential values?

【发布时间】：2021-05-13 08:09:36

【问题描述】：

我正在开发一个基本的 <CardButton> 组件，并且有 3 个可变卡片大小与是否存在 <img> 相关。如果imgPosition 变量在左侧，则该框如下所示：

如果它在顶部，那么它应该如下所示：

如果没有图像，文本应该像这样居中：

'left' 和 'top' 都可以正常工作，但是如何实现第三个条件 'none'？现在它保持其他两个的样式和对齐方式，我不希望这样。

我有 imgPosition 的默认值为 left 的 prop，但即使我将其设为 type: String 并使用默认值，我仍然无法在模板中实现它。三元代替v-if，但我不能在那里使用3个条件对吗？

<div imgPosition === 'left' ? 'img-left' : 'img-top' : 'img-none'>

不起作用（或对此没有意义。）如何实现这 3 个条件？

如果您需要更多信息，请告诉我！干杯!我已经在下面发布了我的组件的简化版本，没有任何其他边框、样式等。

CardButton.vue

<template>
  <div
    :class="[
      imgPosition === 'left' ? 'img-left' : 'img-top',
      'card-button-wrapper',
    ]"
  >
    <img :src="imgURL"/>
    <div class="labels">
      <div> label </div>
      <div> subLabel </div>
    </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
  box-shadow: 0 5px 15px rgba(0,0,0,0.2)

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

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

.labels
  flex: 1
  display: flex
  justify-content: center
  flex-direction: column
  white-space: pre-line

</style>

<script>
export default 
  name: 'CardButton',
  props: 
    imgURL: 
      type: String,
    ,
    imgPosition: 
      type: String,
      default: 'left',
    ,
    label: 
      type: String,
    ,
    subLabel: 
      type: String,
    ,

  ,

</script>

例子.vue

   <CardButton
      imgURL="/woman-panel-station.svg"
      imgPosition="left"
      label="Top Text"
      subLabel="Bottom Text That is longer"
    />
    <br />
    <CardButton imgURL="/woman.svg" imgPosition="top" :label="`Top Text\nBottom Text" />
    <br />
    <CardButton label="Some Random Text" />

【参考方案1】：

您可以使用imgPosition 变量作为类名的一部分。例如，使用模板文字：

`img-$imgPosition`

这将产生一个名为“img-left”、“img-top”或“img-none”的类。

<div :class="[`img-$imgPosition`, 'card-button-wrapper']">

演示：

new Vue(
  el: "#app",
  data() 
    return 
      imgPosition: '',
      positions: ['top', 'left', 'none']
    
  
);

.img-top 
  background: yellow;

.img-left 
  background: limegreen;

.img-none 
  background: #358293;

<div id="app">
  <div :class="[`img-$imgPosition`, 'card-button-wrapper']">
   I'm a <code>&lt;div&gt;</code>!
  </div>
  <button v-for="pos in positions" @click="imgPosition = pos"> pos </button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>