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

Posted 2023-02-22

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

【英文标题】：How can I showing truncated text only on hover without change height of box list?

【发布时间】：2019-03-07 15:40:40

【问题描述】：

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

如果脚本被执行，视图如下：

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

改变盒子列表的高度

我该如何解决这个问题？

我想要这样的视图：

【问题讨论】：

您可以使用工具提示来包装您的截断文本

【参考方案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。

【讨论】：

也许你能再次帮助我。看看这个：***.com/questions/52651862/…

【参考方案2】：

我会简单地用工具提示组件包装您截断的文本。您可以将全文作为道具传递到此组件中。

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

工具提示本身可以是带有max-width 的绝对位置元素。我不会把所有这些都写出来，但这应该能让你开始。