ldeyun/ruoyi-geek-App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化类型

Browse Source
This commit is contained in:
D 2023-09-01 18:59:31 +08:00
parent b86676570b
commit 627badca26
1 changed files with 566 additions and 558 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/pages_mine/pages/avatar/index.vue
View File

@ -2,25 +2,37 @@
<view class="container"> <view class="container">
<view class="page-body uni-content-info"> <view class="page-body uni-content-info">
<view class='cropper-content'> <view class='cropper-content'>
<view v-if="isShowImg" class="uni-corpper" :style="'width:'+cropperInitW+'px;height:'+cropperInitH+'px;background:#000'"> <view v-if="isShowImg" class="uni-corpper"
<view class="uni-corpper-content" :style="'width:'+cropperW+'px;height:'+cropperH+'px;left:'+cropperL+'px;top:'+cropperT+'px'"> :style="'width:' + cropperInitW + 'px;height:' + cropperInitH + 'px;background:#000'">
<view class="uni-corpper-content"
:style="'width:' + cropperW + 'px;height:' + cropperH + 'px;left:' + cropperL + 'px;top:' + cropperT + 'px'">
<image :src="imageSrc" :style="'width:' + cropperW + 'px;height:' + cropperH + 'px'"></image> <image :src="imageSrc" :style="'width:' + cropperW + 'px;height:' + cropperH + 'px'"></image>
<view class="uni-corpper-crop-box" @touchstart.stop="contentStartMove" @touchmove.stop="contentMoveing" @touchend.stop="contentTouchEnd" <view class="uni-corpper-crop-box" @touchstart.stop="contentStartMove"
@touchmove.stop="contentMoveing" @touchend.stop="contentTouchEnd"
:style="'left:' + cutL + 'px;top:' + cutT + 'px;right:' + cutR + 'px;bottom:' + cutB + 'px'"> :style="'left:' + cutL + 'px;top:' + cutT + 'px;right:' + cutR + 'px;bottom:' + cutB + 'px'">
<view class="uni-cropper-view-box"> <view class="uni-cropper-view-box">
<view class="uni-cropper-dashed-h"></view> <view class="uni-cropper-dashed-h"></view>
<view class="uni-cropper-dashed-v"></view> <view class="uni-cropper-dashed-v"></view>
<view class="uni-cropper-line-t" data-drag="top" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> <view class="uni-cropper-line-t" data-drag="top" @touchstart.stop="dragStart"
<view class="uni-cropper-line-r" data-drag="right" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> @touchmove.stop="dragMove"></view>
<view class="uni-cropper-line-b" data-drag="bottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> <view class="uni-cropper-line-r" data-drag="right" @touchstart.stop="dragStart"
<view class="uni-cropper-line-l" data-drag="left" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> @touchmove.stop="dragMove"></view>
<view class="uni-cropper-point point-t" data-drag="top" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> <view class="uni-cropper-line-b" data-drag="bottom" @touchstart.stop="dragStart"
@touchmove.stop="dragMove"></view>
<view class="uni-cropper-line-l" data-drag="left" @touchstart.stop="dragStart"
@touchmove.stop="dragMove"></view>
<view class="uni-cropper-point point-t" data-drag="top" @touchstart.stop="dragStart"
@touchmove.stop="dragMove"></view>
<view class="uni-cropper-point point-tr" data-drag="topTight"></view> <view class="uni-cropper-point point-tr" data-drag="topTight"></view>
<view class="uni-cropper-point point-r" data-drag="right" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> <view class="uni-cropper-point point-r" data-drag="right" @touchstart.stop="dragStart"
<view class="uni-cropper-point point-rb" data-drag="rightBottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> @touchmove.stop="dragMove"></view>
<view class="uni-cropper-point point-b" data-drag="bottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove" @touchend.stop="dragEnd"></view> <view class="uni-cropper-point point-rb" data-drag="rightBottom"
@touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
<view class="uni-cropper-point point-b" data-drag="bottom" @touchstart.stop="dragStart"
@touchmove.stop="dragMove" @touchend.stop="dragEnd"></view>
<view class="uni-cropper-point point-bl" data-drag="bottomLeft"></view> <view class="uni-cropper-point point-bl" data-drag="bottomLeft"></view>
<view class="uni-cropper-point point-l" data-drag="left" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> <view class="uni-cropper-point point-l" data-drag="left" @touchstart.stop="dragStart"
@touchmove.stop="dragMove"></view>
<view class="uni-cropper-point point-lt" data-drag="leftTop"></view> <view class="uni-cropper-point point-lt" data-drag="leftTop"></view>
</view> </view>
</view> </view>
@ -31,7 +43,8 @@
<button type="primary reverse" @click="getImage" style='margin-top: 30rpx;'> 选择头像 </button> <button type="primary reverse" @click="getImage" style='margin-top: 30rpx;'> 选择头像 </button>
<button type="warn" @click="getImageInfo" style='margin-top: 30rpx;'> 提交 </button> <button type="warn" @click="getImageInfo" style='margin-top: 30rpx;'> 提交 </button>
</view> </view>
<canvas canvas-id="myCanvas" :style="'position:absolute;border: 1px solid red; width:'+imageW+'px;height:'+imageH+'px;top:-9999px;left:-9999px;'"></canvas> <canvas canvas-id="myCanvas"
:style="'position:absolute;border: 1px solid red; width:' + imageW + 'px;height:' + imageH + 'px;top:-9999px;left:-9999px;'"></canvas>
</view> </view>
</view> </view>
</template> </template>
@ -338,17 +351,6 @@
<style> <style>
/* pages/uni-cropper/index.wxss */ /* pages/uni-cropper/index.wxss */
.uni-content-info {
/* position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
align-items: center;
flex-direction: column; */
}
.cropper-config { .cropper-config {
padding: 20rpx 40rpx; padding: 20rpx 40rpx;
} }
@ -385,6 +387,7 @@
image-orientation: 0deg !important; image-orientation: 0deg !important;
margin: 0 auto; margin: 0 auto;
} }
/* 移动图片效果 */ /* 移动图片效果 */
.uni-cropper-drag-box { .uni-cropper-drag-box {
@ -397,6 +400,7 @@
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
z-index: 1; z-index: 1;
} }
/* 内部的信息 */ /* 内部的信息 */
.uni-corpper-crop-box { .uni-corpper-crop-box {
@ -414,6 +418,7 @@
outline: 1rpx solid #69f; outline: 1rpx solid #69f;
outline-color: rgba(102, 153, 255, .75) outline-color: rgba(102, 153, 255, .75)
} }
/* 横向虚线 */ /* 横向虚线 */
.uni-cropper-dashed-h { .uni-cropper-dashed-h {
@ -425,6 +430,7 @@
border-top: 1rpx dashed rgba(255, 255, 255, 0.5); border-top: 1rpx dashed rgba(255, 255, 255, 0.5);
border-bottom: 1rpx dashed rgba(255, 255, 255, 0.5); border-bottom: 1rpx dashed rgba(255, 255, 255, 0.5);
} }
/* 纵向虚线 */ /* 纵向虚线 */
.uni-cropper-dashed-v { .uni-cropper-dashed-v {
@ -436,6 +442,7 @@
border-left: 1rpx dashed rgba(255, 255, 255, 0.5); border-left: 1rpx dashed rgba(255, 255, 255, 0.5);
border-right: 1rpx dashed rgba(255, 255, 255, 0.5); border-right: 1rpx dashed rgba(255, 255, 255, 0.5);
} }
/* 四个方向的线 为了之后的拖动事件*/ /* 四个方向的线 为了之后的拖动事件*/
.uni-cropper-line-t { .uni-cropper-line-t {
@ -618,6 +625,7 @@
margin-top: -3rpx; margin-top: -3rpx;
cursor: n-resize; cursor: n-resize;
} }
/* 裁剪框预览内容 */ /* 裁剪框预览内容 */
.uni-cropper-viewer { .uni-cropper-viewer {