经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
element-ui中轮播图自适应图片高度
来源:cnblogs  作者:安心_Blog  时间:2019/7/11 13:07:39  对本文有异议

哈哈,久违了各位。我又回来了,最近在做毕设,所以难免会遇到很多问题,需要解决很多问题,在万能的博友帮助下,终于解决了Element-ui中轮播图的图片高度问题,话不多说上代码。

那个axios的使用不重要,大致思路就是页面渲染前拿到当前窗口的宽度*图片比例给轮播图一个初始的高度,当窗后大小发生变化时,监听事件里将轮播图高度重新赋值即可,再次感谢两位博友的帮助

  1. <template>
  2. <div v-if="imgurl">
  3. <el-carousel :height="imgHeight+'px'" trigger="click">
  4. <el-carousel-item v-for="(item,index) in imgurl" :key="index">
  5. <img ref="image" style="width:100%;" :src="item" alt="轮播图" />
  6. </el-carousel-item>
  7. </el-carousel>
  8. </div>
  9. </template>
  10. <script>
  11. // 引入axios
  12. import axios from "axios";
  13. export default {
  14. name: "First",
  15. data() {
  16. return {
  17. imgurl: [],
  18. imgHeight: ""
  19. };
  20. },
  21. methods: {
  22. imgLoad() {
  23. this.$nextTick(function() {
  24. // 获取窗口宽度*图片的比例,定义页面初始的轮播图高度
  25. this.imgHeight = document.body.clientWidth*1/4
  26. });
  27. },
  28. getImgUrl() {
  29. axios
  30. .get("/carousel")
  31. .then(res => {
  32. for (var i = 0; i < res.data.message.length; i++) {
  33. const imgurl = `../../static/${res.data.message[i].imgurl}`;
  34. this.imgurl.push(imgurl);
  35. }
  36. // 获取到图片后,调用this.imgLoad()方法定义图片初始高度
  37. this.imgLoad();
  38. })
  39. .catch(error => {
  40. console.log(error);
  41. });
  42. }
  43. },
  44. mounted() {
  45. this.getImgUrl();
  46. // 监听窗口变化,使得轮播图高度自适应图片高度
  47. window.addEventListener("resize", () => {
  48. this.imgHeight = this.$refs.image[0].height;
  49. });
  50. }
  51. };
  52. </script>

原文链接:http://www.cnblogs.com/Azyzl/p/11169141.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号