加油!还要继续努力哦~祝大家都能成为,自由而无用的灵魂。
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容器需要设置高度。
标签:vue,jpg,https,imgDesc,操作,postimg,20220922110851,imgUrl,图片 From: https://blog.51cto.com/u_15426660/5927367