AutoTipZen 實時根據文字是否溢位 提示title
阿新 • • 發佈:2020-08-05
AutoTipZen 實時根據文字是否溢位 提示title
<template> <div ref="autoTipRef" @mouseover="onMouseOverHandle" :title="innerTitle" style="width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"> <slot></slot> </div> </template> <script> export default { name: 'AutoTipZen', mixins: [], props: { value: { type: String, default: '' } }, components: {}, data () { return { innerTitle: '', } }, watch: {}, computed: {}, methods: { onMouseOverHandle () { const el = this.$refs.autoTipRef // console.info('el', el.clientWidth, el.scrollWidth) const isOverFlow = el.clientWidth < el.scrollWidth if (isOverFlow) { this.innerTitle = this.$slots.default[0].text } else { this.innerTitle = '' } } }, filters: {}, created () { }, activated () { }, mounted () { // console.info("$slots", this.$slots.default[0].text) }, beforeUpdate () { }, beforeDestroy () { } } </script> <style lang="less" scoped> </style>