文字溢位顯示省略號,滑鼠懸浮顯示全部資訊(IE正常)
阿新 • • 發佈:2020-12-12
元件
<!-- * @Descripttion: el-tooltip重新封裝 * @version: 1.0 * @Author: keyu * @Date: 2020-07-05 10:28:45 * @LastEditTime: 2020-07-05 11:46:56 --> <template> <div class="tooltip-wrap"> <el-tooltip ref="tlp" :content="text" effect="dark" :disabled="!tooltipFlag" :placement="placement" > <p class="over-flow" @mouseenter="visibilityChange($event)">{{ text }}</p> </el-tooltip> </div> </template> <script> export default { name: "tooltipWrap", props: { text: { type: String, default: "" }, // 字元內容 placement: { type: String, default: "top-start" }, className: { type: String, default: "text" } // class }, data() { return { disabledTip: false, tooltipFlag: false }; }, methods: { // tooltip的可控 visibilityChange(event) { const ev = event.target; const ev_weight = ev.scrollWidth; // 文字的實際寬度 const content_weight = this.$refs.tlp.$el.parentNode.clientWidth; // 文字容器寬度(父節點) if (ev_weight > content_weight) { // 文字寬度 > 實際內容寬度 =》內容溢位 this.tooltipFlag = true; } else { // 否則為不溢位 this.tooltipFlag = false; } } } }; </script> <style lang="scss"> .tooltip-wrap { height: 18px; // 必須要有高度設定,因為tooltip的顯示條件是通過高度來判斷的 } .over-flow { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; //英文數字折行 } p { width: 100%; margin: 0; } </style>
頁面使用
<el-col :span="6"> <el-row :gutter="10"> <el-col :span="10" id="el_col_front">車型</el-col> <el-col :span="14" id="el_col_behind_newLong"> <tooltipWrap :text="inputCome.modelName.value" /> </el-col> </el-row> </el-col> #el_col_behind_newLong { min-height: 32px; background: #f3f1f1; text-align: left; border-radius: 3px; }
效果圖