vue项目中的图片操作【二】

ZBY52031
479 阅读1分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情 >>加油！还要继续努力哦~祝大家都能成为，自由而无用的灵魂。

img标签图片居中

img标签图片居中，当然啦！就单纯设置img标签属性，让它居中还是有点难度的，所以我们需要借助div标签。示例：

<template>
  <div style="width: 100%; text-align: center;">
    <img  src="https://pic.netbian.com/uploads/allimg/221201/005454-1669827294d312.jpg" alt="">
  </div>
</template>

<script>
export default {
  name: "ImgUtil"
}
</script>

<style scoped>

</style>

主要就设置div标签width和text-align属性【style="width: 100%; text-align: center;"】这样搞下来看起来好像有点简单。

img标签图片放大预览

上面粗略的写了一下图片居中，那如果要实现点击图片预览呢？嘘~要实现点击图片预览，可以使用iView的【Modal 对话框】组件哦！示例：

<template>
  <div>
    <div style="width: 100%; text-align: center;">
      <img :src="imgUrl" alt="" @click="previewImg">
    </div>
    <Modal title="图片预览" v-model="showModal">
      <div>
        <img :src="imgUrl">
      </div>
    </Modal>
  </div>

</template>

<script>
export default {
  name: "ImgUtil",
  data() {
    return {
      imgUrl: "https://pic.netbian.com/uploads/allimg/221201/005454-1669827294d312.jpg",
      showModal: false,
    }
  },
  methods: {
    previewImg() {
      this.showModal = true;
    },
  }
}
</script>

<style scoped>

</style>

Modal 组件比较灵活，有很多自定义样式 API 和 Slot，可以自由控制整个 Modal 的各个组成部分，比如页头、页脚、关闭按钮。

动态加载图片瀑布流

其实也没有很麻烦，就简单的展示图片列表，还是喜欢用iView。示例：

<template>
  <div>
    <!-- 以下是触底加载-->
    <div :style="{height:hei+'px'}" style="overflow-x:hidden;overflow-y:scroll;" @scroll="handleScroll($event)">
      <Row>
        <Col :sm="8" :md="6" :lg="4" v-for="item in dataList" :key="item.imgId">
          <div>
            <div style="width:200px; text-align: center;">
              <img :src="item.imgUrl" width="150px" height="150px" alt="" @click="previewImg(item.imgUrl)">
              <p style="font-size: small;color: #666;margin: 4px;">{{ item.imgDesc }}</p>
            </div>
            <p style="font-size: small;color: #666;margin: 4px;">{{ item.imgDesc + "，长描述长描述长描述" }}</p>
          </div>
        </Col>
      </Row>
    </div>

    <Modal title="图片预览" v-model="showModal">
      <div>
        <img :src="imgUrl" alt="">
      </div>
    </Modal>
  </div>

</template>

