From 6cbac4b7ece60a1a7c1fda931cfffce42dfe3e51 Mon Sep 17 00:00:00 2001
From: 无木 <netfan@foxmail.com>
Date: 星期六, 03 七月 2021 20:14:58 +0800
Subject: [PATCH] feat(avatar-cropper): add action tooltip
---
src/locales/lang/en/component.ts | 7 ++
src/locales/lang/zh_CN/component.ts | 7 ++
src/components/Cropper/src/CopperModal.vue | 117 +++++++++++++++++++++++---------------
3 files changed, 84 insertions(+), 47 deletions(-)
diff --git a/src/components/Cropper/src/CopperModal.vue b/src/components/Cropper/src/CopperModal.vue
index 3883cd1..590738b 100644
--- a/src/components/Cropper/src/CopperModal.vue
+++ b/src/components/Cropper/src/CopperModal.vue
@@ -23,57 +23,80 @@
<div :class="`${prefixCls}-toolbar`">
<Upload :fileList="[]" accept="image/*" :beforeUpload="handleBeforeUpload">
- <a-button size="small" preIcon="ant-design:upload-outlined" type="primary" />
+ <Tooltip :title="t('component.cropper.selectImage')" placement="bottom">
+ <a-button size="small" preIcon="ant-design:upload-outlined" type="primary" />
+ </Tooltip>
</Upload>
<Space>
- <a-button
- type="primary"
- preIcon="ant-design:reload-outlined"
- size="small"
- @click="handlerToolbar('reset')"
- />
- <a-button
- type="primary"
- preIcon="ant-design:rotate-left-outlined"
- size="small"
- @click="handlerToolbar('rotate', -45)"
- />
- <a-button
- type="primary"
- preIcon="ant-design:rotate-right-outlined"
- size="small"
- @click="handlerToolbar('rotate', 45)"
- />
- <a-button
- type="primary"
- preIcon="vaadin:arrows-long-h"
- size="small"
- @click="handlerToolbar('scaleX')"
- />
- <a-button
- type="primary"
- preIcon="vaadin:arrows-long-v"
- size="small"
- @click="handlerToolbar('scaleY')"
- />
- <a-button
- type="primary"
- preIcon="ant-design:zoom-in-outlined"
- size="small"
- @click="handlerToolbar('zoom', 0.1)"
- />
- <a-button
- type="primary"
- preIcon="ant-design:zoom-out-outlined"
- size="small"
- @click="handlerToolbar('zoom', -0.1)"
- />
+ <Tooltip :title="t('component.cropper.btn_reset')" placement="bottom">
+ <a-button
+ type="primary"
+ preIcon="ant-design:reload-outlined"
+ size="small"
+ :disabled="!src"
+ @click="handlerToolbar('reset')"
+ />
+ </Tooltip>
+ <Tooltip :title="t('component.cropper.btn_rotate_left')" placement="bottom">
+ <a-button
+ type="primary"
+ preIcon="ant-design:rotate-left-outlined"
+ size="small"
+ :disabled="!src"
+ @click="handlerToolbar('rotate', -45)"
+ />
+ </Tooltip>
+ <Tooltip :title="t('component.cropper.btn_rotate_right')" placement="bottom">
+ <a-button
+ type="primary"
+ preIcon="ant-design:rotate-right-outlined"
+ size="small"
+ :disabled="!src"
+ @click="handlerToolbar('rotate', 45)"
+ />
+ </Tooltip>
+ <Tooltip :title="t('component.cropper.btn_scale_x')" placement="bottom">
+ <a-button
+ type="primary"
+ preIcon="vaadin:arrows-long-h"
+ size="small"
+ :disabled="!src"
+ @click="handlerToolbar('scaleX')"
+ />
+ </Tooltip>
+ <Tooltip :title="t('component.cropper.btn_scale_y')" placement="bottom">
+ <a-button
+ type="primary"
+ preIcon="vaadin:arrows-long-v"
+ size="small"
+ :disabled="!src"
+ @click="handlerToolbar('scaleY')"
+ />
+ </Tooltip>
+ <Tooltip :title="t('component.cropper.btn_zoom_in')" placement="bottom">
+ <a-button
+ type="primary"
+ preIcon="ant-design:zoom-in-outlined"
+ size="small"
+ :disabled="!src"
+ @click="handlerToolbar('zoom', 0.1)"
+ />
+ </Tooltip>
+ <Tooltip :title="t('component.cropper.btn_zoom_out')" placement="bottom">
+ <a-button
+ type="primary"
+ preIcon="ant-design:zoom-out-outlined"
+ size="small"
+ :disabled="!src"
+ @click="handlerToolbar('zoom', -0.1)"
+ />
+ </Tooltip>
</Space>
</div>
</div>
<div :class="`${prefixCls}-right`">
<div :class="`${prefixCls}-preview`">
- <img :src="previewSource" v-if="previewSource" />
+ <img :src="previewSource" v-if="previewSource" :alt="t('component.cropper.preview')" />
</div>
<template v-if="previewSource">
<div :class="`${prefixCls}-group`">
@@ -92,7 +115,7 @@
import { defineComponent, ref } from 'vue';
import CropperImage from './Cropper.vue';
- import { Space, Upload, Avatar } from 'ant-design-vue';
+ import { Space, Upload, Avatar, Tooltip } from 'ant-design-vue';
import { useDesign } from '/@/hooks/web/useDesign';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { dataURLtoBlob } from '/@/utils/file/base64Conver';
@@ -102,13 +125,13 @@
const props = {
circled: { type: Boolean, default: true },
uploadApi: {
- type: Function as PropType<({ file: Blob, name: stirng, filename: string }) => Promise<any>>,
+ type: Function as PropType<({ file: Blob, name: string, filename: string }) => Promise<any>>,
},
};
export default defineComponent({
name: 'CropperAvatar',
- components: { BasicModal, Space, CropperImage, Upload, Avatar },
+ components: { BasicModal, Space, CropperImage, Upload, Avatar, Tooltip },
props,
emits: ['uploadSuccess', 'register'],
setup(props, { emit }) {
diff --git a/src/locales/lang/en/component.ts b/src/locales/lang/en/component.ts
index 1430f26..38bb213 100644
--- a/src/locales/lang/en/component.ts
+++ b/src/locales/lang/en/component.ts
@@ -13,6 +13,13 @@
uploadSuccess: 'Uploaded success!',
modalTitle: 'Avatar upload',
okText: 'Confirm and upload',
+ btn_reset: 'Reset',
+ btn_rotate_left: 'Counterclockwise rotation',
+ btn_rotate_right: 'Clockwise rotation',
+ btn_scale_x: 'Flip horizontal',
+ btn_scale_y: 'Flip vertical',
+ btn_zoom_in: 'Zoom in',
+ btn_zoom_out: 'Zoom out',
},
drawer: {
loadingText: 'Loading...',
diff --git a/src/locales/lang/zh_CN/component.ts b/src/locales/lang/zh_CN/component.ts
index aa229f5..752a46e 100644
--- a/src/locales/lang/zh_CN/component.ts
+++ b/src/locales/lang/zh_CN/component.ts
@@ -13,6 +13,13 @@
uploadSuccess: '涓婁紶鎴愬姛',
modalTitle: '澶村儚涓婁紶',
okText: '纭骞朵笂浼�',
+ btn_reset: '閲嶇疆',
+ btn_rotate_left: '閫嗘椂閽堟棆杞�',
+ btn_rotate_right: '椤烘椂閽堟棆杞�',
+ btn_scale_x: '姘村钩缈昏浆',
+ btn_scale_y: '鍨傜洿缈昏浆',
+ btn_zoom_in: '鏀惧ぇ',
+ btn_zoom_out: '缂╁皬',
},
drawer: {
loadingText: '鍔犺浇涓�...',
--
Gitblit v1.8.0