text.vue

<!-- 文本
 -->
<template>
  <div class="text-text">
    <p
    :style="{
      'white-space': 'pre-wrap',
      'word-breakword-break':'break-all',
      'color':getfontsizeColor,
      'background-color':getbackgroundColor,
      'padding-top':getPaddingList[0]['value']+'px',
      'padding-bottom':getPaddingList[1]['value']+'px',
      'padding-left':getPaddingList[2]['value']+'px',
      'padding-right':getPaddingList[3]['value']+'px',
      'textAlign':getAlign,
      'line-height':lineHeight,
      'fontSize':getFontSize
    }"
    @click="itemClick()"
  >{{getContent}}</p>
  </div>
</template>

<script>
const app = getApp()
export default {
  name: "text-text",
  props: {
     datas: {
      type: Object,
      default: function() {
        return {
          id: "",
          pageCode: 0,
          pageType: 0,
          queueNumber: 0,
          componentName: "文本",
          componentCode: "text-text",
          code: 1,
          componentData: {
            content:
              "这里是内容 可以编写需要的内容 测试测试测试测试测试测试测试测试测试",
            link: {
              name:'',
              link:''
            },
            fontColor: "#000000",
            backgroundColor: "",
            initcharAlign: "center",
            initcharSize: 1, //文字默认
            paddingList: [
              {
                name: "上",
                value: 20
              },
              {
                name: "下",
                value: 20
              },
              {
                name: "左",
                value: 50
              },
              {
                name: "右",
                value: 50
              }
            ]
          }
        };
      }
    }
  },
  data() {
    return {};
  },
  created() {

  },
  onLoad(){
    console.log(this.datas,'iu')
  },
  computed: {
    getPaddingList() {
      return this.datas.componentData.paddingList;
    },
    getfontsizeColor() {
      if (this.datas.componentData) {
        return this.datas.componentData.fontColor;
      }
    },
    getAlign() {
      if (this.datas.componentData) {
        return this.datas.componentData.initcharAlign;
      }
    },
    getContent() {
      if (this.datas.componentData) {
        return this.datas.componentData.content;
      }
    },
    getbackgroundColor() {
      if (this.datas.componentData) {
        return this.datas.componentData.backgroundColor;
      }
    },
    customSize () {
      return this.datas.componentData.customSize || 12;
    },
    lineHeight () {
      return this.datas.componentData.lineHeight || 1;
    },
    getFontSize() {
      if (this.datas.componentData) {
        if(this.datas.componentData.initcharSize == 0) {
          return this.customSize + "px";
        }
        return this.datas.componentData.initcharSize + "em";
      }
    }
  },
  methods: {
    itemClick(e) {
      app.trackCpn(e, this.datas.componentName, this.datas.componentData)
      app.$themeToLink(this.datas.componentData.link);
    }
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.text-text {
  font-size: 16px;
}
</style>