zoukankan      html  css  js  c++  java
  • VUE Vue Element UI 改变走马灯的高度

    1、  页面代码:设置高度变量 :height="banH +'px'"

    <template>

      <div class="home">

        <div class="slider">

          <el-carousel :interval="5000" arrow="always" :height="banH +'px'">

            <el-carousel-item v-for="img in banImgList" :key="img.id">

              <img :src="img.image" class="picImg"/>

            </el-carousel-item>

          </el-carousel>

        </div>

      </div>

    </template>

    2、引入静态图片数据,初始化高度,加载后改变高度值 this.setbanH()

    export default {

      data() {

        return{

          banH:300,

          banImgList: [

            {id: 0, image: require('../../../static/images/b1.jpg')},

            {id: 1, image: require('../../../static/images/b2.jpg')},

            {id: 3, image: require('../../../static/images/banner3.jpg')},

            {id: 4, image: require('../../../static/images/banner4.jpg')}

          ],

        }

      },

      methods: {

        setbanH() {

          this.banH = 500

        }

      },

      mounted() {

        this.setbanH()

        window.addEventListener('resize', () => {

          this.setbanH()

        }, false)

      },

    }

    </script>

  • 相关阅读:
    python基础之流程控制
    多线程---阻塞队列
    多线程---线程同步
    多线程---线程实现
    多线程start();之后会开辟新的栈空间
    java中使用String的split分隔字符串注意事项
    IO流
    java中的多态
    关于java中的接口
    关于final关键字
  • 原文地址:https://www.cnblogs.com/haimeimei/p/13228390.html
Copyright © 2011-2022 走看看