Original link: https://chegva.com/5491.html
Tooltip text prompt: https://1x.antdv.com/components/tooltip-cn/
Use: <ellipsis-tip :length=”14″ :text=”item.projectName”></ellipsis-tip> The default text length is 8 , which can be set by :length , and the rest of the configuration parameters can be set by yourself.
<template> <a-tooltip v-if="showTooltip" :placement="placement" :overlayClassName="className" :trigger="trigger"> <template v-slot:title> </template> </a-tooltip> <span v-else></span> </template> <script> export default { name: 'EllipsisTip', props: { // text display content text: { type: String, required: true, default: '' }, // The text retains the length length: { type: Number, default: 8 }, // bubble box position placement: { type: String, default: 'bottomLeft' }, // Trigger behavior, default hover trigger: { type: String, default: 'hover' }, // custom ClassName className: { type: String, default: 'tooltop' }, }, computed: { showTooltip() { return this.text.length > this.length } }, // mounted() { // console.log(this.ellipsis(this.text)) // }, // Whether to show tooltip // watch: { // text() { // console.log(this.text); // } // }, // created() { // console.log(this.showTooltip); // console.log(this.text); // }, methods: { /** * @description: Intercept string * @param {string} value String to be intercepted * @return {string} Intercepted string */ ellipsis(value) { if (!value) { return ""; } if (value.length > this.length) { return value.slice(0, this.length) + "..."; } return value; } }, }; </script> <style scoped> //Control body color.tooltop .ant-tooltip-inner { color: #333 !important; background-color: #fff !important; // width: 500px; } //Control triangle color.tooltip .ant-tooltip-placement-bottom .ant-tooltip-arrow::before, .ant-tooltip-placement-bottomLeft .ant-tooltip-arrow::before, .ant-tooltip-placement-bottomRight .ant-tooltip-arrow::before { background-color: #fff !important; } </style>
◎Check the effect:
This article is reprinted from: https://chegva.com/5491.html
This site is for inclusion only, and the copyright belongs to the original author.