| | |
| | | :key="item.id" |
| | | :label="item.chineseName" |
| | | > |
| | | <a-popover v-if="item.value&&item.value.length>18"> |
| | | <template slot="content"> |
| | | <a-tooltip @mouseenter="mouseEnterItem"> |
| | | <template slot="title"> |
| | | {{item.value}} |
| | | </template> |
| | | {{item.value}} |
| | | </a-popover> |
| | | <div class="description-item-class">{{item.value}}</div> |
| | | </a-tooltip> |
| | | |
| | | <template v-else> |
| | | {{item.value}} |
| | | </template> |
| | | </a-descriptions-item> |
| | | |
| | | </a-descriptions> |
| | |
| | | } |
| | | }) |
| | | |
| | | }, |
| | | |
| | | mouseEnterItem(e){ |
| | | console.log(e, e.target, e.target.clientWidth, e.target.scrollWidth) |
| | | if (e.target.clientWidth >= e.target.scrollWidth) { |
| | | e.target.style.pointerEvents = 'none' // 阻止鼠标事件 pointer-events 属性用于设置元素是否对鼠标事件做出反应。 |
| | | } |
| | | } |
| | | }, |
| | | beforeDestroy(){ |
| | |
| | | { |
| | | width: 130px; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .description-item-class{ |
| | | overflow: hidden; |
| | | white-space: nowrap; |
| | | text-overflow: ellipsis; |
| | | } |