Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
夏日掠影
vue-vben-admin
提交
b96ea075
V
vue-vben-admin
项目概览
夏日掠影
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-vben-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
b96ea075
编写于
7月 03, 2021
作者:
无
无木
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(avatar-cropper): more props added
为头像剪裁组件添加value属性、onChange事件以及用于自定义上传按钮的属性;更新个人设置页的头像设置
上级
6cbac4b7
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
104 addition
and
22 deletion
+104
-22
CHANGELOG.zh_CN.md
CHANGELOG.zh_CN.md
+5
-0
src/components/Cropper/src/CropperAvatar.vue
src/components/Cropper/src/CropperAvatar.vue
+69
-7
src/views/demo/comp/cropper/index.vue
src/views/demo/comp/cropper/index.vue
+7
-4
src/views/demo/page/account/setting/BaseSetting.vue
src/views/demo/page/account/setting/BaseSetting.vue
+23
-11
未找到文件。
CHANGELOG.zh_CN.md
浏览文件 @
b96ea075
...
...
@@ -7,6 +7,11 @@
-
增加
`ignoreRoute`
用于在
`ROUTE_MAPPING`
或
`BACK`
权限模式下仅生成菜单
-
增加
`hidePathForChildren`
配置,标识为子项目生成菜单时忽略本级
`path`
-
**TableAction**
新增
`tooltip`
配置,可以为按钮增加 tooltip 提示
-
**CropperAvatar**
-
新增
`value`
用于设置当前头像
-
新增
`onChange`
用于接受头像剪裁并上传成功事件
-
新增
`btnText`
、
`btnProps`
用于自定义上传按钮文案和属性
-
为剪裁
`Modal`
内的操作按钮添加工具提示
### 🐛 Bug Fixes
...
...
src/components/Cropper/src/CropperAvatar.vue
浏览文件 @
b96ea075
<
template
>
<div
:class=
"getClass"
:style=
"getStyle"
>
<div
:class=
"`$
{prefixCls}-image-wrapper`" :style="getImageWrapperStyle" @click="openModal">
<div
:class=
"`$
{prefixCls}-image-mask`" :style="getImageWrapperStyle">
<Icon
icon=
"ant-design:cloud-upload-outlined"
:size=
"getIconWidth"
:style=
"getImageWrapperStyle"
color=
"#d6d6d6"
/>
</div>
<img
:src=
"sourceValue"
v-if=
"sourceValue"
alt=
"avatar"
/>
</div>
<a-button
:class=
"`$
{prefixCls}-upload-btn`" @click="openModal">
{{
t
(
'
component.cropper.selectImage
'
)
}}
<a-button
:class=
"`$
{prefixCls}-upload-btn`"
@click="openModal"
v-if="showBtn"
v-bind="btnProps"
>
{{
btnText
?
btnText
:
t
(
'
component.cropper.selectImage
'
)
}}
</a-button>
<CopperModal
@
register=
"register"
@
uploadSuccess=
"handleUploadSuccess"
:uploadApi=
"uploadApi"
/>
<CopperModal
@
register=
"register"
@
uploadSuccess=
"handleUploadSuccess"
:uploadApi=
"uploadApi"
:src=
"sourceValue"
/>
</div>
</
template
>
<
script
lang=
"ts"
>
import
{
defineComponent
,
computed
,
CSSProperties
,
unref
,
ref
}
from
'
vue
'
;
import
{
defineComponent
,
computed
,
CSSProperties
,
unref
,
ref
,
watchEffect
,
watch
}
from
'
vue
'
;
import
CopperModal
from
'
./CopperModal.vue
'
;
import
{
useDesign
}
from
'
/@/hooks/web/useDesign
'
;
import
{
useModal
}
from
'
/@/components/Modal
'
;
import
{
useMessage
}
from
'
/@/hooks/web/useMessage
'
;
import
{
useI18n
}
from
'
/@/hooks/web/useI18n
'
;
import
type
{
ButtonProps
}
from
'
/@/components/Button
'
;
import
Icon
from
'
/@/components/Icon
'
;
const
props
=
{
width
:
{
type
:
[
String
,
Number
],
default
:
'
200px
'
},
value
:
{
type
:
String
},
showBtn
:
{
type
:
Boolean
,
default
:
true
},
btnProps
:
{
type
:
Object
as
ButtonProps
},
btnText
:
{
type
:
String
,
default
:
''
},
uploadApi
:
{
type
:
Function
as
PropType
<
({
file
:
Blob
,
name
:
string
})
=>
Promise
<
void
>>
},
};
export
default
defineComponent
({
name
:
'
CropperAvatar
'
,
components
:
{
CopperModal
},
components
:
{
CopperModal
,
Icon
},
props
,
setup
(
props
)
{
const
sourceValue
=
ref
(
''
);
emits
:
[
'
update:value
'
,
'
change
'
],
setup
(
props
,
{
emit
})
{
const
sourceValue
=
ref
(
props
.
value
||
''
);
const
{
prefixCls
}
=
useDesign
(
'
cropper-avatar
'
);
const
[
register
,
{
openModal
}]
=
useModal
();
const
{
createMessage
}
=
useMessage
();
...
...
@@ -37,14 +63,28 @@
const
getWidth
=
computed
(()
=>
`
${
props
.
width
}
`
.
replace
(
/px/
,
''
)
+
'
px
'
);
const
getIconWidth
=
computed
(()
=>
parseInt
(
`
${
props
.
width
}
`
.
replace
(
/px/
,
''
))
/
2
+
'
px
'
);
const
getStyle
=
computed
(():
CSSProperties
=>
({
width
:
unref
(
getWidth
)
}));
const
getImageWrapperStyle
=
computed
(
():
CSSProperties
=>
({
width
:
unref
(
getWidth
),
height
:
unref
(
getWidth
)
})
);
watchEffect
(()
=>
{
sourceValue
.
value
=
props
.
value
;
});
watch
(
()
=>
sourceValue
.
value
,
(
v
:
string
)
=>
{
emit
(
'
update:value
'
,
v
);
}
);
function
handleUploadSuccess
({
source
})
{
sourceValue
.
value
=
source
;
emit
(
'
change
'
,
source
);
createMessage
.
success
(
t
(
'
component.cropper.uploadSuccess
'
));
}
...
...
@@ -53,6 +93,7 @@
prefixCls
,
register
,
openModal
,
getIconWidth
,
sourceValue
,
getClass
,
getImageWrapperStyle
,
...
...
@@ -82,6 +123,27 @@
}
}
&-image-mask {
opacity: 0;
position: absolute;
width: inherit;
height: inherit;
border-radius: inherit;
border: inherit;
background: rgba(0, 0, 0, 0.4);
cursor: pointer;
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
::v-deep(svg) {
margin: auto;
}
}
&-image-mask:hover {
opacity: 40;
}
&-upload-btn {
margin: 10px auto;
}
...
...
src/views/demo/comp/cropper/index.vue
浏览文件 @
b96ea075
<
template
>
<PageWrapper
title=
"图片裁剪示例"
content=
"需要开启测试接口服务才能进行上传测试!"
>
<CollapseContainer
title=
"头像裁剪"
>
<CropperAvatar
:uploadApi=
"uploadApi"
/>
<CropperAvatar
:uploadApi=
"uploadApi"
:value=
"avatar"
/>
</CollapseContainer>
<CollapseContainer
title=
"矩形裁剪"
class=
"my-4"
>
...
...
@@ -9,7 +9,7 @@
<div
class=
"cropper-container mr-10"
>
<CropperImage
ref=
"refCropper"
:src=
"img"
@
cropend=
"handleCropend"
style=
"width: 40vw"
/>
</div>
<img
:src=
"cropperImg"
class=
"croppered"
v-if=
"cropperImg"
/>
<img
:src=
"cropperImg"
class=
"croppered"
v-if=
"cropperImg"
alt=
""
/>
</div>
<p
v-if=
"cropperImg"
>
裁剪后图片信息:
{{
info
}}
</p>
</CollapseContainer>
...
...
@@ -34,10 +34,11 @@
<
script
lang=
"ts"
>
import
{
defineComponent
,
ref
}
from
'
vue
'
;
import
{
PageWrapper
}
from
'
/@/components/Page
'
;
import
{
CollapseContainer
}
from
'
/@/components/Container
/index
'
;
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
:
{
...
...
@@ -51,7 +52,8 @@
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
;
...
...
@@ -70,6 +72,7 @@
circleImg
,
handleCropend
,
handleCircleCropend
,
avatar
,
uploadApi
,
};
},
...
...
src/views/demo/page/account/setting/BaseSetting.vue
浏览文件 @
b96ea075
...
...
@@ -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
(
'
更新成功!
'
);
},
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录