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 1 <template>
2 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 12 <a-button type="primary" @click="onCropper"> 裁剪 </a-button>
11 13 <img :src="cropperImg" class="croppered" v-if="cropperImg" />
12 14 </div>
... ... @@ -14,28 +16,26 @@
14 16 </PageWrapper>
15 17 </template>
16 18 <script lang="ts">
17   - import { defineComponent, ref, onBeforeMount, getCurrentInstance } from 'vue';
  19 + import { defineComponent, ref, unref } from 'vue';
18 20 import { PageWrapper } from '/@/components/Page';
19 21 import { CropperImage } from '/@/components/Cropper';
20 22 import img from '/@/assets/images/header.jpg';
  23 + import { templateRef } from '@vueuse/core';
  24 +
21 25 export default defineComponent({
22 26 components: {
23 27 PageWrapper,
24 28 CropperImage,
25 29 },
26 30 setup() {
27   - let vm: any;
28 31 let info = ref('');
29 32 let cropperImg = ref('');
  33 + const refCropper = templateRef<HTMLElement | null>('refCropper', null);
30 34  
31 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 39 function cropperedInfo({ imgBase64, imgInfo }) {
40 40 info.value = imgInfo;
41 41 cropperImg.value = imgBase64;
... ... @@ -53,14 +53,21 @@
53 53 </script>
54 54  
55 55 <style scoped>
56   - .cropper-container {
  56 + .container {
57 57 display: flex;
58   - justify-content: space-around;
  58 + width: 100vw;
59 59 align-items: center;
60 60 }
61 61  
  62 + .cropper-container {
  63 + width: 40vw;
  64 + }
  65 +
62 66 .croppered {
63   - width: 50%;
64   - height: 100%;
  67 + height: 360px;
  68 + }
  69 +
  70 + p {
  71 + margin: 10px;
65 72 }
66 73 </style>
... ...