index.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. <template>
  2. <div>
  3. <el-dialog title="更换头像" v-model="isShowDialog" width="769px">
  4. <div class="cropper-warp">
  5. <div class="cropper-warp-left">
  6. <img :src="cropperImg" class="cropper-warp-left-img" />
  7. </div>
  8. <div class="cropper-warp-right">
  9. <div class="cropper-warp-right-title">预览</div>
  10. <div class="cropper-warp-right-item">
  11. <div class="cropper-warp-right-value">
  12. <img :src="cropperImgBase64" class="cropper-warp-right-value-img" />
  13. </div>
  14. <div class="cropper-warp-right-label">100 x 100</div>
  15. </div>
  16. <div class="cropper-warp-right-item">
  17. <div class="cropper-warp-right-value">
  18. <img :src="cropperImgBase64" class="cropper-warp-right-value-img cropper-size" />
  19. </div>
  20. <div class="cropper-warp-right-label">50 x 50</div>
  21. </div>
  22. </div>
  23. </div>
  24. <template #footer>
  25. <span class="dialog-footer">
  26. <el-button @click="onCancel" >取 消</el-button>
  27. <el-button type="primary" @click="onSubmit" >更 换</el-button>
  28. </span>
  29. </template>
  30. </el-dialog>
  31. </div>
  32. </template>
  33. <script lang="ts">
  34. import { reactive, toRefs, nextTick, defineComponent } from 'vue';
  35. import Cropper from 'cropperjs';
  36. import 'cropperjs/dist/cropper.css';
  37. export default defineComponent({
  38. name: 'cropperIndex',
  39. setup() {
  40. const state = reactive({
  41. isShowDialog: false,
  42. cropperImg: '',
  43. cropperImgBase64: '',
  44. cropper: null,
  45. });
  46. // 打开弹窗
  47. const openDialog = (imgs: any) => {
  48. state.cropperImg = imgs;
  49. state.isShowDialog = true;
  50. nextTick(() => {
  51. initCropper();
  52. });
  53. };
  54. // 关闭弹窗
  55. const closeDialog = () => {
  56. state.isShowDialog = false;
  57. };
  58. // 取消
  59. const onCancel = () => {
  60. closeDialog();
  61. };
  62. // 更换
  63. const onSubmit = () => {
  64. // state.cropperImgBase64 = state.cropper.getCroppedCanvas().toDataURL('image/jpeg');
  65. };
  66. // 初始化cropperjs图片裁剪
  67. const initCropper = () => {
  68. const letImg: any = document.querySelector('.cropper-warp-left-img');
  69. (<any>state.cropper) = new Cropper(letImg, {
  70. viewMode: 1,
  71. dragMode: 'none',
  72. initialAspectRatio: 1,
  73. aspectRatio: 1,
  74. preview: '.before',
  75. background: false,
  76. autoCropArea: 0.6,
  77. zoomOnWheel: false,
  78. crop: () => {
  79. state.cropperImgBase64 = (<any>state.cropper).getCroppedCanvas().toDataURL('image/jpeg');
  80. },
  81. });
  82. };
  83. return {
  84. openDialog,
  85. closeDialog,
  86. onCancel,
  87. onSubmit,
  88. initCropper,
  89. ...toRefs(state),
  90. };
  91. },
  92. });
  93. </script>
  94. <style scoped lang="scss">
  95. .cropper-warp {
  96. display: flex;
  97. .cropper-warp-left {
  98. position: relative;
  99. display: inline-block;
  100. height: 350px;
  101. flex: 1;
  102. border: var(--el-border-base);
  103. background: var(--el-color-white);
  104. overflow: hidden;
  105. background-repeat: no-repeat;
  106. cursor: move;
  107. border-radius: var(--el-border-radius-base);
  108. .cropper-warp-left-img {
  109. width: 100%;
  110. height: 100%;
  111. }
  112. }
  113. .cropper-warp-right {
  114. width: 150px;
  115. height: 350px;
  116. .cropper-warp-right-title {
  117. text-align: center;
  118. height: 20px;
  119. line-height: 20px;
  120. }
  121. .cropper-warp-right-item {
  122. margin: 15px 0;
  123. .cropper-warp-right-value {
  124. display: flex;
  125. .cropper-warp-right-value-img {
  126. width: 100px;
  127. height: 100px;
  128. border-radius: var(--el-border-radius-circle);
  129. margin: auto;
  130. }
  131. .cropper-size {
  132. width: 50px;
  133. height: 50px;
  134. }
  135. }
  136. .cropper-warp-right-label {
  137. text-align: center;
  138. font-size: 12px;
  139. color: var(--el-text-color-primary);
  140. height: 30px;
  141. line-height: 30px;
  142. }
  143. }
  144. }
  145. }
  146. </style>