写一个vue组件，文本超过指定宽度可以设置展示一行或多行，鼠标hover有el-tootips，如果不超过宽度正常展示单行文本

好的，这是一个比较常见的需求，可以使用Vue的slot插槽来实现，代码如下：

<template>
  <div class="text-container" :class="{ 'is-ellipsis': isEllipsis }" v-tooltip="text" ref="container">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'EllipsisText',
  props: {
    width: {
      type: [Number, String],
      default: 200
    },
    lineClamp: {
      type: [Number, String],
      default: 1
    }
  },
  data() {
    return {
      isEllipsis: false,
      text: ''
    }
  },
  mounted() {
    this.setText()
    this.checkEllipsis()
  },
  methods: {
    setText() {
      const container = this.$refs.container
      this.text = container.innerText.trim()
    },
    checkEllipsis() {
      const container = this.$refs.container
      const containerWidth = container.offsetWidth
      const fontSize = parseFloat(window.getComputedStyle(container)['font-size'])
      const lineHeight = parseFloat(window.getComputedStyle(container)['line-height'])
      const maxLineHeight = lineHeight * this.lineClamp
      if (containerWidth > this.width || container.offsetHeight > maxLineHeight) {
        this.isEllipsis = true
      }
    }
  }
}
</script>

<style>
.text-container {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.is-ellipsis {
  cursor: default;
}

.is-ellipsis:hover {
  white-space: normal;
  word-wrap: break-word;
  line-height: normal;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  position: absolute;
  background-color: #fff;
  padding: 6px;
  border-radius: 3px;
  border: 1px solid #ccc;
}
</style>

这个组件叫做`EllipsisText`，使用时可以将需要展示的文本放在组件标签的中间，并设置组件的宽度和行数，例如：

<template>
  <div>
    <EllipsisText width="200" line-clamp="2">
      这是一段需要截断的文本，如果超过了指定的宽度或行数就会显示省略号。
    </EllipsisText>
  </div>
</template>

<script>
import EllipsisText from '@/components/EllipsisText'

export default {
  components: {
    EllipsisText
  }
}
</script>

在这个组件中，我们通过计算文本的宽度和高度，以及行高来判断是否需要截断文本，并且通过CSS实现了省略号的显示。如果文本需要展示多行，我们使用了CSS的`white-space`属性和`line-height`属性来实现。同时，我们还使用了`el-tooltip`指令来实现鼠标悬浮时的提示框。