Vtip工具比element封裝的tooltip使用方便一點,詳細(xì)配置文檔地址:https://www.npmjs.com/package/vtip
1.安裝
npm i vtip -S
2.在main.js文件掛載叁执,用注冊指令方式使用,默認(rèn)指令名稱為v-tip炮姨。
import Vtip from 'vtip'
import 'vtip/lib/index.min.css'
// 注冊指令使用
Vue.use(Vtip.directive)
// 工具函數(shù)調(diào)用
Vue.prototype.$tip = Vtip.tip
3.在項目中的使用捐晶,顯示較長文案、或顯示圖標(biāo)按鈕文字信息谎砾。
<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="'預(yù)覽'"
></el-button>
效果圖2.png
4.其他配置信息
其他配置信息.png