imgText.vue

<template>
  <div class="img-text">
    <!-- 顶部文字 -->
    <div v-if="datas.componentData.initcharSite=='outer_top'">
      <div
        :style="{'font-size':datas.componentData.initcharSize+'em','text-align':datas.componentData.initcharAlign,'color':datas.componentData.fontColor}"
        :class="datas.componentData.titles.length > 0 ? 'textH' : ''"
      >{{datas.componentData.titles}}</div>
      <div
        :style="{'font-size':datas.componentData.initcharSize+'em','text-align':datas.componentData.initcharAlign,'color':datas.componentData.fontColor}"
        :class="datas.componentData.abstract.length > 0 ? 'textC' : ''"
      >{{datas.componentData.abstract}}</div>
    </div>
    <!-- 图片区域 -->
    <div class="imgcontent" @click="itemClick()">
      <image :src="datas.componentData.imageUrl" alt lazy-load="true" mode="widthFix" :style="{'width':'100%','display':'block'}" ></image>
      <!-- 内部文字 -->
      <div
        v-if="datas.componentData.initcharSite==='inner_top' || datas.componentData.initcharSite==='inner_center' || datas.componentData.initcharSite==='inner_bottom'"
        class="text-class"
        :style="[datas.componentData.initcharSite=='inner_bottom'?{'justify-content': 'flex-end'}:datas.componentData.initcharSite=='inner_top'?{'justify-content': 'flex-start'}:{'justify-content': 'center'}]"
      >
        <div
          :style="{'font-size':datas.componentData.initcharSize+'em','text-align':datas.componentData.initcharAlign,'color':datas.componentData.fontColor}"
          :class="datas.componentData.titles.length > 0 ? 'textH' : ''"
        >{{datas.componentData.titles}}</div>
        <div
          :style="{'font-size':datas.componentData.initcharSize+'em','text-align':datas.componentData.initcharAlign,'color':datas.componentData.fontColor}"
          :class="datas.componentData.abstract.length > 0 ? 'textC' : ''"
        >{{datas.componentData.abstract}}</div>
      </div>
    </div>
    <!-- 底部文字 -->
    <div v-if="datas.componentData.initcharSite=='outer_bottom'">
      <div
        :style="{'font-size':datas.componentData.initcharSize+'em','text-align':datas.componentData.initcharAlign,'color':datas.componentData.fontColor}"
        :class="datas.componentData.titles.length > 0 ? 'textH' : ''"
      >{{datas.componentData.titles}}</div>
      <div
        :style="{'font-size':datas.componentData.initcharSize+'em','text-align':datas.componentData.initcharAlign,'color':datas.componentData.fontColor}"
        :class="datas.componentData.abstract.length > 0 ? 'textC' : ''"
      >{{datas.componentData.abstract}}</div>
    </div>
  </div>
</template>
<script>
const app = getApp()
export default {
  name : "img-text",
  props: {
    datas: {
      type: Object,
      default: () => {
        return {
          id: "",
          pageCode: 0,
          pageType: 0,
          queueNumber: 0,
          componentName: "图文",
          componentCode: "img-text",
          code: 1,
          componentData: {
            titles: "这是标题",
            abstract:
              "摘要文字 这是一个图文组件,可以上传图片和编辑文字，并且对图片大小、文字大小以及位置进行自定义编辑,快使用它!",
            imageUrl:
              "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2546973851,4267148231&fm=26&gp=0.jpg",
            link: {
              name: "",
              link: ""
            },
            initimgSize: "80%", //图片默认尺寸
            initcharSize: 1,
            initcharAlign: "left",
            initcharSite: "left"
          }
        };
      }
    }
  },
  data() {
    return {};
  },
  computed: {},
  methods: {
    itemClick() {
      app.$themeToLink(this.datas.componentData.link);
    }
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.img-text {
  font-size: 16px;
  .imgcontent {
    overflow: hidden;
    position: relative;
    width: 100%;
    text-align: center;
    .text-class {
      // vertical-align: middle;
      height: 100%;
      position: absolute;
      top: 0;
      display: flex;
      flex-direction: column;
    }
    image{
      vertical-align: top/middle/bottom;
    }
  }
  .textH {
    font-weight: bold;
    margin: 16px 16px;
  }
  .textC {
    padding: 16px 16px;
  }
}
</style>