文本溢出处理

组件

<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 组件属性

指令

<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 指令属性(计算父元素宽度)

组件库

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