github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-02-03 02:54:40 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

feat(avatar-cropper): add action tooltip

Browse Source 
为头像剪裁组件的操作按钮添加工具提示
This commit is contained in:
无木 2021-07-03 20:14:58 +08:00
parent 81cf441373
commit 6cbac4b7ec
3 changed files with 84 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
src/components/Cropper/src/CopperModal.vue
View File

@ -23,57 +23,80 @@
<div :class="`${prefixCls}-toolbar`"> <div :class="`${prefixCls}-toolbar`">
<Upload :fileList="[]" accept="image/*" :beforeUpload="handleBeforeUpload"> <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> </Upload>
<Space> <Space>
<a-button <Tooltip :title="t('component.cropper.btn_reset')" placement="bottom">
type="primary" <a-button
preIcon="ant-design:reload-outlined" type="primary"
size="small" preIcon="ant-design:reload-outlined"
@click="handlerToolbar('reset')" size="small"
/> :disabled="!src"
<a-button @click="handlerToolbar('reset')"
type="primary" />
preIcon="ant-design:rotate-left-outlined" </Tooltip>
size="small" <Tooltip :title="t('component.cropper.btn_rotate_left')" placement="bottom">
@click="handlerToolbar('rotate', -45)" <a-button
/> type="primary"
<a-button preIcon="ant-design:rotate-left-outlined"
type="primary" size="small"
preIcon="ant-design:rotate-right-outlined" :disabled="!src"
size="small" @click="handlerToolbar('rotate', -45)"
@click="handlerToolbar('rotate', 45)" />
/> </Tooltip>
<a-button <Tooltip :title="t('component.cropper.btn_rotate_right')" placement="bottom">
type="primary" <a-button
preIcon="vaadin:arrows-long-h" type="primary"
size="small" preIcon="ant-design:rotate-right-outlined"
@click="handlerToolbar('scaleX')" size="small"
/> :disabled="!src"
<a-button @click="handlerToolbar('rotate', 45)"
type="primary" />
preIcon="vaadin:arrows-long-v" </Tooltip>
size="small" <Tooltip :title="t('component.cropper.btn_scale_x')" placement="bottom">
@click="handlerToolbar('scaleY')" <a-button
/> type="primary"
<a-button preIcon="vaadin:arrows-long-h"
type="primary" size="small"
preIcon="ant-design:zoom-in-outlined" :disabled="!src"
size="small" @click="handlerToolbar('scaleX')"
@click="handlerToolbar('zoom', 0.1)" />
/> </Tooltip>
<a-button <Tooltip :title="t('component.cropper.btn_scale_y')" placement="bottom">
type="primary" <a-button
preIcon="ant-design:zoom-out-outlined" type="primary"
size="small" preIcon="vaadin:arrows-long-v"
@click="handlerToolbar('zoom', -0.1)" 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> </Space>
</div> </div>
</div> </div>
<div :class="`${prefixCls}-right`"> <div :class="`${prefixCls}-right`">
<div :class="`${prefixCls}-preview`"> <div :class="`${prefixCls}-preview`">
<img :src="previewSource" v-if="previewSource" /> <img :src="previewSource" v-if="previewSource" :alt="t('component.cropper.preview')" />
</div> </div>
<template v-if="previewSource"> <template v-if="previewSource">
<div :class="`${prefixCls}-group`"> <div :class="`${prefixCls}-group`">
@ -92,7 +115,7 @@
import { defineComponent, ref } from 'vue'; import { defineComponent, ref } from 'vue';
import CropperImage from './Cropper.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 { useDesign } from '/@/hooks/web/useDesign';
import { BasicModal, useModalInner } from '/@/components/Modal'; import { BasicModal, useModalInner } from '/@/components/Modal';
import { dataURLtoBlob } from '/@/utils/file/base64Conver'; import { dataURLtoBlob } from '/@/utils/file/base64Conver';
@ -102,13 +125,13 @@
const props = { const props = {
circled: { type: Boolean, default: true }, circled: { type: Boolean, default: true },
uploadApi: { 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({ export default defineComponent({
name: 'CropperAvatar', name: 'CropperAvatar',
components: { BasicModal, Space, CropperImage, Upload, Avatar }, components: { BasicModal, Space, CropperImage, Upload, Avatar, Tooltip },
props, props,
emits: ['uploadSuccess', 'register'], emits: ['uploadSuccess', 'register'],
setup(props, { emit }) { setup(props, { emit }) {

7
src/locales/lang/en/component.ts
View File

@ -13,6 +13,13 @@ export default {
uploadSuccess: 'Uploaded success!', uploadSuccess: 'Uploaded success!',
modalTitle: 'Avatar upload', modalTitle: 'Avatar upload',
okText: 'Confirm and 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: { drawer: {
loadingText: 'Loading...', loadingText: 'Loading...',

7
src/locales/lang/zh_CN/component.ts
View File

@ -13,6 +13,13 @@ export default {
uploadSuccess: '上传成功', uploadSuccess: '上传成功',
modalTitle: '头像上传', modalTitle: '头像上传',
okText: '确认并上传', okText: '确认并上传',
btn_reset: '重置',
btn_rotate_left: '逆时针旋转',
btn_rotate_right: '顺时针旋转',
btn_scale_x: '水平翻转',
btn_scale_y: '垂直翻转',
btn_zoom_in: '放大',
btn_zoom_out: '缩小',
}, },
drawer: { drawer: {
loadingText: '加载中...', loadingText: '加载中...',