Vue

内容过长会影响样式的省略弹窗显示

2017-12-15  本文已影响13人  Lia代码猪崽
不规则的表格

如果内容过长呢?

<div class="specialText">
   {{item.name}}:
   <!--如果内容长度大于15,后面的就省略,只显示前16个-->
   <span v-if="item.content.length > 15" style="color: #0E0E0E;line-height: 17px;">
       {{item.content.substring(0, 15)+"... "}}<el-button type="text" @click="openDetail(item.content, item.name)">查看详情</el-button>
   </span>
   <span v-else style="color: #0E0E0E;line-height: 17px;">{{item.content}};</span>
</div>
// 查看这条内容的详情
openDetail(content, title) {
  this.$alert(content, title, {
    confirmButtonText: '确定',
  });
},

结果为:


只显示一部分
点击查看详情显示弹窗
上一篇下一篇

猜你喜欢

热点阅读