快捷導(dǎo)航

vue+ElementUi+iframe實(shí)現(xiàn)輪播不同的網(wǎng)站

更新時(shí)間：2024年02月11日 09:12:07 作者：JPQLGZPW

需要實(shí)現(xiàn)一個(gè)輪播圖,輪播內(nèi)容是不同的網(wǎng)站,并實(shí)現(xiàn)鼠標(biāo)滑動(dòng)時(shí)停止輪播,當(dāng)鼠標(biāo)10秒內(nèi)不動(dòng)時(shí)繼續(xù)輪播,所以本文給大家介紹了用vue+ElementUi+iframe實(shí)現(xiàn)輪播不同的網(wǎng)站,需要的朋友可以參考下

工作需求：需要實(shí)現(xiàn)一個(gè)輪播圖，輪播內(nèi)容是不同的網(wǎng)站，并實(shí)現(xiàn)鼠標(biāo)滑動(dòng)時(shí)停止輪播，當(dāng)鼠標(biāo)10秒內(nèi)不動(dòng)時(shí)繼續(xù)輪播

第一步：實(shí)現(xiàn)不同的網(wǎng)頁(yè)嵌入同一個(gè)頁(yè)面

應(yīng)用的是iframe這個(gè)技術(shù)

代碼如下：

    <iframe
            id="huoduan_frame"
            frameborder="0"
            scrolling="auto"
            name="main"
            :src="http://baidu" src：指定內(nèi)聯(lián)網(wǎng)頁(yè)的地址。
            style="
              height: 100%;
              visibility: inherit;
              width: 100%;
              z-index: 1;
              overflow: visible;
            "
          >
          </iframe>

把需要內(nèi)聯(lián)的網(wǎng)頁(yè)地址寫進(jìn)src就行，iframe具體的使用請(qǐng)查看下面大佬的文檔

iframe的基本介紹與使用

第二步：使用elementui的<el-carousel></el-carousel>輪播組件搭配iframe實(shí)現(xiàn)輪播

代碼如下：

   <el-carousel
        :interval="15000"
        arrow="always"
        height="100vh"
        width="100%"
        ref="carousel"
        :autoplay="autoplay"
        @mousemove.native="delHandleMouseEnter"
      >
        <el-carousel-item v-for="(item,i) in list" :key="i">
          <iframe
            id="huoduan_frame"
            frameborder="0"
            scrolling="auto"
            name="main"
            :src="item"
            style="
              height: 100%;
              visibility: inherit;
              width: 100%;
              z-index: 1;
              overflow: visible;
            "
          >
          </iframe>
        </el-carousel-item>
      </el-carousel>

<el-carousel></el-carousel>組件的具體使用可以查看elementui官方文檔

Element - The world's most popular Vue UI framework

第三步：上面已經(jīng)實(shí)現(xiàn)可以輪播內(nèi)聯(lián)網(wǎng)頁(yè)了，但是還需要監(jiān)聽鼠標(biāo)移動(dòng)事件來實(shí)現(xiàn)停止輪播

el-carousel組件是自帶一個(gè)懸浮頁(yè)面停止輪播的功能的，因此需要先重置鼠標(biāo)的懸浮事件

   mounted() {
          this.$refs.carousel.handleMouseEnter = () => {} /* 重置鼠標(biāo)懸浮事件 */
        
        },

然后綁定鼠標(biāo)移動(dòng)事件，設(shè)置定時(shí)器，每隔一段時(shí)間判斷鼠標(biāo)是否移動(dòng)

全部代碼如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入樣式 -->
    <link
      rel="stylesheet"
       rel="external nofollow" 
    />
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  </head>
  <body>
    <div id="app">
      <el-carousel
        :interval="15000"
        arrow="always"
        height="100vh"
        width="100%"
        ref="carousel"
        :autoplay="autoplay"
        @mousemove.native="delHandleMouseEnter"
      >
        <el-carousel-item v-for="(item,i) in list" :key="i">
          <iframe
            id="huoduan_frame"
            frameborder="0"
            scrolling="auto"
            name="main"
            :src="item"
            style="
              height: 100%;
              visibility: inherit;
              width: 100%;
              z-index: 1;
              overflow: visible;
            "
          >
          </iframe>
        </el-carousel-item>
      </el-carousel>
    </div>
 
    <script>
      new Vue({
        el: '#app',
        data: function () {
          return {
            autoplay: true,
            oldTime: new Date().getTime(),
            newTime: new Date().getTime(),
            outTime: 120000, //設(shè)置超時(shí)時(shí)間： 8分鐘,
            timer: null,
            list: [
              // /* 網(wǎng)頁(yè)存放地址 */
,
            ],
          }
        },
        mounted() {
          // this.$refs.carousel.handleMouseEnter = () => {} /* 重置鼠標(biāo)懸浮事件 */
          // setInterval(() => {
          //   this.OutTime() /* 每五秒判斷一次鼠標(biāo)是否移動(dòng) */
          // }, 5000)
        },
        created() {},
        methods: {
          // 鼠標(biāo)移動(dòng)事件
          delHandleMouseEnter() {
            // this.autoplay = false
            // this.$refs.carousel.handleMouseEnter =
            //   () => {} /* 重置鼠標(biāo)懸浮事件 */
            // this.oldTime = new Date().getTime() /* 鼠標(biāo)移動(dòng)重新計(jì)算時(shí)間 */
         
          },
          OutTime() {
            // clearInterval(this.timer);
            this.newTime = new Date().getTime() //更新未進(jìn)行操作的當(dāng)前時(shí)間
           
            //判斷是否超時(shí)不操作
            if (this.newTime - this.oldTime > this.outTime) {
              //超時(shí)后執(zhí)行的操作
              this.autoplay = true
            }
          },
        },
      })
    </script>
  </body>
</html>

完結(jié)撒花~~

以上就是vue+ElementUi+iframe實(shí)現(xiàn)輪播不同的網(wǎng)站的詳細(xì)內(nèi)容，更多關(guān)于vue+ElementUi+iframe輪播網(wǎng)站的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: