<template>
  <div
    v-if="isPreview"
    style="min-width: 22px"
    :class="isMobile ? 'mobile-text' : ''"
    @click="onClick"
    v-html="nodes"
  ></div>
  <div v-else v-html="nodes"></div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    // 富文本内容
    nodes: {
      type: String,
      default: ''
    },
    // 是否开启预览图片功能
    isPreview: {
      type: Boolean,
      default: false
    },
    // 是否移动端
    isMobile: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    onClick(evt) {
      const targetTagName = (evt.target || evt.srcElement).tagName || '';
      if (targetTagName.toLowerCase() === 'img') {
        evt.stopPropagation();
        evt.cancelBubble = true;
      }
    }
  }
});
</script>

<style lang="scss" scoped>
:deep(p) {
  margin-bottom: 0;
}

:deep(img) {
  cursor: pointer;
}

.mobile-text {
  :deep(img) {
    max-width: 90% !important;
    height: auto !important;
  }
}
</style>
