github_mirrors/vben-admin-thin-next
1
0
Fork 0
mirror of https://github.com/vbenjs/vben-admin-thin-next.git synced 2025-01-24 10:33:47 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf: improve cropper example (#491)

Browse Source
This commit is contained in:
啝裳 2021-04-17 22:39:05 +08:00 committed by GitHub
parent e1b30a5075
commit 5e36a8b575
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/views/demo/comp/cropper/index.vue
View File

@ -1,12 +1,14 @@
<template> <template>
<PageWrapper title="图片裁剪示例" contentBackground> <PageWrapper title="图片裁剪示例" contentBackground>
<div class="cropper-container"> <div class="container">
<CropperImage <div class="cropper-container">
ref="refCropper" <CropperImage
src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg" ref="refCropper"
@cropperedInfo="cropperedInfo" src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg"
style="width: 40%" @cropperedInfo="cropperedInfo"
/> style="width: 40vw"
/>
</div>
<a-button type="primary" @click="onCropper"> 裁剪 </a-button> <a-button type="primary" @click="onCropper"> 裁剪 </a-button>
<img :src="cropperImg" class="croppered" v-if="cropperImg" /> <img :src="cropperImg" class="croppered" v-if="cropperImg" />
</div> </div>
@ -14,28 +16,26 @@
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref, onBeforeMount, getCurrentInstance } from 'vue'; import { defineComponent, ref, unref } from 'vue';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '/@/components/Page';
import { CropperImage } from '/@/components/Cropper'; import { CropperImage } from '/@/components/Cropper';
import img from '/@/assets/images/header.jpg'; import img from '/@/assets/images/header.jpg';
import { templateRef } from '@vueuse/core';
export default defineComponent({ export default defineComponent({
components: { components: {
PageWrapper, PageWrapper,
CropperImage, CropperImage,
}, },
setup() { setup() {
let vm: any;
let info = ref(''); let info = ref('');
let cropperImg = ref(''); let cropperImg = ref('');
const refCropper = templateRef<HTMLElement | null>('refCropper', null);
const onCropper = (): void => { const onCropper = (): void => {
vm.refs.refCropper.croppered(); unref(refCropper).croppered();
}; };
onBeforeMount(() => {
vm = getCurrentInstance();
});
function cropperedInfo({ imgBase64, imgInfo }) { function cropperedInfo({ imgBase64, imgInfo }) {
info.value = imgInfo; info.value = imgInfo;
cropperImg.value = imgBase64; cropperImg.value = imgBase64;
@ -53,14 +53,21 @@
</script> </script>
<style scoped> <style scoped>
.cropper-container { .container {
display: flex; display: flex;
justify-content: space-around; width: 100vw;
align-items: center; align-items: center;
} }
.cropper-container {
width: 40vw;
}
.croppered { .croppered {
width: 50%; height: 360px;
height: 100%; }
p {
margin: 10px;
} }
</style> </style>