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

Posted 2023-02-22

【中文标题】仅在使用 Vue 悬停时显示截断的文本

【英文标题】：Showing truncated text only on hover with Vue

【发布时间】：2019-03-06 04:05:08

【问题描述】：

我试过这样：

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

我该如何解决这个问题？

【问题讨论】：

没有什么可以帮忙的吗？

您需要为每个俱乐部设置一个数组，其值为 show=true/false。那么你可以设置 show[index] = true/false

@gyc 我试过了，但还是失败了。我需要一个具体的答案

【参考方案1】：

尝试对每个项目使用 key 属性。如果您为 showAll 设置鼠标悬停，它肯定会显示所有描述，因为它会为所有返回 true。这就是为什么，你应该在这里做 Vue 支持的动态列表渲染，类似这样：

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

另外，我建议你看一下关于动态列表渲染的官方文档：

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

【讨论】：

我试过了，但还是失败了。我需要一个具体的答案

【参考方案2】：

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

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"

在你的活动中也是如此。

【讨论】：

我还是一头雾水。你能像我的情况一样完全更新你的答案吗？

这个：let showDescription = Array.from(formattedClubs, show => false); 。脚本放在哪里？

【参考方案3】：

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

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

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 属性：

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

【讨论】：

你能做到这样吗：postimg.cc/QF5nVMYN？所以当悬停出现一个这样的框

当然可以，但我建议您使用当前代码和所需结果的图像创建另一个问题，这样我们就可以使这个答案与这个问题保持一致。

好的。我提出了一个新问题。看看这个：***.com/questions/52609575/…