el-tootip使用后保错Invalid prop: type check failed for prop "content". Expected String with value "0", got Number with value 0.为什么

这个错误提示是因为 el-tooltip 组件的 content 属性期望传入一个字符串类型的值，但是你传入了一个数字类型的值。可以将传入的值转换为字符串类型即可解决这个问题。

例如，将传入的值 0 转换为字符串类型：

<el-tooltip content="0".toString()>
  <span>Hover Me</span>
</el-tooltip>

相关问题

写一个vue组件，设置el-tootip最大高度150px，如果超出容器高度el-tootip中有滚动轴，高度不超过150无滚动轴

好的，根据你的要求，我可以为你提供一个简单的 Vue 组件示例，用于设置 `el-tooltip` 元素的最大高度并在需要时启用滚动条。代码如下：

<template>
  <el-tooltip :class="tooltipClass" :content="content">
    <div ref="tooltipContent" :style="tooltipStyle">
      <slot></slot>
    </div>
  </el-tooltip>
</template>

<script>
export default {
  name: 'MaxHeightTooltip',
  props: {
    maxHeight: {
      type: Number,
      default: 150
    }
  },
  computed: {
    tooltipClass() {
      return this.$refs.tooltipContent.scrollHeight > this.maxHeight ? 'scrollable' : ''
    },
    tooltipStyle() {
      return {
        maxHeight: `${this.maxHeight}px`
      }
    },
    content() {
      return this.$refs.tooltipContent.innerHTML
    }
  }
}
</script>

<style>
.scrollable {
  overflow-y: auto;
}
</style>

在这个示例中，我们创建了一个名为 `MaxHeightTooltip` 的 Vue 组件，它接受一个 `maxHeight` 属性，用于设置 `el-tooltip` 元素的最大高度。该组件包含一个插槽，用于插入需要显示的内容。

组件使用 `ref` 属性引用了 `div` 元素，用于计算元素的高度。在 `computed` 中，我们使用 `scrollHeight` 属性检查内容是否超过最大高度，并在需要时添加一个带有滚动条的 CSS 类 `scrollable`。我们还使用 `tooltipStyle` 计算属性来动态设置 `el-tooltip` 的最大高度。

最后，我们在模板中使用了 `el-tooltip` 和 `div` 元素来创建一个带有 tooltip 的元素，并使用 `v-bind:class` 和 `v-bind:style` 分别绑定计算属性 `tooltipClass` 和 `tooltipStyle`。为了实现滚动条，我们还创建了一个简单的 CSS 类 `scrollable`，将 `overflow-y` 设置为 `auto`。

你可以在需要使用 `el-tooltip` 的地方，使用这个组件来实现你的需求，如下所示：

<max-height-tooltip :max-height="150" content="Tooltip content">
  <el-button type="primary" icon="el-icon-search">Search</el-button>
</max-height-tooltip>

注意：这只是一个简单的示例，需要根据你的实际需求进行更改和扩展。

写个vue组件，如果el-tootip弹窗内容超过150px, 就出现有纵向滚动，没有超出则无滚动

好的，根据你的要求，我可以为你提供一个简单的 Vue 组件示例，用于设置 `el-tooltip` 元素的最大高度并在需要时启用滚动条。代码如下：

<template>
  <el-tooltip :content="content" :open-delay="openDelay" :popper-class="popperClass">
    <div ref="tooltipContent" :style="tooltipStyle" :class="tooltipClass">
      <slot></slot>
    </div>
  </el-tooltip>
</template>

<script>
export default {
  name: 'CustomTooltip',
  props: {
    maxHeight: {
      type: Number,
      default: 150
    },
    openDelay: {
      type: Number,
      default: 500
    }
  },
  computed: {
    tooltipClass() {
      return this.$refs.tooltipContent.scrollHeight > this.maxHeight ? 'scrollable' : ''
    },
    tooltipStyle() {
      return {
        maxHeight: `${this.maxHeight}px`
      }
    },
    popperClass() {
      return this.$refs.tooltipContent.scrollHeight > this.maxHeight ? 'custom-popper' : ''
    },
    content() {
      return this.$refs.tooltipContent.innerHTML
    }
  }
}
</script>

<style>
.scrollable {
  overflow-y: auto;
}

.custom-popper {
  max-height: 150px !important;
}
</style>

在这个示例中，我们创建了一个名为 `CustomTooltip` 的 Vue 组件，它接受一个 `maxHeight` 属性，用于设置 `el-tooltip` 元素的最大高度。该组件包含一个插槽，用于插入需要显示的内容。

组件使用 `ref` 属性引用了 `div` 元素，用于计算元素的高度。在 `computed` 中，我们使用 `scrollHeight` 属性检查内容是否超过最大高度，并在需要时添加一个带有滚动条的 CSS 类 `scrollable`。我们还使用 `tooltipStyle` 计算属性来动态设置 `el-tooltip` 的最大高度。

最后，我们在模板中使用了 `el-tooltip` 和 `div` 元素来创建一个带有 tooltip 的元素，并使用 `v-bind:class` 和 `v-bind:style` 分别绑定计算属性 `tooltipClass` 和 `tooltipStyle`。为了实现滚动条，我们还创建了一个简单的 CSS 类 `scrollable`，将 `overflow-y` 设置为 `auto`。同时我们使用了 `popper-class` 属性来绑定计算属性 `popperClass`，用来设置 `el-tooltip` 弹窗的样式。

你可以在需要使用 `el-tooltip` 的地方，使用这个组件来实现你的需求，如下所示：

<custom-tooltip :max-height="150" content="Tooltip content">
  <el-button type="primary" icon="el-icon-search">Search</el-button>
</custom-tooltip>

注意：这只是一个简单的示例，需要根据你的实际需求进行更改和扩展。