一行内容显示,超出用省略号,hover显示全部内容

来陪人家玩游戏嘛

已于 2023-07-19 10:41:38 修改

阅读量1.8k

点赞数 2

分类专栏： vue 文章标签： javascript 前端 vue.js

于 2022-01-19 17:44:22 首次发布

本文链接：https://blog.youkuaiyun.com/gongliming_qd/article/details/122586368

版权

样式效果

在这里插入图片描述

父组件调用

<Tool-tip :content="content"></Tool-tip>

子组件

<template>
  <el-tooltip
    :content="content"
    :placement="placement"
    effect="dark"
    :disabled="isDisabled"
  >
    <div
      class="contentnowrap"
      :class="{isLink: 'link-text'}"
      @mouseenter="isShowTooltip"
      @click="linkTo"
    >{
   {
   content}}</div>
  </el-tooltip>
</template>
 
<script>
export default {
   
  name: 'ShowTooltips',
  props: {
   
    content: {
   
      type: String,
      default: ''
    },
    isLink: {
   
      type: Boolean,
      default: false,
      required: false
    },
    placement: {
   
      type: String,
      default