uni-app nvue页面 rich-text 中的a标签 在app中点击

在uni-app中，nvue页面使用rich-text组件来渲染富文本内容时，如果希望处理其中的<a>标签点击事件，可以通过自定义组件的方式来实现。由于nvue对DOM操作的支持有限，我们需要使用nvue特有的API和组件来完成这一功能。

下面是一个简单的示例，展示了如何在nvue页面中处理<a>标签的点击事件：

1. 创建nvue页面 (index.nvue):

<template>
  <div>
    <rich-text :nodes="htmlNodes" @linktap="handleLinkTap"></rich-text>
  </div>
</template>

<script>
export default {
  data() {
    return {
      htmlNodes: [
        {
          name: 'p',
          children: [
            {
              type: 'text',
              text: '这是一个链接: '
            },
            {
              type: 'element',
              tag: 'a',
              attrs: {
                href: 'https://www.example.com',
                class: 'custom-link'
              },
              children: [
                {
                  type: 'text',
                  text: '点击这里'
                }
              ]
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleLinkTap(event) {
      const { tagName, dataset } = event.currentTarget;
      if (tagName === 'a') {
        // 你可以在这里处理链接点击事件
        console.log('Clicked link:', dataset.href);
        // 示例：使用uni.navigateTo打开新的web-view页面
        uni.navigateTo({
          url: `/pages/webview/webview?url=${encodeURIComponent(dataset.href)}`
        });
      }
    }
  }
};
</script>

<style>
.custom-link {
  color: blue;
  text-decoration: underline;
}
</style>

1. 创建web-view页面 (webview.vue):

<template>
  <web-view :src="url"></web-view>
</template>

<script>
export default {
  data() {
    return {
      url: decodeURIComponent(this.$route.params.url)
    };
  }
};
</script>

注意：

• 在nvue的rich-text组件中，@linktap事件监听器用于捕获<a>标签的点击事件。
• 在handleLinkTap方法中，我们通过event.currentTarget获取点击的元素信息，并检查其tagName是否为a。
• 由于nvue不支持直接使用uni.navigateTo打开网页链接，我们通过传递链接参数到新的web-view页面来实现链接跳转。
• webview.vue页面使用<web-view>组件来加载并显示传入的URL。

这种方式可以确保在nvue页面中正确处理富文本中的链接点击事件，并在app中实现链接跳转。