Browse Source

海报取消按钮

h5_css
yanyan 3 years ago
parent
commit
d1cd66dd20
  1. 33
      subpkg/complete/complete.vue

33
subpkg/complete/complete.vue

@ -73,8 +73,11 @@
<view v-if="showLoad"> <view v-if="showLoad">
<view class='imagePathBox'> <view class='imagePathBox'>
<!-- <image :src="tempFilePath" class='shengcheng' show-menu-by-longpress="true"></image> --> <!-- <image :src="tempFilePath" class='shengcheng' show-menu-by-longpress="true"></image> -->
<view class="btnbox">
<button class='cancel' @click="cancel()">取消</button>
<button class='baocun' @click="saveImage()">保存至相册</button> <button class='baocun' @click="saveImage()">保存至相册</button>
</view> </view>
</view>
<view class="mask"></view> <view class="mask"></view>
</view> </view>
@ -284,6 +287,12 @@
this.showShare = false this.showShare = false
this.showLayer = false this.showLayer = false
}, },
cancel(){
const canvas = this.canvas;
const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, 500, 800)
this.showLoad = false
},
saveImage() { saveImage() {
uni.canvasToTempFilePath({ uni.canvasToTempFilePath({
canvasId: 'photo', canvasId: 'photo',
@ -667,22 +676,34 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: 999; z-index: 999;
} }
.baocun { .btnbox {
display: block; display: flex;
width: 70%; width: 70%;
height: 90rpx; height: 90rpx;
padding: 0;
line-height: 90rpx;
text-align: center;
position: absolute; position: absolute;
bottom: 10%; bottom: 10%;
left: 15%; left: 15%;
}
.baocun ,.cancel{
display: block;
width: 45%;
height: 90rpx;
padding: 0;
line-height: 90rpx;
text-align: center;
color: #fff; color: #fff;
font-size: 32rpx; font-size: 28rpx;
border-radius: 50rpx; border-radius: 50rpx;
background: #1367fe; background: #1367fe;
border: 1px solid #1367fe;
}
.cancel {
display: inline-block;
background-color: #fff;
color: #1367fe;
} }
button[class="baocun"]::after{ button[class="baocun"]::after{
border: 0; border: 0;
} }

Loading…
Cancel
Save