仅在Vue悬停时显示截断的文本 [英] Showing truncated text only on hover with 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"
          @mouseover="showAll = true"
          @mouseout="showAll = false">
        {{getWord(club.description)}}
      </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 () {
    return {
      showAll: false,
      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);
        return c;
      }, []);
    }
  },
  methods: {
    getWord (desc) {
      if (this.showAll) return desc

      let value = desc;
      let length = 30;
      if (value.length <= length) {
        return value;
      } else {
        return value.substring(0, length) + '...';
      }
    }
  }
}
</script>

那几乎可行.但是，当我将鼠标悬停在框1的描述上时，所有其他框的描述也将悬停.它只应悬停在方框1上显示截断的文本.

That almost works. But when I hover over the description in box 1, the description on all the other boxes also hover. It should only hover showing the truncated text on the box 1.

我该如何解决这个问题?

How can I solve this problem?

推荐答案

问题是您只有一个属性来控制所有项目的截断.

The problem is that you have only one property to control the truncation of all items.

首先，您需要确保每个俱乐部都有自己的布尔值来控制文本截断.让我们使用您已经存在的计算属性为每个俱乐部添加一个新的反应属性:

Firstly, you need to ensure that each club has its own boolean to control the text truncation. Lets use your already existing computed property to add a new reactive property for each club:

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); // Here we add the new reactive property.
    return c;
  }, []);
}

其次，让我们使用<template>来处理视觉事物，使用带有v-if/v-else块的新的单独的club.truncate属性，保持关注点的正确分离:

Secondly, let's use the <template> to handle visual things, keeping the right separation of concerns, using the new individual club.truncate property with a v-if/v-else block:

<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>

现在，trucateText方法只需要关心被截断的文本，因为只有在我们截断一个俱乐部的描述时才调用该文本:

And now, the trucateText method only needs to care about returning the truncated text, since it's only called if we're truncating a description of one club:

methods: {
  trucateText (value) {
    const length = 30;
    return value.length <= length ?
      value : value.substring(0, length) + "...";
  }
}

如果仍然存在任何疑问，请查看此处正常运行的代码

Take a look at the fully working code here if any doubts persists.

这篇关于仅在Vue悬停时显示截断的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！