minnan/src/components/display/parse/ParseNodeRender.vue

<template>
  <!-- 图片 -->
  <image 
    v-if="node.tag === 'img'" 
    :id="node.attrs?.id" 
    :class="'_img ' + (node.attrs?.class || '')" 
    :style="node.attrs?.style || {}" 
    :src="node.attrs?.src || ''" 
    mode="widthFix" 
    @click="preview(node.attrs?.src as string)"
  />
  
  <!-- 换行 -->
  <text v-else-if="node.tag === 'br'">\n</text>
  
  <!-- 链接 -->
  <view 
    v-else-if="node.tag === 'a'" 
    :id="node.attrs?.id" 
    :class="(node.attrs?.href ? '_a ' : '') + (node.attrs?.class || '')" 
    hover-class="_hover" 
    :style="'display:inline;' + (node.attrs?.style || '')" 
    @tap.stop="linkTap" 
  >
    <ParseNodeRender 
      v-for="(child, index) in node.children" 
      :key="index" 
      :node="child" 
    />
  </view>
  
  <!-- 视频 -->
  <video 
    v-else-if="node.tag === 'video'" 
    :id="node.attrs?.id" 
    :class="node.attrs?.class || ''" 
    :style="node.attrs?.style || {}" 
    :autoplay="Boolean(node.attrs?.autoplay || false)" 
    :controls="Boolean(node.attrs?.controls || true)" 
    :loop="Boolean(node.attrs?.loop || false)" 
    :muted="Boolean(node.attrs?.muted || false)" 
    :object-fit="node.attrs?.['object-fit'] || 'contain'" 
    :poster="node.attrs?.poster as string || ''" 
    :src="node.attrs?.src as string || ''" 
  />
  
  <!-- 音频 -->
  <audio 
    v-else-if="node.tag === 'audio'" 
    :id="node.attrs?.id" 
    :class="node.attrs?.class || ''" 
    :style="node.attrs?.style || {}" 
    :author="node.attrs?.author || ''" 
    :controls="Boolean(node.attrs?.controls || true)" 
    :loop="Boolean(node.attrs?.loop || false)" 
    :name="node.attrs?.name || ''" 
    :poster="node.attrs?.poster || ''" 
    :src="node.attrs?.src as string || ''" 
  />
  
  <!-- 嵌入小程序内容 -->
  <view v-else-if="node.tag === 'inject-mp'">
    <InjectMPRender :type="node.attrs?.type as string || ''" v-bind="node.attrs" />
  </view>

  <!-- 其他标签 -->
  <view
    v-else-if="node.tag !== 'text'"
    :id="node.attrs?.id"
    :data-tag="node.tag"
    :class="node.attrs?.class || ''"
    :style="style"
  >
    <ParseNodeRender
      v-for="(child, index) in node.children"
      :key="index"
      :node="child"
    />
  </view>

  <!-- 文本 -->
  <text 
    v-else
    :style="style"
    :class="node.attrs?.class || ''" 
  >
    {{ node.attrs?.content }}
  </text>
</template>

<script setup lang="ts">
import { computed, inject, ref, type Ref } from 'vue';
import ParseNodeRender from './ParseNodeRender.vue';
import type { ParseNode } from './Parse';
import InjectMPRender from '@/common/components/rich/InjectMPRender.vue';

const props = withDefaults(defineProps<{
  node: ParseNode;
}>(), {
});

const tagStyle = inject<Ref<Record<string, string>>>('tagStyle', ref({}));
const style = computed(() => 
  [
    (props.node.attrs?.style || ''), 
    (tagStyle.value[props.node.tag] || ''),
    isInline.value ? 'display:inline;' : '',
  ].join(';'),
);
const isInline = computed(() => ['span','a','large','small'].includes(props.node.tag));

// 链接点击事件
const linkTap = (e: any) => {
  const href = props.node.attrs?.href as string;
  if (href) {
    if (href[0] === '#') {
      // 跳转锚点
      // 实现锚点跳转逻辑
    } else if (href.includes('://')) {
      // 外部链接
      uni.showModal({
        title: '打开链接',
        content: href,
        success: (res) => {
          if (res.confirm) {
            // #ifdef H5
            window.open(href);
            // #endif
            // #ifdef MP
            uni.setClipboardData({
              data: href,
              success: () => {
                uni.showToast({
                  title: '链接已复制',
                  duration: 2000
                });
              }
            });
            // #endif
            // #ifdef APP-PLUS
            plus.runtime.openWeb(href);
            // #endif
          }
        }
      });
    } else {
      // 跳转页面
      uni.navigateTo({
        url: href,
        fail: () => {
          uni.switchTab({
            url: href,
            fail: () => {}
          });
        }
      });
    }
  }
};

function preview(url: string) {
  if (url) {
    uni.previewImage({
      urls: [url],
    })
  }
}

defineOptions({
  options: {
    inheritAttrs: false,
    virtualHost: true,
  }
})
</script>

<style scoped>
/* a 标签默认效果 */
._a {
  padding: 1.5px 0;
  color: #366092;
  word-break: break-all;
}

/* a 标签点击态效果 */
._hover {
  text-decoration: underline;
  opacity: 0.7;
}

/* 图片默认效果 */
._img {
  max-width: 100%;
  -webkit-touch-callout: none;
}

/* 视频默认效果 */
._video {
  width: 300px;
  height: 225px;
}
</style>