xymp
/
frontend
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化查看大图

Browse Source
hn2.0
fanluyan 2 years ago
parent a084b9d39f
commit 94645bad0e
1 changed files with 187 additions and 102 deletions
Show Stats Download Patch File Download Diff File

289
src/views/components/carouselChart.vue
Unescape Escape View File

@ -8,23 +8,16 @@
bigPicPath.indexOf('nopic') == -1 &&
bigPicPath.indexOf('videos') == -1
"
:style="bigPicPath ? 'backgroundImage:url(' + bgbigPath + ')' : ''"
:style="bigPicPath ? 'backgroundImage:url(' + bigPicPath + ')' : ''"
>
<!-- @click="handleBigPicbox(bigPicPath)" -->
<!-- @click="handleBigPicbox(bigPicPath)" v-viewer="OptionssalseImg"-->
<div
class="nosee"
:style="'backgroundImage:url(' + bgbigPath + ')'"
:style="'backgroundImage:url(' + bigPicPath + ')'"
></div>
<div class="bigimgView" v-viewer="OptionssalseImg">
<img
ref="picJpg"
class="animImg"
:src="bigPicPath"
:data-source="bigPicPath"
@click="showbigpicPath(bigPicPath)"
/>
<div class="bigimgView" @click="handleBigPicbox(bigPicPath)">
<img ref="picJpg" class="animImg" :src="bigPicPath" />
</div>
<canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
<!-- <img ref="picJpg" class="animImg" :src="bigPicPath + '!1366x768'" /> -->
</div>
@ -45,28 +38,6 @@
/>
</div>
<div
v-if="
showBigpic &&
bigPicPath.indexOf('nopic') == -1 &&
bigPicPath.indexOf('videos') == -1
"
class="showPic"
@click="closePic"
>
<div class="picboxI">
<img
class="maskPic"
:src="bigPicPath"
ref="bigImage"
width="100%"
height="100%"
/>
</div>
<div class="viewClose">
<i @click="closePic" class="el-icon-close"></i>
</div>
</div>
<div class="arrow leftArrow" v-if="this.bigNum != 0" @click="leftClick">
<i class="el-icon-arrow-left"></i>
</div>
@ -182,6 +153,30 @@
<i class="el-icon-arrow-right"></i>
</div>
</div>
<!-- 点击出现大图 -->
<div v-if="showBigpic" class="showPic" v-loading="canvasloading">
<div
class="picboxI"
@mousewheel.prevent="rollImg"
:style="{
transform: 'scale(' + zoomD + ')',
}"
@mousedown="move"
>
<img
@load="imgOnload"
id="bigimg"
ref="bigimgref"
class="maskPic img"
:src="bigImgPath"
/>
<!-- <canvas id="bigCanvas" class="myCanvas" ref="myCanvasbig"></canvas> -->
</div>
<div class="viewClose" @click="closePic">
<i class="el-icon-close"></i>
</div>
</div>
</div>
</template>
@ -228,13 +223,16 @@ export default {
showBigpic: false,
flagline: true,
markEnable: "",
zoomD: 1,
canvasloading: false,
bigImgPath: "",
};
},
mounted() {
console.log(this.terminalPhoto);
this.mediaType = this.terminalPhoto[0].mediaType;
this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
this.bgbigPath = this.terminalPhoto[0].path + "!1366x768";
// this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
this.total = this.terminalPhoto.length / this.pagesize;
@ -261,26 +259,97 @@ export default {
watch: {
terminalPhoto: function (newVal, oldVal) {
this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
this.bgbigPath = this.terminalPhoto[0].path + "!1366x768";
this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
this.total = this.terminalPhoto.length / this.pagesize;
},
},
created() {},
methods: {
showbigpicPath(data) {
console.log(data);
if (data.includes("!")) {
this.bigPicPath = data.substring(0, data.length - 9);
// showbigpicPath(data) {
// console.log(data);
// if (data.includes("!")) {
// this.bigPicPath = data.substring(0, data.length - 9);
// } else {
// this.bigPicPath = data;
// this.bgbigPath = data;
// }
// console.log(this.bigPicPath);
// },
// handleBigPicbox() {
// this.showBigpic = true;
// },
//移动demo
move(e) {
console.log(e);
e.preventDefault();
// 获取元素
var personBox = document.querySelector(".picboxI");
var img = document.querySelector(".img");
var x = e.pageX - img.offsetLeft;
var y = e.pageY - img.offsetTop;
// 添加鼠标移动事件
personBox.addEventListener("mousemove", move);
console.log(personBox.addEventListener("mousemove", move));
console.log(personBox.style);
function move(e) {
console.log(personBox.style.left);
personBox.style.left = e.pageX - x + "px";
personBox.style.top = e.pageY - y + "px";
}
// 添加鼠标抬起事件，鼠标抬起，将事件移除
img.addEventListener("mouseup", function () {
personBox.removeEventListener("mousemove", move);
});
// 鼠标离开父级元素，把事件移除
personBox.addEventListener("mouseout", function () {
personBox.removeEventListener("mousemove", move);
});
},
// 缩放图片
rollImg(e) {
let direction = e.deltaY > 0 ? "down" : "up";
if (direction === "up") {
// 滑轮向上滚动
this.large();
} else {
this.bigPicPath = data;
this.bgbigPath = data;
// 滑轮向下滚动
this.Small();
}
console.log(this.bigPicPath);
},
handleBigPicbox() {
//大
large() {
this.$nextTick(() => {
if (this.zoomD < 6) {
this.zoomD += 0.1;
}
document.querySelector(
".picboxI"
).style.transform = `matrix(${this.zoomD}, 0, 0,${this.zoomD}, 0, 0)`;
});
},
// 小
Small() {
this.$nextTick(() => {
if (this.zoomD > 0.3) {
this.zoomD -= 0.1;
}
document.querySelector(
".picboxI"
).style.transform = `matrix(${this.zoomD}, 0, 0, ${this.zoomD}, 0, 0)`;
});
},
imgOnload() {
console.log("加载完成");
this.canvasloading = false;
},
//放大图
handleBigPicbox(val) {
console.log(val);
//this.canvasloading = true;
this.showBigpic = true;
this.bigImgPath = val.substring(0, val.length - 9);
},
closePic(data) {
console.log(data);
@ -347,7 +416,7 @@ export default {
);
this.bigPicPath = this.fiveList[this.activeSmall].path + "!1366x768";
this.bgbigPath = this.terminalPhoto[0].path + "!1366x768";
this.videopath = this.fiveList[this.activeSmall].thumb;
},
//大图点击左侧切换图片
@ -355,7 +424,7 @@ export default {
this.bigNum--; //执行下一张
this.mediaType = this.terminalPhoto[this.bigNum].mediaType;
this.bigPicPath = this.terminalPhoto[this.bigNum].path + "!1366x768";
this.bgbigPath = this.terminalPhoto[0].path + "!1366x768";
this.activeSmall--;
console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
console.log(this.page);
@ -383,7 +452,7 @@ export default {
this.bigNum++; //执行下一张
this.mediaType = this.terminalPhoto[this.bigNum].mediaType;
this.bigPicPath = this.terminalPhoto[this.bigNum].path + "!1366x768";
this.bgbigPath = this.terminalPhoto[0].path + "!1366x768";
this.activeSmall++;
console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
if (this.activeSmall > 4) {
@ -412,7 +481,7 @@ export default {
this.activeSmall = index;
this.mediaType = row.mediaType;
this.bigPicPath = row.path + "!1366x768";
this.bgbigPath = row.path + "!1366x768";
// this.bgbigPath = row.path + "!1366x768";
getCoordinate({
channelId: row.channelId,
needPic: "1",
@ -492,58 +561,6 @@ export default {
height: calc(100% - 32px);
box-sizing: border-box;
.showPic {
position: fixed;
background-color: rgba(0, 0, 0, 0.5);
bottom: 0;
left: 0;
overflow: hidden;
right: 0;
top: 0;
z-index: 9999;
display: flex;
cursor: pointer;
.picboxI {
position: relative;
max-width: 1366px;
max-height: 768px;
margin: auto;
animation-name: scaleDraw;
/*关键帧名称*/
animation-timing-function: ease;
/*动画的速度曲线*/
animation-iteration-count: 1;
/*动画播放的次数*/
animation-duration: 0.65s;
overflow: hidden;
border: 2px solid #f00;
img {
width: 100%;
height: 100%;
margin: auto;
}
}
.viewClose {
-webkit-app-region: no-drag;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
cursor: pointer;
height: 80px;
overflow: hidden;
position: absolute;
right: -40px;
top: -40px;
transition: background-color 0.15s;
width: 80px;
.el-icon-close {
bottom: 16px;
left: 16px;
position: absolute;
color: #fff;
font-size: 18px;
}
}
}
.picTop {
width: 100%;
height: 80%;
@ -741,6 +758,75 @@ export default {
right: 16px;
}
}
//放大图
.showPic {
position: fixed;
background-color: rgba(0, 0, 0, 50%);
bottom: 0;
left: 0;
overflow: hidden;
right: 0;
top: 0;
z-index: 9999;
width: 100%;
height: 100%;
display: flex;
cursor: pointer;
.picboxI {
position: relative;
width: 85%;
height: 85%;
margin: auto;
animation-name: scaleDraw;
/*关键帧名称*/
animation-timing-function: ease;
/*动画的速度曲线*/
animation-iteration-count: 1;
/*动画播放的次数*/
animation-duration: 0.65s;
display: flex;
align-items: center;
justify-content: center;
img {
max-width: 100%;
max-height: 100%;
margin: auto;
position: absolute;
cursor: grab;
}
.myCanvas {
position: absolute;
// top: 0;
// left: 0;
max-width: 100%;
max-height: 100%;
margin: 0 auto;
cursor: pointer;
pointer-events: none;
}
}
.viewClose {
-webkit-app-region: no-drag;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
cursor: pointer;
height: 80px;
overflow: hidden;
position: absolute;
right: -40px;
top: -40px;
transition: background-color 0.15s;
width: 80px;
.el-icon-close {
bottom: 16px;
left: 16px;
position: absolute;
color: #fff;
font-size: 18px;
}
}
}
}
@keyframes scaleDraw {
/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
@ -753,6 +839,5 @@ export default {
transform: scale(1);
}
}
// https://v1.github.surmon.me/vue-awesome-swiper/
</style>

Write Preview
Loading…
Cancel
Save