d-tooltip 文字提示

何时使用

d-tooltip组件基于 ant-design-vue 中的 a-tooltip 扩展，新增了 len 属性，用于控制提示内容的显示长度。通过设置 len，可以根据 content 内容的字符长度来自动调整显示的内容，从而提供更加灵活和个性化的提示信息。

常规的 使用a-tooltip

a-tooltip (opens new window)

代码演示

气泡框位置，可选 top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom

基本

支持所有 a-tooltip 的 API 属性

可修改 字符长度、显示大小

显示代码

<template>
  <div>
    <p>
      <d-tooltip :content="txt"></d-tooltip>
    </p>
    <p>
      <d-tooltip :content="txt" :len="12"></d-tooltip>
    </p>
    <p>
      <d-tooltip :content="txtValue" :len="12"></d-tooltip>
    </p>
    <p>
      <d-tooltip :content="cusTxt" :len="12">
       {{cusTxt}}
      </d-tooltip>
    </p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      txt: "我的文本很长很长我的文本很长很长我的文本很长很长我的文本很长很长我的文本很长很长我的文本很长很长我的文本很长很长我的文本很长很长我的文本很长很长",
      txtValue: "我是没有12长度数据",
      cusTxt: "气泡框位置，可选 top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom"
    };
  },
};
</script>

显示代码

API

支持 标签内部 slot