Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
开源元宇宙
vue-vben-admin
提交
2b76b884
V
vue-vben-admin
项目概览
开源元宇宙
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
0
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,发现更多精彩内容 >>
未验证
提交
2b76b884
编写于
5月 11, 2021
作者:
N
Netfan
提交者:
GitHub
5月 11, 2021
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(qrcode): custom drawing support (#580)
上级
9d195462
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
49 addition
and
7 deletion
+49
-7
src/components/Qrcode/src/index.vue
src/components/Qrcode/src/index.vue
+11
-7
src/components/Qrcode/src/types.ts
src/components/Qrcode/src/types.ts
+5
-0
src/views/demo/comp/qrcode/index.vue
src/views/demo/comp/qrcode/index.vue
+33
-0
未找到文件。
src/components/Qrcode/src/index.vue
浏览文件 @
2b76b884
...
...
@@ -8,6 +8,7 @@
import
{
toCanvas
,
QRCodeRenderersOptions
,
LogoType
}
from
'
./qrcodePlus
'
;
import
{
toDataURL
}
from
'
qrcode
'
;
import
{
downloadByUrl
}
from
'
/@/utils/file/download
'
;
import
{
QrcodeDoneEventParams
}
from
'
./types
'
;
export
default
defineComponent
({
name
:
'
QrCode
'
,
...
...
@@ -38,10 +39,9 @@
validator
:
(
v
:
string
)
=>
[
'
canvas
'
,
'
img
'
].
includes
(
v
),
},
},
emits
:
{
done
:
(
url
:
string
)
=>
!!
url
,
error
:
(
error
:
any
)
=>
!!
error
},
emits
:
{
done
:
(
data
:
QrcodeDoneEventParams
)
=>
!!
data
,
error
:
(
error
:
any
)
=>
!!
error
},
setup
(
props
,
{
emit
})
{
const
wrapRef
=
ref
<
HTMLCanvasElement
|
HTMLImageElement
|
null
>
(
null
);
const
urlRef
=
ref
<
string
>
(
''
);
async
function
createQrcode
()
{
try
{
const
{
tag
,
value
,
options
=
{},
width
,
logo
}
=
props
;
...
...
@@ -58,8 +58,7 @@
content
:
renderValue
,
options
:
options
||
{},
});
urlRef
.
value
=
url
;
emit
(
'
done
'
,
url
);
emit
(
'
done
'
,
{
url
,
ctx
:
(
wrapEl
as
HTMLCanvasElement
).
getContext
(
'
2d
'
)
});
return
;
}
...
...
@@ -70,8 +69,7 @@
...
options
,
});
(
unref
(
wrapRef
)
as
HTMLImageElement
).
src
=
url
;
urlRef
.
value
=
url
;
emit
(
'
done
'
,
url
);
emit
(
'
done
'
,
{
url
});
}
}
catch
(
error
)
{
emit
(
'
error
'
,
error
);
...
...
@@ -81,7 +79,13 @@
* file download
*/
function
download
(
fileName
?:
string
)
{
const
url
=
unref
(
urlRef
);
let
url
=
''
;
const
wrapEl
=
unref
(
wrapRef
);
if
(
wrapEl
instanceof
HTMLCanvasElement
)
{
url
=
wrapEl
.
toDataURL
();
}
else
if
(
wrapEl
instanceof
HTMLImageElement
)
{
url
=
wrapEl
.
src
;
}
if
(
!
url
)
return
;
downloadByUrl
({
url
,
...
...
src/components/Qrcode/src/types.ts
浏览文件 @
2b76b884
...
...
@@ -31,3 +31,8 @@ export type ToCanvasFn = (options: RenderQrCodeParams) => Promise<unknown>;
export
interface
QrCodeActionType
{
download
:
(
fileName
?:
string
)
=>
void
;
}
export
interface
QrcodeDoneEventParams
{
url
:
string
;
ctx
?:
CanvasRenderingContext2D
|
null
;
}
src/views/demo/comp/qrcode/index.vue
浏览文件 @
2b76b884
...
...
@@ -58,6 +58,19 @@
<CollapseContainer
title=
"配置大小示例"
class=
"text-center qrcode-demo-item"
>
<QrCode
:value=
"qrCodeUrl"
:width=
"300"
/>
</CollapseContainer>
<CollapseContainer
title=
"扩展绘制示例"
class=
"text-center qrcode-demo-item"
>
<QrCode
:value=
"qrCodeUrl"
:width=
"200"
:options=
"
{ margin: 5 }"
ref="qrDiyRef"
:logo="LogoImg"
@done="onQrcodeDone"
/>
<a-button
class=
"mb-2"
type=
"primary"
@
click=
"downloadDiy"
>
下载
</a-button>
<div
class=
"msg"
>
要进行扩展绘制则不能将tag设为img
</div>
</CollapseContainer>
</div>
</PageWrapper>
</
template
>
...
...
@@ -73,16 +86,36 @@
components
:
{
CollapseContainer
,
QrCode
,
PageWrapper
},
setup
()
{
const
qrRef
=
ref
<
Nullable
<
QrCodeActionType
>>
(
null
);
const
qrDiyRef
=
ref
<
Nullable
<
QrCodeActionType
>>
(
null
);
function
download
()
{
const
qrEl
=
unref
(
qrRef
);
if
(
!
qrEl
)
return
;
qrEl
.
download
(
'
文件名
'
);
}
function
downloadDiy
()
{
const
qrEl
=
unref
(
qrDiyRef
);
if
(
!
qrEl
)
return
;
qrEl
.
download
(
'
Qrcode
'
);
}
function
onQrcodeDone
({
ctx
})
{
if
(
ctx
instanceof
CanvasRenderingContext2D
)
{
// 额外绘制
ctx
.
fillStyle
=
'
black
'
;
ctx
.
font
=
'
16px "微软雅黑"
'
;
ctx
.
textBaseline
=
'
bottom
'
;
ctx
.
textAlign
=
'
center
'
;
ctx
.
fillText
(
'
你帅你先扫
'
,
100
,
195
,
200
);
}
}
return
{
onQrcodeDone
,
qrCodeUrl
,
LogoImg
,
download
,
downloadDiy
,
qrRef
,
qrDiyRef
,
};
},
});
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录