imageviewer 是图片缩放插件吗？哪里有使用demo
1***@qq.com
- 发布：2019-05-22 18:02
- 更新：2019-05-23 11:21
- 阅读：757
imageviewer 是图片缩放插件吗？
分类：5+ SDK
the_wolf_life - 大前端领航者
<template>
<view class="picturePreview" v-show="previewShow">
<img class="back" @click="back" src="/static/images/shop/similarback.png" alt="返回按钮">
<view class="picture" @click="back">
<img id="img" :src="previewImg" alt="图片预览">
</view>
<view class="operationBtn">
<view class="narrow" @click="narrowImg">缩小</view>
<view class="enlarge" @click="enlargeImg">放大</view>
</view>
</view>
</template>
<script type="text/javascript">
export default {
name:"pictureEnlarge",
props:
{
previewImg:{
type:String,
},
previewShow: {
type:Boolean,
default:false
},
},
data() {
return {
imgWith:100,
}
},
methods: {
back(){
this.$emit("imgBack");
},
narrowImg(){
let img = document.getElementById("img");
if(this.imgWith - 20 >0){
this.imgWith-= 20;
}
img.style.width = this.imgWith+"%";
},
enlargeImg(){
let img = document.querySelector("#img");
this.imgWith += 20;
img.style.width = this.imgWith+"%";
}
}
}
</script>
<style>
.picturePreview{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: black;
z-index: 99999;
}
.back{
position: fixed;
top: 10upx;
left: 0;
}
.picture{
width: 100%;
height: 100%;
line-height: 100%;
overflow-x: scroll;
overflow-y: scroll;
display: flex;
justify-content: center;
align-items: center;
}
.picture img{
display: block;
width: 100%;
}
.operationBtn{
width: 100%;
height: 120upx;
padding: 30upx 50upx;
box-sizing: border-box;
position: fixed;
left: 0;
bottom: 0;
}
.enlarge{
height: 120upx;
float: right;
font-size: 40upx;
color: #fff;
}
.narrow{
height: 120upx;
float: left;
font-size: 40upx;
color: #fff;
}
</style>
这是我写过的图片预览组件 你可以参考 就是按钮点击缩放的
1***@qq.com (作者)
我想要一个可以在手机上，用手指自定义缩放图片的插件
2019-05-23 09:45
the_wolf_life
回复 1***@qq.com:暂时还没有手指缩放的插件 建议采用放大缩小按钮
2019-05-23 09:59
1***@qq.com (作者)
回复 the_wolf_life: 我刚尝试了previewImage 这个插件是全屏然后实现的放到缩小，我这个图片是拼接到一起的，点图片的时候为啥不能全屏呢，没有反应
2019-05-23 11:00
1***@qq.com (作者)
回复 the_wolf_life: 以前就是点击按钮放大的，只能放大一次，这次想改的更好用一点
2019-05-23 11:04