文本溢出处理

组件

<template>
  <div>
    <div style="width: 100px;margin-bottom: 20px;">
      <bk-overflow-title>文本超出33333222222222222222222222222</bk-overflow-title>
    </div>
    <div style="width: 100px;margin-bottom: 20px;">
      <bk-overflow-title type="tips">
        文本超出33333222222222222222222222222
      </bk-overflow-title>
    </div>
  </div>
</template>

overflowTitle 组件属性

参数	说明	类型	可选值	默认值
content	文本内容。没有的话去default slot	String	--	--
type	默认给文本加上title，如果tips，则鼠标悬浮添加添加tooltips，但是如果不是纯文本	String	tipstitle	title
calType	计算文本宽度方式，默认通过dom计算机文本宽度，canvas则通过measureText计算	String	domcanvas	dom
resizeable	是否监听文本内容变化	Boolean	--	false

指令

<template>
  <div>
    <div style="width: 100px;margin-bottom: 20px;">
      <div
        v-overflow-title
        class="text-ov"
      >
        222222222222222222222222
      </div>
    </div>
  </div>
</template>
<script >

  import { overflowTitle } from 'bkui-vue';
  import { defineComponent } from 'vue';

  export default defineComponent({
    directives: {
      overflowTitle,
    },
    setup() {
    },
  });

</script>

overflowTitle 指令属性(计算父元素宽度)

参数	说明	类型	可选值	默认值
content	文本内容。没有的话去default slot	String	--	--
calType	计算文本宽度方式，默认通过dom计算机文本宽度，canvas则通过measureText计算	String	domcanvas	dom

组件库

整个功能已集中到MagicBox组件库 可以使用组件库：https://bkui-vue.woa.com/overflow-title