vue框架下实现字数过多隐藏,鼠标移入显示功能

Posted 2021-02-06 kasi

vue框架下实现字数过多隐藏,鼠标移入显示功能

• html:

  <em class="c-300" @mouseenter="dItem && dItem.length>0 ? mouseen($event):‘‘">{{dItem.substring(3)}}</em>
  <em class="c-310 hidden" v-if="dItem && dItem.length > 0" @mouseleave="mousele($event)">{{dItem.substring(3)}}</em>

• js:

  mouseen (e) {
    let node = e.target
    setTimeout(() => {
      node.classList.add(‘hidden‘)
      node.nextSibling.nextSibling.classList.remove(‘hidden‘)
    }, 100)
  },
  mousele (e) {
    setTimeout(() => {
      e.target.classList.add(‘hidden‘)
      e.target.previousSibling.previousSibling.classList.remove(‘hidden‘)
    }, 100)
  }

• css:

  .c-300{
      display: flex;
      overflow: hidden;
      text-overflow: ellipsis;
      display:-webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
  }
  .c-310{
      display: flex;
      display: -webkit-flex;
  }
  .hidden{
      display:none;
  }