66 lines
1.9 KiB
Plaintext
66 lines
1.9 KiB
Plaintext
<template>
|
|
<div>
|
|
<div class="n-layout-page-header">
|
|
<a-card :bordered="false" title="图片裁剪示例">
|
|
适用于，头像上传，图片上传之前需要进行裁剪，简单说就是，需要图片上传并且需要裁剪，就可以用这个组件快速实现，需要真实接口才能进行上传测试！
|
|
</a-card>
|
|
</div>
|
|
<a-card :bordered="false" class="mt-4 proCard" title="圆形裁剪">
|
|
<!--圆形裁剪-->
|
|
<Cropper
|
|
ref="cropperCircled"
|
|
:circled="true"
|
|
:src="src"
|
|
:uploadApi="upload"
|
|
title="圆形头像上传"
|
|
/>
|
|
<a-space>
|
|
<a-button class="mt-4 ml-12" @click="cropperCircledImg">选择图片</a-button>
|
|
</a-space>
|
|
</a-card>
|
|
|
|
<a-card :bordered="false" class="mt-4 proCard" title="矩形裁剪">
|
|
<!--矩形裁剪-->
|
|
<Cropper ref="cropperRectangle" :src="src" title="矩形头像上传" />
|
|
<a-space>
|
|
<a-button class="mt-4 ml-12" @click="cropperRectangleImg">选择图片</a-button>
|
|
</a-space>
|
|
</a-card>
|
|
|
|
<a-card :bordered="false" class="mt-4 proCard" title="自定义内容，选择权交给您">
|
|
<!--圆形裁剪-->
|
|
<Cropper
|
|
ref="cropperCircled"
|
|
:circled="true"
|
|
:src="src"
|
|
:uploadApi="upload"
|
|
title="圆形头像上传"
|
|
>
|
|
<a-button class="mt-4" @click="cropperCircledImg">自定义裁剪图片</a-button>
|
|
</Cropper>
|
|
</a-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue';
|
|
import { Cropper } from '@/components/Cropper';
|
|
import { upload } from '@/api/common/';
|
|
|
|
const src = ref('/src/assets/images/schoolboy.png');
|
|
|
|
const cropperCircled = ref();
|
|
|
|
const cropperRectangle = ref();
|
|
|
|
function cropperCircledImg() {
|
|
cropperCircled.value.openCropper();
|
|
}
|
|
|
|
function cropperRectangleImg() {
|
|
cropperRectangle.value.openCropper();
|
|
}
|
|
</script>
|
|
|
|
<style lang="less"></style>
|