Skip to content

visualcloud / Vmatrix-client

Go to a project
Commit b0295384 by hank
Options

修改裁剪功能

parent 2c576a15
Showing with 111 additions and 21 deletions
src/views/tempaltes/editMenu.vue
......@@ -154,8 +154,24 @@
:img="VueCropperOption.img"
:canMove="false"
:autoCrop="VueCropperOption.autoCrop"
:fixedNumber="VueCropperOption.fixedNumber"
:fixed="VueCropperOption.fixed"
:outputType="VueCropperOption.outputType"
></vueCropper>
<div class="scale-container">
<div class="scale-item" :class="VueCropperOption.fixedState == 0 ? 'scale-item-active' : ''" @click="changeFixedState(0)">
<img class="scale-icon" src="../../assets/img/16-9.png" alt />
<div>16:9</div>
</div>
<div class="scale-item" :class="VueCropperOption.fixedState == 1 ? 'scale-item-active' : ''" @click="changeFixedState(1)">
<img class="scale-icon" src="../../assets/img/9-16.png" alt />
<div>9:16</div>
</div>
<div class="scale-item" :class="VueCropperOption.fixedState == 2 ? 'scale-item-active' : ''" @click="changeFixedState(2)">
<img class="scale-icon" src="../../assets/img/auto.png" alt />
<div>自定义</div>
</div>
</div>
<div class="save-img-btn" @click="saveCropper">
<!-- <van-button @click="VueCropperOption.img = ''">取消</van-button> -->
确定
......@@ -190,6 +206,10 @@ export default {
type: Boolean,
default: true
},
templateShow: {
type: String,
default: "HORIZONTAL"
},
schemaData: {
type: Object,
default: () => {}
......@@ -199,9 +219,15 @@ export default {
selectDataCom,
VueCropper
},
created() {
console.log(this.schemaData);
mounted() {
console.log(this.tempalteShow, "this.tempalteShow");
if (this.tempalteShow === "HORIZONTAL") {
this.VueCropperOption.fixedNumber = [16, 9];
} else {
this.VueCropperOption.fixedNumber = [9, 16];
}
},
created() {},
data() {
return {
activeName: "",
......@@ -212,14 +238,42 @@ export default {
show: false
},
VueCropperOption: {
fixedState: 0,
img: "",
outputType: "png",
autoCrop: true,
fixed: true,
fixedNumber: [16, 9],
preImg: ""
}
};
},
methods: {
changeFixedState(state) {
this.VueCropperOption.fixedState = state
if(state === 0) {
this.VueCropperOption.fixedNumber = [16,9]
this.VueCropperOption.fixed = true
this.VueCropperOption.autoCrop = false
setTimeout(() => {
this.VueCropperOption.autoCrop = true
}, 300)
} else if(state === 1) {
this.VueCropperOption.fixedNumber = [9,16]
this.VueCropperOption.fixed = true
this.VueCropperOption.autoCrop = false
setTimeout(() => {
this.VueCropperOption.autoCrop = true
}, 300)
} else {
this.VueCropperOption.fixedNumber = [1,1]
this.VueCropperOption.fixed = false
this.VueCropperOption.autoCrop = false
setTimeout(() => {
this.VueCropperOption.autoCrop = true
}, 300)
}
},
uploadFile(data) {
this.$toast.loading({
mask: true,
......@@ -243,19 +297,19 @@ export default {
});
},
onBlur() {
var top = window.scrollY
console.log(top)
var top = window.scrollY;
console.log(top);
window.scrollTo(0, 0);
var time = setTimeout(() => {
window.scrollTo(0, top);
clearTimeout(time)
}, 100)
clearTimeout(time);
}, 100);
},
valueChange2() {
console.log(this.schemaData)
console.log(this.schemaData);
setTimeout(() => {
this.$emit("setList", this.schemaData);
}, 100)
}, 100);
this.$emit("setList", this.schemaData);
},
setList() {
......@@ -297,7 +351,14 @@ export default {
return getHostUrl(this.frameUrl, dataUrl);
},
uploadAfter(file) {
// console.log(file);
if (this.templateShow === "HORIZONTAL") {
this.VueCropperOption.fixedNumber = [16, 9];
this.VueCropperOption.fixedState = 0
} else {
this.VueCropperOption.fixedNumber = [9, 16];
this.VueCropperOption.fixedState = 1
}
if (String(file.file.type).indexOf("image") !== -1) {
this.$emit("setClipImg", true);
this.VueCropperOption.img = file.content;
......@@ -364,7 +425,7 @@ export default {
.cropper-container {
display: flex;
flex-direction: column;
background-color: #666;
background-color: black;
top: 0;
left: 0;
bottom: 0;
......@@ -375,23 +436,47 @@ export default {
// overflow: hidden;
z-index: 10000000;
.vue-cropper {
height: calc(100vh - 84px);
height: calc(100vh - 130px);
// width:
z-index: 100000000;
}
.scale-container {
padding-top: 15px;
display: flex;
justify-content: center;
.scale-item {
color: white;
font-size: 13px;
font-weight: 300px;
width: 20.3%;
text-align: center;
opacity: 0.6;
.scale-icon {
width: 22px;
height: 22px;
margin-bottom: 9px;
}
}
.scale-item-active {
opacity: 1;
}
}
.save-img-btn {
width: 294px;
width: 177px;
height: 44px;
line-height: 44px;
font-size: 18px;
margin: 20px auto;
margin-bottom: 20px;
background: linear-gradient(
266deg,
rgba(255, 171, 32, 1) 0%,
rgba(255, 114, 14, 1) 100%
);
box-shadow: 0px 2px 8px 0px rgba(255, 167, 31, 0.31);
border-radius: 30px;
// background: linear-gradient(
// 266deg,
// rgba(255, 171, 32, 1) 0%,
// rgba(255, 114, 14, 1) 100%
// );
border: 1px solid rgba(255, 255, 255, 1);
// box-shadow: 0px 2px 8px 0px rgba(255, 167, 31, 0.31);
// border-radius: 30px;
border-radius: 19px;
text-align: center;
color: white;
z-index: 1000000;
......
src/views/tempaltes/editMore.vue
......@@ -217,6 +217,7 @@
:item="templateData.listData[currentPage].itemList[itemListIndex]"
:schemaData="templateData.listData[currentPage].schemaData"
:frameUrl="templateData.frameUrl"
:templateShow="templateData.templateShow"
@setList="setList"
@setClipImg="setClipImg"
></editMenu>
......@@ -684,7 +685,9 @@ export default {
// window.sessionStorage.setItem("filmId");
this.navToWx(filmId);
// this.$router.back();
});
}).catch(() => {
this.$toast.clear();
}) ;
} else {
// "templateId": "string",
// "resourceId": "string",
......@@ -703,7 +706,9 @@ export default {
window.sessionStorage.setItem("filmId", res.data.data);
this.templateData.filmId = res.data.data;
this.navToWx(res.data.data);
});
}).catch(() => {
this.$toast.clear();
}) ;
}
},
navToWx(fId) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment