2023-11-8-1
This commit is contained in:
X1627315083
229
src/component/HomePage/scaleImage.vue
Normal file
229
src/component/HomePage/scaleImage.vue
Normal file
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<a-modal
|
||||
class="scaleImage_modal"
|
||||
v-model:visible="scaleImage"
|
||||
:footer="null"
|
||||
width="65%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:mask="false"
|
||||
:destroyOnClose="true"
|
||||
>
|
||||
<div class="scaleImage_btn">
|
||||
<div class="collection_closeIcon left" @click.stop="cancelDsign()">
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
</div>
|
||||
<div class="collection_closeIcon" @click.stop="download()">
|
||||
<i class="fi fi-rr-down-to-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scaleImage_content">
|
||||
<img :src="scaleImageList[scaleImageIndex]?.imgUrl">
|
||||
</div>
|
||||
<div class="scaleImage_nav">
|
||||
<div class="nav_left">
|
||||
<i class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
|
||||
</div>
|
||||
<div class="nav_list">
|
||||
<img v-for="item,index in scaleImageList" @click="setScaleImageIndex(index)" :class="{active:index == scaleImageIndex}" :src="item?.imgUrl" :key="item.id">
|
||||
</div>
|
||||
<div class="nav_right">
|
||||
<i class="fi fi-rr-arrow-small-right" @click.stop="nextStep()"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<a-button type="primary" @click="() => setVisible(true)">show image preview</a-button>
|
||||
<a-image
|
||||
:width="200"
|
||||
:style="{ display: 'none' }"
|
||||
:preview="{
|
||||
visible,
|
||||
onVisibleChange: setVisible,
|
||||
}"
|
||||
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
/>
|
||||
</div> -->
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, h, ref ,computed,reactive, nextTick} from "vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { getCookie } from "@/tool/cookie";
|
||||
import domTurnImg from '@/tool/domTurnImg'
|
||||
import { downloadIamge } from "@/tool/util";
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
let scaleImage: any = ref(false);
|
||||
let loadingShow = ref(false)
|
||||
const visible = ref<boolean>(false);
|
||||
const setVisible = (value:any): void => {
|
||||
visible.value = value;
|
||||
};
|
||||
let scaleImageList:any = ref([
|
||||
|
||||
])
|
||||
let scaleImageIndex:any = ref(0)
|
||||
return {
|
||||
scaleImage,
|
||||
loadingShow,
|
||||
visible,
|
||||
setVisible,
|
||||
scaleImageList,
|
||||
scaleImageIndex,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// moodTemplateId: "", //模板id
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
init(list:any){
|
||||
this.scaleImage = true
|
||||
console.log(list);
|
||||
this.scaleImageList = list
|
||||
// let scaleImageList = this.store.state.UploadFilesModule.moodboard
|
||||
},
|
||||
cancelDsign(){
|
||||
this.scaleImage = false
|
||||
this.scaleImageList = []
|
||||
this.scaleImageIndex = 0
|
||||
},
|
||||
lastStep(){
|
||||
|
||||
if(this.scaleImageIndex <= 0){
|
||||
}else{
|
||||
this.scaleImageIndex -= 1
|
||||
}
|
||||
},
|
||||
nextStep(){
|
||||
if(this.scaleImageIndex >= this.scaleImageList.length-1){
|
||||
}else{
|
||||
this.scaleImageIndex += 1
|
||||
}
|
||||
},
|
||||
download(){
|
||||
downloadIamge(this.scaleImageList[this.scaleImageIndex].imgUrl)
|
||||
},
|
||||
setScaleImageIndex(index:any){
|
||||
this.scaleImageIndex = index
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.scaleImage_modal {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
.ant-modal-body {
|
||||
padding: 0;
|
||||
// height: calc(65vh - 6.4rem);
|
||||
height: 65rem;
|
||||
// background-color: #181818;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ant-modal-btn{
|
||||
|
||||
}
|
||||
.scaleImage_btn {
|
||||
.collection_closeIcon{
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
right: 2rem;
|
||||
cursor: pointer;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&.left{
|
||||
left: 2rem;
|
||||
}
|
||||
.fi-rr-cross-small::before{
|
||||
padding: .2rem;
|
||||
border-radius: 5px;
|
||||
border: solid 2px rgba(0, 0, 0, 0.22);
|
||||
transition: .3s all;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
&.collection_closeIcon:hover .fi-rr-cross-small::before{
|
||||
border: solid 2px rgba(0, 0, 0, 5);
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
.fi-rr-down-to-line{
|
||||
transition: .3s all;
|
||||
color: rgba(0, 0, 0, .5);
|
||||
}
|
||||
.fi-rr-down-to-line:hover{
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.scaleImage_content{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
margin-top: 5rem;
|
||||
img{
|
||||
width: auto;
|
||||
max-width: 50rem;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.scaleImage_nav{
|
||||
flex: 1;
|
||||
margin: 2.5rem 0rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
.nav_left,.nav_right{
|
||||
cursor: pointer;
|
||||
i{
|
||||
transition: .3s all;
|
||||
color: rgba(0, 0, 0, .5);
|
||||
}
|
||||
}
|
||||
.nav_left:hover,.nav_right:hover{
|
||||
i{
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
.nav_list{
|
||||
margin: 0 2rem;
|
||||
img{
|
||||
max-width: 5rem;
|
||||
max-height: 5rem;
|
||||
object-fit: cover;
|
||||
object-position: 50%,50%;
|
||||
margin-left: 1rem;
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
padding: .1rem;
|
||||
&.active{
|
||||
border: 1px solid #aaaaaa;
|
||||
}
|
||||
}
|
||||
img:nth-child(1){
|
||||
margin-left: 0rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user