xiwen-tooltip

需求 与 功能

该功能实现了文字过长时溢出裁切显示... 鼠标滑上使用 tooltip 显示全部内容
文字少时，没有裁切，鼠标滑上不显示 tooltip

在表格中使用

效果展示

在普通循环 list 中使用

效果展示

例子（本例子是基于 antd 做的，在 element-ui，或者是 iview 中，同样适用）

<template>
  <div class="box">
    <XiwenTooltip
      title="鼠标滑上使用 tooltip 显示全部内容 文字少时，没有裁切，鼠标滑上不显示 tooltip 希文出品 必属精品"
    />
  </div>
</template>
<style lang="less">
  .box {
    width: 200px;
    height: 50px;
    border: 1px solid #000;
  }
</style>

API

下面只列出了在本插件中二次封装添加的新字段，和部分原有 antd-vue 中 tooltip 部分默认的配置
具体的 antd-vue 中 tooltip api 配置请点击下面链接，查看官方文档 https://www.antdv.com/components/tooltip-cn/#API

| 参数 | 说明 | 类型 | 默认值 | | ---------------- | ----------------------- | -------- | ---------------- | | title | 需要 Tooltip 显示的文本 | string | - | | detail | 初始值 | object | - | | btnText | 按钮文本 | string | - | | cuttingNum | 显示几行后开始裁切 | Number | 2 | | placement | 气泡框位置 | string | rightTop | | overlayClassName | 卡片类名 | string | xiwen-preinstall |

注：

• 本插件相当于是对 antd-vue 组件 tooltip 的二次封装，支持 tooltip 原生组件的==所有 api 功能==
• 适用于在表格中展示，或者是正常的页面循环
• 但是如果想要调用原生 ui 组件的实例方法，通知 ref 绑定获取到的并不是 antd 的 tooltip 组件，如果想要调用 tooltip 的原生方法，==需要传递 forward-ref 参数绑定==

<template>
  <XiwenTooltip @forward-ref="tooltip" title="希文出品"></XiwenTooltip>
</template>

<script>
  // 即可调用原生方法
  this.$refs.tooltip.visibleChange(callback);
</script>

如 demo 例子可下载代码 执行 npm run demo:dev

npm 插件地址

https://www.npmjs.com/package/xiwen-tooltip

源码 觉得不错的 动动小手点个 star 三克油

https://github.com/li1164267803/xiwen-tooltip

CSDN 博客

https://blog.csdn.net/weixin_44309374/article/details/110949487

demo 地址

https://github.com/li1164267803/xiwen-tooltip/tree/master/docs-src

编译 vue 插件的模板

想要自己编译 vue 插件的，可以直接使用我这个模板 vue 编译组件模板

package.json

修改 name 为你的组件名字

{
  "name": "组件名字"
}

组件运行

npm install
npm run dev // 实时编译

组件打包发布

npm run build
npm publish

查看 demo 例子

npm run demo:dev