Question

我的vue组件脚本如下：

<template>
  ...
    <b-card-group deck v-for="row in formattedClubs">
        <b-card  v-for="club in row"
                img-src="http://placehold.it/130?text=No-image"
                img-alt="Img"
                img-top>
            <h4 class="card-title" 
                @mouseenter="club.truncate = false"
                @mouseleave="club.truncate = true">
                <template v-if="club.truncate">{{trucateText(club.description)}}</template>
                <template v-else>{{club.description}}</template>
            </h4>
            <p class="card-text">
                {{club.price}}
            </p>
            <p class="card-text">
                {{club.country}}
            </p>
            <div slot="footer">
                <b-btn variant="primary" block>Add</b-btn>
            </div>
        </b-card>
    </b-card-group>
  ...
</template>

<script>
export default {
  data: function () {
    return {
      clubs: [
          {id:1, description:'chelsea is the best club in the world and chelsea has a great player', price:1000, country:'england'},
          {id:2, description:'liverpool has salah', price:900, country:'england'},
          {id:3, description:'mu fans', price:800, country:'england'},
          {id:4, description:'city has a great coach. Thas is guardiola', price:700, country:'england'},
          {id:5, description:'arsenal player', price:600, country:'england'},
          {id:6, description:'tottenham in london', price:500, country:'england'},
          {id:7, description:'juventus stadium', price:400, country:'italy'},
          {id:8, description:'madrid sell ronaldo', price:300, country:'spain'},
          {id:9, description:'barcelona in the spain', price:200, country:'spain'},
          {id:10, description:'psg buys neymar at a fantastic price', price:100, country:'france'}
      ]
    }
  },
  computed: {
      formattedClubs() {
          return this.clubs.reduce((c, n, i) => {
              if (i % 4 === 0) c.push([]);
              c[c.length - 1].push(n);
              this.$set(n, 'truncate', true); 
              return c;
          }, []);
      }
  },
  methods: {
      trucateText (value) {
          const length = 30;
          return value.length <= length ? value : value.substring(0, length) + "...";
      }
  }
}
</script>

如果执行了脚本，则视图如下：

如果我将描述悬停，则结果如下：

它会改变箱子列表的高度

我该如何解决这个问题？

我想要这样的视图：

Answer 1

我们可以看到您正在使用bootstrap-vue。很好，因此您可以使用v-b-tooltip directive并让自己控制悬停行为。由于您不再需要为每个俱乐部单独跟踪它，因此可以从计算的属性formattedClubs中删除该相对属性：

this.$set(n, 'truncate', true); // Remove this line.

现在，将模板更新为仅在需要截断的情况下才使用指令：

<h4 class="card-title"
    v-if="club.description.length > 30"
    v-b-tooltip.hover.bottom
    :title="club.description">
  {{trucate(club.description)}}
</h4>
<h4 v-else>{{club.description}}</h4>

当然，您现在可以按照想要覆盖正确的Boostrap样式的方式设置样式：

.tooltip.show {
  opacity: 1;
} 

.tooltip-inner {
  background: #fff;
  color: #000;
  padding: .5em 1em;
  border: 1px solid #bbb;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .15);
}

.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow, .tooltip.bs-tooltip-bottom .arrow {
    position: relative;
    background: #fff;
  top: 1px;
  width: 16px;
}

.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip.bs-tooltip-bottom .arrow::before, .tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::after, .tooltip.bs-tooltip-bottom .arrow::after {
  bottom: 0;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::after, .tooltip.bs-tooltip-bottom .arrow::after {
  border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 8px;
    margin-left: -8px;
}

.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip.bs-tooltip-bottom .arrow::before {
  border-color: rgba(187, 187, 187, 0);
    border-bottom-color: #bbb;
    border-width: 9px;
    margin-left: -9px;
}

如果需要，看看fully working sampe here。

Answer 2

我只需要用工具提示组件包装截断的文本即可。您可以将全文作为道具传递给该组件。

悬停时，您可以使用@mouseover显示工具提示，并使用@mouseleave将其删除。

工具提示本身可以是带有max-width的绝对位置元素。我不会将所有内容都打出来，但这应该可以帮助您入门。

如何仅在悬停时显示截断的文本而不更改框列表的高度？

2 个答案: