文本溢出处理
组件
<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