vue后台管理系统项目 首页展示VR网页链接视频

需求：为了让用户更好的体验产品，现需要将后台管理系统首页的背景图片，替换成用户的VR网页链接视频（用户提供VR网页视频的网址）。

思考：背景图片使用的img标签了，而img标签本身不能直接打开视频或网页链接。img标签在HTML中主要用于定义图像，即插入图片到网页中。它的主要作用是展示图片，并可以通过src属性指定图片的来源路径，通过alt属性提供图片的替代文本。img标签并没有直接打开视频或网页链接的功能。如果我希望在网页中嵌入视频或链接，是可以使用其他HTML标签或技术：

• 嵌入视频：可以使用<video>标签在网页中嵌入视频。<video>标签支持多种视频格式，如MP4、WebM、Ogg等，并允许你通过controls属性添加播放控件，让用户能够播放、暂停和调节音量等。
• 打开网页链接：通常使用<a>（anchor）标签来创建指向另一个网页的链接。用户点击<a>标签定义的链接时，浏览器会导航到指定的URL。

但这次，我使用的是<iframe>标签，并通过组件方式打开的VR网页视频（注：<iframe>标签在HTML中嵌入内容（包括视频、网页链接等）是另一种常见的方法。<iframe>（内联框架）允许我在一个HTML文档中嵌入另一个HTML文档。这对于嵌入来自不同源的网页、视频播放器、地图等内容特别有用）。分两步完成，直接上代码：

1、在src/components文件夹下新建VueIframe组件；

// 组件
<template>  
  <div>
    <iframe :src="url" frameborder="0" width="100%" height="800px"></iframe>  
  </div>
</template>  

<script>  
export default {  
  name: 'VueIframe',  
  props: {  
    url: {  
      type: String,  
      required: true  
    }  
  }
}  
</script>  

<style scoped>  
iframe {  
  border: none; /* 移除边框 */  
}  
</style>

2、在后台管理界面首页所需位置，将组件 引入、注册、当标签使用即可；

<template>
    <div :style="{height:scrollerHeight}"> 
       <vue-iframe url="https://www.XXX.com/XX/XXX"/>
    </div>
</template>
</template>
<script>
import VueIframe from '@/components/VueIframe'; 
export default {
  components: {  
    VueIframe  
  }
}
</script>

以上，共勉！