zoukankan      html  css  js  c++  java
  • AutoTipZen 实时根据文字是否溢出 提示title

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

    <template>
        <div ref="autoTipRef"
          @mouseover="onMouseOverHandle"
             :title="innerTitle"
          style="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>
    
    
  • 相关阅读:
    JSON 数据转换
    .NET LINQ 数据排序
    .NET LINQ标准查询运算符
    UML 序列图
    UML 类图
    UML 用例建模
    UML 概述
    .NET LINQ查询语法与方法语法
    .NET LINQ查询操作中的类型关系
    .NET 反射概述
  • 原文地址:https://www.cnblogs.com/pengchenggang/p/13442372.html
Copyright © 2011-2022 走看看