[JavaScript知识库]vue 自定义指令 文字超出省略指令 v-ellipsis

<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>