fix: remove playground
This commit is contained in:
xingyu4j
@@ -1,59 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { Page } from '@vben/common-ui';
|
|
||||||
|
|
||||||
import { VbenContextMenu } from '@vben-core/shadcn-ui';
|
|
||||||
|
|
||||||
import { Button, Card, message } from 'ant-design-vue';
|
|
||||||
|
|
||||||
const needHidden = (role: string) => {
|
|
||||||
return role === 'user';
|
|
||||||
};
|
|
||||||
|
|
||||||
const contextMenus = () => {
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
text: '刷新',
|
|
||||||
key: 'refresh',
|
|
||||||
handler: (data: any) => {
|
|
||||||
message.success('刷新成功', data);
|
|
||||||
},
|
|
||||||
hidden: needHidden('admin'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '关闭当前',
|
|
||||||
key: 'close-current',
|
|
||||||
handler: (data: any) => {
|
|
||||||
message.success('关闭当前', data);
|
|
||||||
},
|
|
||||||
hidden: needHidden('user'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '关闭其他',
|
|
||||||
key: 'close-other',
|
|
||||||
handler: (data: any) => {
|
|
||||||
message.success('关闭其他', data);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '关闭所有',
|
|
||||||
key: 'close-all',
|
|
||||||
handler: (data: any) => {
|
|
||||||
message.success('关闭所有', data);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<Page title="Context Menu 上下文菜单">
|
|
||||||
<Card title="基本使用">
|
|
||||||
<div>一共四个菜单（刷新、关闭当前、关闭其他、关闭所有）</div>
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
<VbenContextMenu :menus="contextMenus" :modal="true" item-class="pr-6">
|
|
||||||
<Button> 右键点击我打开上下文菜单(有隐藏项) </Button>
|
|
||||||
</VbenContextMenu>
|
|
||||||
</Card>
|
|
||||||
</Page>
|
|
||||||
</template>
|
|
||||||
@@ -1,144 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import type { UploadChangeParam } from 'ant-design-vue';
|
|
||||||
|
|
||||||
import { ref } from 'vue';
|
|
||||||
|
|
||||||
import { Page, VCropper } from '@vben/common-ui';
|
|
||||||
|
|
||||||
import { Button, Card, Select, Upload } from 'ant-design-vue';
|
|
||||||
|
|
||||||
const options = [
|
|
||||||
{ label: '1:1', value: '1:1' },
|
|
||||||
{ label: '16:9', value: '16:9' },
|
|
||||||
{ label: '不限制', value: '' },
|
|
||||||
];
|
|
||||||
|
|
||||||
const cropperRef = ref<InstanceType<typeof VCropper>>();
|
|
||||||
|
|
||||||
const cropLoading = ref(false);
|
|
||||||
const validAspectRatio = ref<string | undefined>('1:1');
|
|
||||||
const imgUrl = ref('');
|
|
||||||
const cropperImg = ref();
|
|
||||||
|
|
||||||
const selectImgFile = (event: UploadChangeParam) => {
|
|
||||||
const file = event.fileList[0]?.originFileObj;
|
|
||||||
if (!file) return;
|
|
||||||
|
|
||||||
if (!file.type.startsWith('image/')) {
|
|
||||||
console.error('请上传图片文件');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.addEventListener('load', (e) => {
|
|
||||||
imgUrl.value = e.target?.result as string;
|
|
||||||
});
|
|
||||||
reader.addEventListener('error', () => {
|
|
||||||
console.error('Failed to read file');
|
|
||||||
});
|
|
||||||
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
};
|
|
||||||
|
|
||||||
const cropImage = async () => {
|
|
||||||
if (!cropperRef.value) return;
|
|
||||||
cropLoading.value = true;
|
|
||||||
try {
|
|
||||||
cropperImg.value = await cropperRef.value.getCropImage(
|
|
||||||
'image/jpeg',
|
|
||||||
0.92,
|
|
||||||
'base64',
|
|
||||||
);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('图片裁剪失败:', error);
|
|
||||||
} finally {
|
|
||||||
cropLoading.value = false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 下载图片
|
|
||||||
*/
|
|
||||||
const downloadImage = () => {
|
|
||||||
if (!cropperImg.value) return;
|
|
||||||
|
|
||||||
const link = document.createElement('a');
|
|
||||||
link.download = `cropped-image-${Date.now()}.png`;
|
|
||||||
link.href = cropperImg.value;
|
|
||||||
link.click();
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<Page
|
|
||||||
title="VCropper 图片裁剪"
|
|
||||||
description="VCropper是一个图片裁剪组件，提供基础的图片裁剪功能。"
|
|
||||||
>
|
|
||||||
<Card>
|
|
||||||
<div class="image-cropper-container">
|
|
||||||
<div class="cropper-ratio-display">
|
|
||||||
<label class="ratio-label">当前裁剪比例：</label>
|
|
||||||
<Select
|
|
||||||
class="w-24"
|
|
||||||
v-model:value="validAspectRatio"
|
|
||||||
:options="options"
|
|
||||||
/>
|
|
||||||
<Upload
|
|
||||||
:max-count="1"
|
|
||||||
:show-upload-list="false"
|
|
||||||
:before-upload="() => false"
|
|
||||||
@change="selectImgFile"
|
|
||||||
>
|
|
||||||
<Button>上传图片</Button>
|
|
||||||
</Upload>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="imgUrl" class="cropper-main-wrapper">
|
|
||||||
<VCropper
|
|
||||||
ref="cropperRef"
|
|
||||||
:img="imgUrl"
|
|
||||||
:aspect-ratio="validAspectRatio"
|
|
||||||
:width="600"
|
|
||||||
:height="600"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- 操作按钮组 -->
|
|
||||||
<div class="cropper-btn-group">
|
|
||||||
<Button :loading="cropLoading" @click="cropImage" type="primary">
|
|
||||||
裁剪
|
|
||||||
</Button>
|
|
||||||
<Button v-if="cropperImg" @click="downloadImage" danger>
|
|
||||||
下载图片
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 裁剪预览 -->
|
|
||||||
<img
|
|
||||||
v-if="cropperImg"
|
|
||||||
class="h-full w-80"
|
|
||||||
:src="cropperImg"
|
|
||||||
alt="裁剪预览"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</Page>
|
|
||||||
</template>
|
|
||||||
<style scoped>
|
|
||||||
/* 比例展示区域 */
|
|
||||||
.cropper-ratio-display {
|
|
||||||
@apply my-2.5 flex items-center justify-start gap-4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ratio-label {
|
|
||||||
@apply text-sm font-medium;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 主裁剪区域 */
|
|
||||||
.cropper-main-wrapper {
|
|
||||||
@apply flex items-center gap-4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cropper-btn-group {
|
|
||||||
@apply flex flex-col gap-2;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Reference in New Issue
Block a user