代码之家 › 专栏 › 技术社区 › Success Man

仅在使用Vue悬停时显示截断的文本

vue-component bootstrap-4 vuejs2 vue.js css

Success Man · 技术社区 · 7 年前

<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上显示截断的文本。

我怎样才能解决这个问题?

3 回复 | 直到 7 年前

Erick Petrucelli 7 年前

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

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> club.truncate v-if / v-else 块:

<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 方法只需要关心返回截断的文本,因为只有在截断一个俱乐部的描述时才会调用它:

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

看一看这个 fully working code here 如果有任何疑问。

DuyguKeskek 7 年前

尝试为每个项使用键属性。如果为showAll设置mouseover,它肯定会显示所有描述,因为它将为all返回true。因此,您应该在此处执行Vue支持的动态列表呈现,类似于:

<div v-for="club in row" :key="club.id">

另外,我建议您查看有关动态列表呈现的官方文档:

https://vuejs.org/v2/guide/list.html

gyc 7 年前

您可以创建一个布尔数组,其中每个值对应于一个团队。

let formattedClubs= [{name: "team1", description: "desc team1"}, {name: "team2", description: "desc team2"}];
let showDescription = Array.from(formattedClubs, show => false);

您拥有初始团队阵列。您可以使用初始化为false的值创建相同大小的数组。

在模板中

<b-card-group deck deck v-for="(row, index) in formattedClubs">

formattedClubs[index] 值在 showDescription[index]

@mouseover="showDescription[index] = true" @mouseout="showDescription[index] = false"

你的活动也一样。