美文网首页Vue
内容过长会影响样式的省略弹窗显示

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

作者: Lia代码猪崽 | 来源:发表于2017-12-15 09:53 被阅读13次
    不规则的表格

    如果内容过长呢?

    <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: '确定',
      });
    },
    

    结果为:


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

    相关文章

      网友评论

      本文标题:内容过长会影响样式的省略弹窗显示

      本文链接:https://www.haomeiwen.com/subject/zbsrwxtx.html