canrd-outside / order-erp-front · Commits

Commit 5e36a8b5754afe916236f1c58a159aa7df69cf83

Authored by 啝裳
Committed by GitHub
1 parent e1b30a50

perf: improve cropper example (#491)

Inline Side-by-side
Showing 1 changed file with 25 additions and 18 deletions
src/views/demo/comp/cropper/index.vue
  View file @5e36a8b
1 <template> 1 <template>
2 <PageWrapper title="图片裁剪示例" contentBackground> 2 <PageWrapper title="图片裁剪示例" contentBackground>
3 - <div class="cropper-container">  
4 - <CropperImage  
5 - ref="refCropper"  
6 - src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg"  
7 - @cropperedInfo="cropperedInfo"  
8 - style="width: 40%"  
9 - /> 3 + <div class="container">
  4 + <div class="cropper-container">
  5 + <CropperImage
  6 + ref="refCropper"
  7 + src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg"
  8 + @cropperedInfo="cropperedInfo"
  9 + style="width: 40vw"
  10 + />
  11 + </div>
10 <a-button type="primary" @click="onCropper"> 裁剪 </a-button> 12 <a-button type="primary" @click="onCropper"> 裁剪 </a-button>
11 <img :src="cropperImg" class="croppered" v-if="cropperImg" /> 13 <img :src="cropperImg" class="croppered" v-if="cropperImg" />
12 </div> 14 </div>
@@ -14,28 +16,26 @@ @@ -14,28 +16,26 @@
14 </PageWrapper> 16 </PageWrapper>
15 </template> 17 </template>
16 <script lang="ts"> 18 <script lang="ts">
17 - import { defineComponent, ref, onBeforeMount, getCurrentInstance } from 'vue'; 19 + import { defineComponent, ref, unref } from 'vue';
18 import { PageWrapper } from '/@/components/Page'; 20 import { PageWrapper } from '/@/components/Page';
19 import { CropperImage } from '/@/components/Cropper'; 21 import { CropperImage } from '/@/components/Cropper';
20 import img from '/@/assets/images/header.jpg'; 22 import img from '/@/assets/images/header.jpg';
  23 + import { templateRef } from '@vueuse/core';
  24 +
21 export default defineComponent({ 25 export default defineComponent({
22 components: { 26 components: {
23 PageWrapper, 27 PageWrapper,
24 CropperImage, 28 CropperImage,
25 }, 29 },
26 setup() { 30 setup() {
27 - let vm: any;  
28 let info = ref(''); 31 let info = ref('');
29 let cropperImg = ref(''); 32 let cropperImg = ref('');
  33 + const refCropper = templateRef<HTMLElement | null>('refCropper', null);
30 34
31 const onCropper = (): void => { 35 const onCropper = (): void => {
32 - vm.refs.refCropper.croppered(); 36 + unref(refCropper).croppered();
33 }; 37 };
34 38
35 - onBeforeMount(() => {  
36 - vm = getCurrentInstance();  
37 - });  
38 -  
39 function cropperedInfo({ imgBase64, imgInfo }) { 39 function cropperedInfo({ imgBase64, imgInfo }) {
40 info.value = imgInfo; 40 info.value = imgInfo;
41 cropperImg.value = imgBase64; 41 cropperImg.value = imgBase64;
@@ -53,14 +53,21 @@ @@ -53,14 +53,21 @@
53 </script> 53 </script>
54 54
55 <style scoped> 55 <style scoped>
56 - .cropper-container { 56 + .container {
57 display: flex; 57 display: flex;
58 - justify-content: space-around; 58 + width: 100vw;
59 align-items: center; 59 align-items: center;
60 } 60 }
61 61
  62 + .cropper-container {
  63 + width: 40vw;
  64 + }
  65 +
62 .croppered { 66 .croppered {
63 - width: 50%;  
64 - height: 100%; 67 + height: 360px;
  68 + }
  69 +
  70 + p {
  71 + margin: 10px;
65 } 72 }
66 </style> 73 </style>