vue+element-ui轮播图自适应

原创已于 2026-03-06 09:23:10 修改 · 2.4k 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #javascript #css

收录于

于 2020-07-03 13:30:00 首次发布

本文介绍了一个Vue.js项目中实现的图片轮播组件，该组件能够根据浏览器宽度自动调整图片高度，确保图片在不同屏幕尺寸下都能完美展示。通过使用Vue的数据响应机制和计算属性，实现了高效的自适应布局。

1.vue页面部分
在这里插入图片描述 2.javascript部分

<script>
export default {
  data () {
    return {
      // 图片地址数组
      img_list: [
        '/static/index/轮播1.png',
        '/static/index/轮播2.png'
      ],
      // 图片父容器高度
      bannerHeight: 1000,
      // 浏览器宽度
      screenWidth: 0
    }
  },
   methods: {
    setSize: function () {
      // 通过浏览器宽度(图片宽度)计算高度  
      this.bannerHeight = 600 / 1550 * this.screenWidth
    }
  },
  mounted () {
    // 首次加载时,需要调用一次
    this.screenWidth = window.innerWidth
    this.setSize()
    // 窗口大小发生改变时,调用一次
    window.onresize = () => {
      this.screenWidth = window.innerWidth
      this.setSize()
    }
  }
}
</script>

3.css部分
在这里插入图片描述