<template>
   <div class="ancherBox" :id="'biancher_'+data.id">
     <div class="ancher" :style='{background:groundColor,color:fontColor,fontSize:fontSize}'>
       {{data.ancherName}}
     </div>
  </div>
</template>
<script>
export default {
  name: 'lineBetween',
  props: {
    title: {
      type: [String, Number],
      default: ''
    },
    id: {
      type: String,
      default: ''
    },
    width: { type: [String, Number], default: 0 },
    height: { type: [String, Number], default: 0 },
    data: {
      type: Object,
      default: () => []
    }
  },
  data() {
    return {
      groundColor:'#fff',
      fontSize:'14px',
      fontColor:'#555',
    }
  },
  created() {},
  mounted() {
     this.initLine()
  },
  methods: {
    initLine() {
      this.groundColor= this.data.groundColor||'#fff'
     this.fontColor = this.data.fontColor
     this.fontSize = this.data.fontSize + 'px'||'13px'
    }
  },
  watch: {
      data: {
      handler(n) {
        this.data = n
        this.initLine()
      },
      deep: true
    },

  }
}
</script>
<style lang="less" scoped>
.ancherBox{
  text-indent: 10px;
  width: 100%;
  height: 100%;
    display: flex;
    flex-direction: row;
    // justify-content: center;
    align-items: center;
    .ancher{
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      // background: #999;
    }
  }
  
</style>
