<template>
    <!-- 分割标题 -->
    <div class="dividerTitle">
        <div class="titleLine"><span :id="title">{{title}}</span><span class="line" :style="[{width:width + 'px'}]"></span></div>
    </div>
</template>

<script>
export default {
  name: 'dividerTitle',
  props: {
    // 按钮名称
    title: {
      type: [String],
      default: ''
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.$nextTick(() => {
      // 使下横线宽度与文本宽度保持一致
        let title = window.document.querySelector(`#${this.title}`)
        // console.log(title.offsetWidth)
        this.width = title.offsetWidth ? title.offsetWidth : 60
      })
    }
  },
  watch: {
    title () {
      console.log(4)
    }
  },
  data () {
    return {
      width: 60
    }
  }
}
</script>
<style lang="scss" scoped>
.dividerTitle {
  .titleLine{
    width: 100%;
    padding: 10px 0;
    border-bottom: 2px solid #d2e1ff;
    margin: 0 0 10px 0;
    position: relative;
    .line{
      position: absolute;
      // min-width: 60px;
      height: 2px;
      background: #1890ff;
      bottom: -2px;
      left: 0;
    }
  }
}
</style>
