vue+ElementUi+iframe實現輪播不同的網站

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

需要實現一個輪播圖,輪播內容是不同的網站,并實現鼠標滑動時停止輪播,當鼠標10秒內不動時繼續(xù)輪播,所以本文給大家介紹了用vue+ElementUi+iframe實現輪播不同的網站,需要的朋友可以參考下

工作需求：需要實現一個輪播圖，輪播內容是不同的網站，并實現鼠標滑動時停止輪播，當鼠標10秒內不動時繼續(xù)輪播

第一步：實現不同的網頁嵌入同一個頁面

應用的是iframe這個技術

代碼如下：

    <iframe
            id="huoduan_frame"
            frameborder="0"
            scrolling="auto"
            name="main"
            :src="http://baidu" src：指定內聯網頁的地址。
            style="
              height: 100%;
              visibility: inherit;
              width: 100%;
              z-index: 1;
              overflow: visible;
            "
          >
          </iframe>

把需要內聯的網頁地址寫進src就行，iframe具體的使用請查看下面大佬的文檔

iframe的基本介紹與使用

第二步：使用elementui的<el-carousel></el-carousel>輪播組件搭配iframe實現輪播

代碼如下：

   <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

第三步：上面已經實現可以輪播內聯網頁了，但是還需要監(jiān)聽鼠標移動事件來實現停止輪播

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

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

然后綁定鼠標移動事件，設置定時器，每隔一段時間判斷鼠標是否移動

全部代碼如下：

<!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, //設置超時時間： 8分鐘,
            timer: null,
            list: [
              // /* 網頁存放地址 */
,
            ],
          }
        },
        mounted() {
          // this.$refs.carousel.handleMouseEnter = () => {} /* 重置鼠標懸浮事件 */
          // setInterval(() => {
          //   this.OutTime() /* 每五秒判斷一次鼠標是否移動 */
          // }, 5000)
        },
        created() {},
        methods: {
          // 鼠標移動事件
          delHandleMouseEnter() {
            // this.autoplay = false
            // this.$refs.carousel.handleMouseEnter =
            //   () => {} /* 重置鼠標懸浮事件 */
            // this.oldTime = new Date().getTime() /* 鼠標移動重新計算時間 */
         
          },
          OutTime() {
            // clearInterval(this.timer);
            this.newTime = new Date().getTime() //更新未進行操作的當前時間
           
            //判斷是否超時不操作
            if (this.newTime - this.oldTime > this.outTime) {
              //超時后執(zhí)行的操作
              this.autoplay = true
            }
          },
        },
      })
    </script>
  </body>
</html>

完結撒花~~

以上就是vue+ElementUi+iframe實現輪播不同的網站的詳細內容，更多關于vue+ElementUi+iframe輪播網站的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: