Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
啊嘞嘞EC
vue-vben-admin
提交
5e36a8b5
V
vue-vben-admin
项目概览
啊嘞嘞EC
/
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,体验更适合开发者的 AI 搜索 >>
未验证
提交
5e36a8b5
编写于
4月 17, 2021
作者:
啝
啝裳
提交者:
GitHub
4月 17, 2021
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
perf: improve cropper example (#491)
上级
e1b30a50
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
25 addition
and
18 deletion
+25
-18
src/views/demo/comp/cropper/index.vue
src/views/demo/comp/cropper/index.vue
+25
-18
未找到文件。
src/views/demo/comp/cropper/index.vue
浏览文件 @
5e36a8b5
<
template
>
<PageWrapper
title=
"图片裁剪示例"
contentBackground
>
<div
class=
"cropper-container"
>
<CropperImage
ref=
"refCropper"
src=
"https://fengyuanchen.github.io/cropperjs/images/picture.jpg"
@
cropperedInfo=
"cropperedInfo"
style=
"width: 40%"
/>
<div
class=
"container"
>
<div
class=
"cropper-container"
>
<CropperImage
ref=
"refCropper"
src=
"https://fengyuanchen.github.io/cropperjs/images/picture.jpg"
@
cropperedInfo=
"cropperedInfo"
style=
"width: 40vw"
/>
</div>
<a-button
type=
"primary"
@
click=
"onCropper"
>
裁剪
</a-button>
<img
:src=
"cropperImg"
class=
"croppered"
v-if=
"cropperImg"
/>
</div>
...
...
@@ -14,28 +16,26 @@
</PageWrapper>
</
template
>
<
script
lang=
"ts"
>
import
{
defineComponent
,
ref
,
onBeforeMount
,
getCurrentInstance
}
from
'
vue
'
;
import
{
defineComponent
,
ref
,
unref
}
from
'
vue
'
;
import
{
PageWrapper
}
from
'
/@/components/Page
'
;
import
{
CropperImage
}
from
'
/@/components/Cropper
'
;
import
img
from
'
/@/assets/images/header.jpg
'
;
import
{
templateRef
}
from
'
@vueuse/core
'
;
export
default
defineComponent
({
components
:
{
PageWrapper
,
CropperImage
,
},
setup
()
{
let
vm
:
any
;
let
info
=
ref
(
''
);
let
cropperImg
=
ref
(
''
);
const
refCropper
=
templateRef
<
HTMLElement
|
null
>
(
'
refCropper
'
,
null
);
const
onCropper
=
():
void
=>
{
vm
.
refs
.
refCropper
.
croppered
();
unref
(
refCropper
)
.
croppered
();
};
onBeforeMount
(()
=>
{
vm
=
getCurrentInstance
();
});
function
cropperedInfo
({
imgBase64
,
imgInfo
})
{
info
.
value
=
imgInfo
;
cropperImg
.
value
=
imgBase64
;
...
...
@@ -53,14 +53,21 @@
</
script
>
<
style
scoped
>
.c
ropper-c
ontainer
{
.container
{
display
:
flex
;
justify-content
:
space-around
;
width
:
100vw
;
align-items
:
center
;
}
.cropper-container
{
width
:
40vw
;
}
.croppered
{
width
:
50%
;
height
:
100%
;
height
:
360px
;
}
p
{
margin
:
10px
;
}
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录