内容溢出打点组件

<script>
export default {
  name: 'HideLayoutButton',
  data() {
    return {}
  },
  props: {
    limitNumber: {
      type: Number,
      default: 4
    }
  },
  render() {
    const { default: content } = this.$slots
    const { limitNumber } = this
    const showContent = content.length > limitNumber ? content.slice(0, limitNumber) : content.slice(0, content.length)
    return (
        <div class="wrapper">
          <span>{showContent}</span>
           { content.length > limitNumber && (<el-popover
               placement="right"
               width="400"
               trigger="click">
             { content.slice(limitNumber) }
             <i class="el-icon-more" slot="reference"/>
           </el-popover>)
           }
        </div>
    )
  }
}
</script>
<style lang="scss" scoped>
.wrapper {
  .el-icon-more {
    padding: 10px;
    transform: rotate(90deg);
  }
}
</style>

<template>
  <div>
  <HideLayoutButton limit-number="2">
    <el-button>test1</el-button>
    <el-button>test2</el-button>
    <el-button>test3</el-button>
    <el-button>test4</el-button>
    <el-button>test5</el-button>
    <el-button>test6</el-button>
  </HideLayoutButton>
  </div>
</template>

<script>
import HideLayoutButton from "@/components/HideLayoutButton";
export default {
  name: 'HelloWorld',
  components: {HideLayoutButton},
}
</script>