AutoTipZen 实时根据文字是否溢出 提示title

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>