技術標籤：elementvue2.0ES6

需求:
hover時展示所有內容,離開時只顯示15個位元組以內的內容

這裡為一個元件,props中的內容需要父元件傳值

子元件:src\components\TooltipLimit\index.vue

<template>
  <!-- 提示語超過15個字限制顯示 -->
  <div style="cursor: pointer;">
    <el-tooltip
      class="item"
      effect="dark"
      content=""
      :disabled="content.length<=15"
      placement="bottom-start"
    >
      <div slot="content" class="content">
        <div class="icon">
          <i class="el-icon-warning-outline" />
        </div>
        <div class="text" v-html="content" />
      </div>
      <span v-if="content.length<=15 || topContent" class="top-text"><i class="el-icon-warning-outline" />{{ topContent || content }}</span>
      <span v-else class="top-text"><i class="el-icon-warning-outline" />{{ content.slice(0,15) }}...</span>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  name: 'TooltipLimit',
  props: {
    content: {
      type: String,
      default: ''
    },
    topContent: {
      type: String,
      required: false,
      default: ''
    }
  }
}
</script>

<style lang="scss" scoped>
  .content{
    display: flex;
    line-height: 20px;
    .icon{
      font-size: 14px;
      margin-right: 10px;
    }
    .text{
      flex: 1;
      font-size: 12px;
    }
  }
  .top-text{
    font-size: 12px;
    color: #9C9C9C;
    .el-icon-warning-outline{
      margin-right: 10px;
      color: #888;
      font-size: 14px;
    }
  }
</style>
 

父元件:

//引入元件
import TooltipLimit from '@/components/TooltipLimit/index'

    <!--html使用,configValue為介面返回值  -->

<tooltip-limit :content="`在當年${configValue}月底鎖定，不再支援更改`" />

如:多列顯示:可用br

<tooltip-limit
      top-content="操作說明"
      content="操作說明：<br>
          1. 以下說明均指同一使用者。<br>
          2. 有且僅有一項預設配置，預設端機必須有效。<br>
          3. 端機序列號唯一，端機名稱唯一。<br>
          4. 新增或修改配置，所有內容都要填寫，此項留空。<br>
          5. 新增或修改後的配置，如已存在相同的端機序列號或名稱，此次操作無效。<br>
          7. 如需新增配置，請點選按鈕&lt;重置ID&gt;<br>"
    />