基于vue的简单tooltip工具Vtip-Vue的安装与使用

Vtip工具比element封装的tooltip使用方便一点，详细配置文档地址：https://www.npmjs.com/package/vtip

1.安装
npm i vtip -S

2.在main.js文件挂载，用注册指令方式使用，默认指令名称为v-tip。

import Vtip from 'vtip'
import 'vtip/lib/index.min.css'
// 注册指令使用
Vue.use(Vtip.directive)
// 工具函数调用
Vue.prototype.$tip = Vtip.tip

3.在项目中的使用，显示较长文案、或显示图标按钮文字信息。

<el-form-item label="自我评价" prop="selfEvaluation">
   <span class="words" v-tip="detailedDTO.selfEvaluation">{{detailedDTO.selfEvaluation}}</span>
</el-form-item>
效果图1.png
<el-button
    type="text"
    size="medium"
    icon="iconfont icon-icon_preview_linear_24"
    @click="preview(item)"
    style="color: #000"
    v-tip.top="'预览'"
></el-button>
效果图2.png

4.其他配置信息


其他配置信息.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容