At present, simple background projects are mainly developed using Vue+ Element + AXIos. Simple packaging of components for daily output is done and recorded for easy subsequent use (haha, paste and copy).

El – toolTip encapsulation

The problem of exceeding text content often occurs in the project, so we will omit the exceeding content, display all content through the pop-up box when input is moved in, and copy the content in the pop-up box. There will be a lot of the whole project, so it will be simply encapsulated for reuse.

El-tooltip component package:

<template> <el-tooltip :content="txtInfo" placement="top" effect="light" :disabled="isDisabled"> <div class="contentnowrap" :class="{isLink: 'link-text'}" @mouseenter="isShowTooltip" @click="linkTo">{{txtInfo}}</div> </el-tooltip> </template> <script> export default{ name: 'ShowTooltips', props: { txtInfo: { type: String, default: '' }, isLink: { type: Boolean, default: false, required: false } }, data(){ return { isDisabled: false } }, methods: { isShowTooltip(e){ let clientWidth = e.target.clientWidth, scrollWidth = e.target.scrollWidth, arrList = Array.from(e.target.classList) if(scrollWidth > clientWidth){ this.isDisabled = false if(! arrList.includes('hover-blue')){ e.target.classList.add('hover-blue') } } else { this.isDisabled = true e.target.classList.remove('hover-blue') } }, linkTo(){ if(this.isLink){ this.$emit("linkTo") } } } } </script> <style lang="less"> .contentnowrap{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hover-blue:hover{ color: red; } .link-text{ color: red; cursor: pointer; } .el-tooltip__popper{ font-size: 14px; font-family: 'Microsoft YaHei'; } </style>Copy the code

Usage:

Note: The outer div of the show-Tooltips component has a given width

<template> ... <div> <show-tooltips :txt-info="value"></show-tooltips> //value is the contents of the popbox </div>... </template> <script> import ToolTips from '@/utils/ToolTips' export default{name: 'Component ', Components :{'show-tooltips': Tooltips // Register component}, data(){return{}}, methods:{}} </script>Copy the code