From 2069d53e9be24adec3c8d6717fd7317555bd9a52 Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期二, 02 七月 2024 23:02:51 +0800
Subject: [PATCH] 高级表单优化
---
src/views/demo/comp/cropper/index.vue | 68 +++++++++++----------------------
1 files changed, 23 insertions(+), 45 deletions(-)
diff --git a/src/views/demo/comp/cropper/index.vue b/src/views/demo/comp/cropper/index.vue
index 99c1848..b421e8f 100644
--- a/src/views/demo/comp/cropper/index.vue
+++ b/src/views/demo/comp/cropper/index.vue
@@ -1,7 +1,7 @@
<template>
<PageWrapper title="鍥剧墖瑁佸壀绀轰緥" content="闇�瑕佸紑鍚祴璇曟帴鍙ｆ湇鍔℃墠鑳借繘琛屼笂浼犳祴璇曪紒">
<CollapseContainer title="澶村儚瑁佸壀">
- <CropperAvatar :uploadApi="uploadApi" :value="avatar" />
+ <CropperAvatar :uploadApi="uploadApi as any" :value="avatar" />
</CollapseContainer>
<CollapseContainer title="鐭╁舰瑁佸壀" class="my-4">
@@ -31,52 +31,30 @@
</CollapseContainer>
</PageWrapper>
</template>
-<script lang="ts">
- import { defineComponent, ref } from 'vue';
- import { PageWrapper } from '/@/components/Page';
- import { CollapseContainer } from '/@/components/Container';
- import { CropperImage, CropperAvatar } from '/@/components/Cropper';
- import { uploadApi } from '/@/api/sys/upload';
- import img from '/@/assets/images/header.jpg';
- import { useUserStore } from '/@/store/modules/user';
+<script lang="ts" setup>
+ import { ref } from 'vue';
+ import { PageWrapper } from '@/components/Page';
+ import { CollapseContainer } from '@/components/Container';
+ import { CropperImage, CropperAvatar } from '@/components/Cropper';
+ import { uploadApi } from '@/api/sys/upload';
+ import img from '@/assets/images/header.jpg';
+ import { useUserStore } from '@/store/modules/user';
- export default defineComponent({
- components: {
- PageWrapper,
- CropperImage,
- CollapseContainer,
- CropperAvatar,
- },
- setup() {
- const info = ref('');
- const cropperImg = ref('');
- const circleInfo = ref('');
- const circleImg = ref('');
- const userStore = useUserStore();
- const avatar = ref(userStore.getUserInfo?.avatar || '');
- function handleCropend({ imgBase64, imgInfo }) {
- info.value = imgInfo;
- cropperImg.value = imgBase64;
- }
+ const info = ref('');
+ const cropperImg = ref('');
+ const circleInfo = ref('');
+ const circleImg = ref('');
+ const userStore = useUserStore();
+ const avatar = ref(userStore.getUserInfo?.avatar || '');
+ function handleCropend({ imgBase64, imgInfo }) {
+ info.value = imgInfo;
+ cropperImg.value = imgBase64;
+ }
- function handleCircleCropend({ imgBase64, imgInfo }) {
- circleInfo.value = imgInfo;
- circleImg.value = imgBase64;
- }
-
- return {
- img,
- info,
- circleInfo,
- cropperImg,
- circleImg,
- handleCropend,
- handleCircleCropend,
- avatar,
- uploadApi: uploadApi as any,
- };
- },
- });
+ function handleCircleCropend({ imgBase64, imgInfo }) {
+ circleInfo.value = imgInfo;
+ circleImg.value = imgBase64;
+ }
</script>
<style scoped>
--
Gitblit v1.9.3