From b96ea0753bfd769693a368cf1e3d8316688c0dcb Mon Sep 17 00:00:00 2001
From: 无木 <netfan@foxmail.com>
Date: 星期六, 03 七月 2021 23:12:54 +0800
Subject: [PATCH] feat(avatar-cropper): more props added
---
src/views/demo/page/account/setting/BaseSetting.vue | 34 +++++++++++++++++++++++-----------
1 files changed, 23 insertions(+), 11 deletions(-)
diff --git a/src/views/demo/page/account/setting/BaseSetting.vue b/src/views/demo/page/account/setting/BaseSetting.vue
index 87c546b..2968a96 100644
--- a/src/views/demo/page/account/setting/BaseSetting.vue
+++ b/src/views/demo/page/account/setting/BaseSetting.vue
@@ -7,10 +7,14 @@
<a-col :span="10">
<div class="change-avatar">
<div class="mb-2"> 澶村儚 </div>
- <img width="140" :src="avatar" />
- <Upload :showUploadList="false">
- <Button class="ml-5"> <Icon icon="feather:upload" />鏇存崲澶村儚 </Button>
- </Upload>
+ <CropperAvatar
+ :uploadApi="uploadApi"
+ :value="avatar"
+ btnText="鏇存崲澶村儚"
+ :btnProps="{ preIcon: 'ant-design:cloud-upload-outlined' }"
+ @change="updateAvatar"
+ width="150"
+ />
</div>
</a-col>
</a-row>
@@ -18,11 +22,11 @@
</CollapseContainer>
</template>
<script lang="ts">
- import { Button, Upload, Row, Col } from 'ant-design-vue';
+ import { Button, Row, Col } from 'ant-design-vue';
import { computed, defineComponent, onMounted } from 'vue';
import { BasicForm, useForm } from '/@/components/Form/index';
- import { CollapseContainer } from '/@/components/Container/index';
- import Icon from '/@/components/Icon/index';
+ import { CollapseContainer } from '/@/components/Container';
+ import { CropperAvatar } from '/@/components/Cropper';
import { useMessage } from '/@/hooks/web/useMessage';
@@ -30,16 +34,16 @@
import { accountInfoApi } from '/@/api/demo/account';
import { baseSetschemas } from './data';
import { useUserStore } from '/@/store/modules/user';
+ import { uploadApi } from '/@/api/sys/upload';
export default defineComponent({
components: {
BasicForm,
CollapseContainer,
Button,
- Upload,
- Icon,
- [Row.name]: Row,
- [Col.name]: Col,
+ ARow: Row,
+ ACol: Col,
+ CropperAvatar,
},
setup() {
const { createMessage } = useMessage();
@@ -61,9 +65,17 @@
return avatar || headerImg;
});
+ function updateAvatar(src: string) {
+ const userinfo = userStore.getUserInfo;
+ userinfo.avatar = src;
+ userStore.setUserInfo(userinfo);
+ }
+
return {
avatar,
register,
+ uploadApi,
+ updateAvatar,
handleSubmit: () => {
createMessage.success('鏇存柊鎴愬姛锛�');
},
--
Gitblit v1.8.0