虎符前端工程实践2

• 如何限制段落最大显示字数

Vue 实现限制段落字数

原版代码及显示：

<div class="item-warn-board">
  <div class="row_spacing" v-if="AlertList.length > 0" v-for="i in 5" style="text-align: left;margin-bottom: 8px">
    {{ AlertList[i].annotations.summary }}
  </div>
</div>

我们需要将每段告警限制在一行之内，并将多余字符以 ... 替换

Vue 实现

在 methods 中添加如下方法：

truncateText(text, maxLength) {
  if (text.length > maxLength) {
    return text.slice(0, maxLength) + '...'
  }
  return text
},

再在 template 中将页面改成：

<div class="item-warn-board">
  <div class="row_spacing" v-if="AlertList.length > 0" v-for="i in 5" style="text-align: left;margin-bottom: 10px">
    <span class="bullet"></span>
    {{ truncateText(AlertList[i].annotations.summary, 47) }}
  </div>
</div>

这样，我们便成功地实现限制文本长度的功能：