<script>
export default {
  name: "ImgUtil",
  data() {
    return {
      dataList: [
        {
          "imgId": 1,
          "imgUrl": "https://i.postimg.cc/g0byy6Fm/20220922110851.jpg",
          "imgDesc": "图片描述"
        },
        {
          "imgId": 2,
          "imgUrl": "https://i.postimg.cc/g0byy6Fm/20220922110851.jpg",
          "imgDesc": "图片描述"
        },
        {
          "imgId": 3,
          "imgUrl": "https://i.postimg.cc/g0byy6Fm/20220922110851.jpg",
          "imgDesc": "图片描述"
        },
        {
          "imgId": 4,
          "imgUrl": "https://i.postimg.cc/g0byy6Fm/20220922110851.jpg",
          "imgDesc": "图片描述"
        },
        {
          "imgId": 5,
          "imgUrl": "https://i.postimg.cc/g0byy6Fm/20220922110851.jpg",
          "imgDesc": "图片描述"
        },
        {
          "imgId": 6,
          "imgUrl": "https://i.postimg.cc/g0byy6Fm/20220922110851.jpg",
          "imgDesc": "图片描述"
        },
        {
          "imgId": 7,
          "imgUrl": "https://i.postimg.cc/g0byy6Fm/20220922110851.jpg",
          "imgDesc": "图片描述"
        },
        {
          "imgId": 8,
          "imgUrl": "https://i.postimg.cc/g0byy6Fm/20220922110851.jpg",
          "imgDesc": "图片描述"
        },
        {
          "imgId": 9,
          "imgUrl": "https://i.postimg.cc/g0byy6Fm/20220922110851.jpg",
          "imgDesc": "图片描述"
        },
        {
          "imgId": 10,
          "imgUrl": "https://i.postimg.cc/g0byy6Fm/20220922110851.jpg",
          "imgDesc": "图片描述"
        },
        {
          "imgId": 11,
          "imgUrl": "https://i.postimg.cc/g0byy6Fm/20220922110851.jpg",
          "imgDesc": "图片描述"
        },
        {
          "imgId": 12,
          "imgUrl": "https://i.postimg.cc/g0byy6Fm/20220922110851.jpg",
          "imgDesc": "图片描述"
        },
        {
          "imgId": 13,
          "imgUrl": "https://i.postimg.cc/g0byy6Fm/20220922110851.jpg",
          "imgDesc": "图片描述"
        },
        {
          "imgId": 14,
          "imgUrl": "https://i.postimg.cc/g0byy6Fm/20220922110851.jpg",
          "imgDesc": "图片描述"
        },
        {
          "imgId": 15,
          "imgUrl": "https://i.postimg.cc/g0byy6Fm/20220922110851.jpg",
          "imgDesc": "图片描述"
        },
        {
          "imgId": 16,
          "imgUrl": "https://i.postimg.cc/g0byy6Fm/20220922110851.jpg",
          "imgDesc": "图片描述"
        },
        {
          "imgId": 17,
          "imgUrl": "https://i.postimg.cc/g0byy6Fm/20220922110851.jpg",
          "imgDesc": "图片描述"
        },
        {
          "imgId": 18,
          "imgUrl": "https://i.postimg.cc/g0byy6Fm/20220922110851.jpg",
          "imgDesc": "图片描述"
        },
        {
          "imgId": 19,
          "imgUrl": "https://i.postimg.cc/g0byy6Fm/20220922110851.jpg",
          "imgDesc": "图片描述"
        },
        {
          "imgId": 20,
          "imgUrl": "https://i.postimg.cc/g0byy6Fm/20220922110851.jpg",
          "imgDesc": "图片描述"
        },
      ],
      dataTotal: 0,
      imgUrl: "",
      showModal: false,
      hei: document.body.offsetHeight - 210,
    }
  },
  methods: {
    previewImg(url) {
      this.showModal = true;
      this.imgUrl = url;
    },
    // 触底加载
    handleScroll(e) {
      let el = e.target
      //判断是否到达div容器底部
      if (el.scrollTop + el.clientHeight >= el.scrollHeight && this.dataTotal < this.dataList.length) {
        let addList = [
          {
            "imgId": 21,
            "imgUrl": "https://i.postimg.cc/g0byy6Fm/20220922110851.jpg",
            "imgDesc": "图片描述"
          },
          {
            "imgId": 22,
            "imgUrl": "https://i.postimg.cc/g0byy6Fm/20220922110851.jpg",
            "imgDesc": "图片描述"
          },
          {
            "imgId": 23,
            "imgUrl": "https://i.postimg.cc/g0byy6Fm/20220922110851.jpg",
            "imgDesc": "图片描述"
          },
          {
            "imgId": 24,
            "imgUrl": "https://i.postimg.cc/g0byy6Fm/20220922110851.jpg",
            "imgDesc": "图片描述"
          },
          {
            "imgId": 25,
            "imgUrl": "https://i.postimg.cc/g0byy6Fm/20220922110851.jpg",
            "imgDesc": "图片描述"
          },
          {
            "imgId": 26,
            "imgUrl": "https://i.postimg.cc/g0byy6Fm/20220922110851.jpg",
            "imgDesc": "图片描述"
          },
          {
            "imgId": 27,
            "imgUrl": "https://i.postimg.cc/g0byy6Fm/20220922110851.jpg",
            "imgDesc": "图片描述"
          },
          {
            "imgId": 28,
            "imgUrl": "https://i.postimg.cc/g0byy6Fm/20220922110851.jpg",
            "imgDesc": "图片描述"
          },
          {
            "imgId": 29,
            "imgUrl": "https://i.postimg.cc/g0byy6Fm/20220922110851.jpg",
            "imgDesc": "图片描述"
          },
          {
            "imgId": 30,
            "imgUrl": "https://i.postimg.cc/g0byy6Fm/20220922110851.jpg",
            "imgDesc": "图片描述"
          },
        ];
        this.dataList = this.dataList.concat(addList);
        this.dataTotal = this.dataList.length;
      }
    },
  }
}
</script>

<style scoped>

</style>

上面主要用了【Grid 栅格】iView的栅格布局还是非常友好的，页面排版也很美观。iView采用24栅格系统，也就是将区域进行24等分【每个row中的col总和应该为24】

<Col :sm="8" :md="6" :lg="4" v-for="item in dataList" :key="item.imgId">

sm md lg属性也是参照 Bootstrap 的 响应式设计，详细信息可以看官方文档哦。接下来重点就是：触底加载@scroll="handleScroll($event)"

el.scrollTop + el.clientHeight >= el.scrollHeight

上述判断条件是判断是否到达div容器底部，写的时候一定要注意div容器需要设置高度。

avatar
文章
阅读
粉丝