<template>
 <div :style="{textAlign:config.text.textAlign}">
    <span class="text" :style="getStyle()">{{config.text.content}}</span>
  </div> 
</template>
<script>
export default {
  name: "display-text",
  data() {
    return {
    }
  },
  props: {
    config: {
      type: Object
    }
  },
  mounted () {
    
  },
  methods: {
    getStyle(){
      if(this.config.isDiyStyle && this.config.diyStyle){
        return JSON.parse(this.config.diyStyle);
      }else{
        return {fontSize:this.config.text.fontSize,color:this.config.text.color,fontWeight:this.config.text.fontWeight};
      }
    }
  }
};
</script>
<style>
.text {
    display: inline-block;
}
</style>