<template>
<div>
<!-- 文字超出省略指令 v-ellipsis -->
<div class="box" v-ellipsis>
<!-- <div class="box" v-ellipsis="100"> -->
1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
</div>
</div>
</template>
<script>
export default {
directives: {
ellipsis: {
inserted(el, binding, vnode) {
// el.style.width = `${binding.value || 100}px` //也可以写一个默认的宽度超出隐藏
console.log(binding);
el.style.width = `${binding.value}px`
el.style.whiteSpace = 'nowrap'
el.style.overflow = 'hidden';
el.style.textOverflow = 'ellipsis';
}
}
}
}
</script>
<style scoped>
.box {
/* width: 60px; */
height: 30px;
line-height: 30px;
border: 1px solid #ccc;
}
</style>
“相关推荐”对你有帮助么?
-
非常没帮助
-
没帮助
-
一般
-
有帮助
-
非常有帮助
提交