vue添加第三方网页访问时添加Loading

在Vue.js应用中，当需要加载第三方网页内容并显示一个加载状态时，通常会利用`<transition>`组件以及一些状态管理库如Vuex来控制加载过程。以下是一个简单的示例：

1. 首先，在组件模板里，你可以创建一个`v-loading`指令，表示是否正在加载外部内容。例如：

<template>
  <div v-if="!isLoading">
    <!-- 如果不是加载状态，显示默认内容 -->
    <iframe :src="externalUrl" @load="onExternalLoad"></iframe>
  </div>
  <transition name="fade-transition">
    <!-- 使用过渡效果，当isLoading为true时显示loading组件 -->
    <div v-if="isLoading" class="loading">正在加载...</div>
  </transition>
</template>

2. 然后在组件数据里初始化`isLoading`为`false`，并在`methods`里添加处理加载的方法：

export default {
  data() {
    return {
      isLoading: false,
      externalUrl: 'https://example.com',
    };
  },
  methods: {
    onExternalLoad() {
      // 当外部iframe加载完成时设置isLoading为false
      this.isLoading = false;
    },
    async fetchContent() {
      try {
        // 这里模拟异步请求，实际项目中应替换为第三方API请求
        await new Promise((resolve) => setTimeout(resolve, 2000));
        this.externalUrl = 'https://new-url.com'; // 更新外部链接地址
      } catch (error) {
        // 处理加载失败的情况
      }
    },
    async loadContent() {
      this.isLoading = true; // 设置加载状态
      await this.fetchContent(); // 异步加载内容
    },
  },
  // 在适当的时候触发加载操作，比如按钮点击事件
  async mounted() {
    this.loadContent();
  },
};

在这个例子中，当你点击按钮或者其他触发条件时，`loadContent`方法会被调用，开始加载内容，并显示`loading`组件。当第三方页面加载完成后，会更新`isLoading`状态。