节日礼物待签收，开箱国庆头像
通过 Vue3 + Vant（组件库） + Vite 构建。
应用的流程
在做之前，先思考它的流程：
上传头像
选择头像模板
保存新头像
进入应用放出节日祝福与简单的使用介绍。
开始仅显示一个上传头像按钮。这样做的好处是，直接固定第一步操作。如果将模板和保存按钮显示出来需要增加代码做一些判断。如果开始就将头像模板与保存按钮显示，可能让人无从下手。
上传头像后直接将模板与保存按钮显示出来。在代码中默认选中今年最流行的模板，直接点击保存按钮将下载这个头像。开屏也进行了选择模板的提示，如果点击一个头像模板，将进行切换，通过点击保存按钮保存它。
最后，点击保存显示烟花动画。
代码实现
头像上传
<div
class="uploader-wrap"
:style="{ marginTop: fileList.length === 0 ? '220px' : '80px' }">
<Uploader
v-model="fileList"
preview-size="120px"
class="uploader"
:deletable="true"
:max-count="1"
:after-read="afterRead"
:before-delete="handleDelete"
/></div>开始，仅显示一个上传按钮，但希望它出现在屏幕靠中间位置，便于点击。通过 vue 样式绑定即可。
.uploader-wrap { display: flex; justify-content: center; transition: 0.3s margin;
}在样式代码中给它添加 transition（过渡效果）。
const fileList = ref([])const base64 = ref('')const afterRead = file => buildBase64(file.file)const buildBase64 = file => { const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = () => {
base64.value = reader.result
}
}const handleDelete = () => {
base64.value = ''
fileList.value = []
}在 JS 中，通过 afterRead 获取上传的文件，并将它转化为 Base64 编码，以便在后面将它在头像模板中再次显示。通过 handleDelete 将 响应属性 base64 与 fileList 的值清空。由于上传按钮位置通过 vue 样式绑定，当 fileList 为空时，上传按钮会再次回到屏幕靠中间位置。
模板列表
<div class="preview-list">
<div
class="preview-item"
v-if="fileList.length !== 0"
v-for="(num, index) in 6"
:id="`item-${num}`"
:key="index"
@click="handleSelect"
>
<img
class="preview-item__img"
:src="base64"
alt="avatar"
v-show="base64 !== ''"
/>
<img
class="preview-item__modification"
:src="getImageUrl(num)"
alt="avatar"
/>
</div></div>通过 v-if 控制列表显示。给每个列表项一个唯一的 id，以便区分它们。
.preview-list { display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
row-gap: 14px; column-gap: 8px; margin: 40px 0 60px; .preview-item {
justify-self: center; // ...
img { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;
}
}
}在样式中，直接通过 grid 生成一个两行三列的布局。由于给图片的设定宽度小于网格宽度，通过 justify-self: center 使每个项水平居中。通过定位将两个 img 重叠显示。如果使用两个 div，并分别给它们添加背景图片（Base64）配合 Vue3 CSS 样式变量注入将非常香，但生成 canvas 后将变得模糊。
const getImageUrl = name => new URL(`./assets/${name}.png`, import.meta.url).hrefconst selectedId = ref('item-1')const handleSelect = e => {
selectedId.value = e.currentTarget.id
Toast.success('选择成功')
}在 JS 中，由于 vue 无法在动态绑定 src 至本地文件，在 webpack 中使用 require 动态引入文件即可。 在 vite 中，通过 vite 特有的 import.meta.url 来获取。原因是，可以通过动态绑定到 "/src/assets/ ${name}.png" 来显示出头像模板，但这在生产环境中无法被加载（资产被打包到 dist 或其他目录下，assets 不在 src 下了）。如果是 src 静态的，直接通过绑定 "./assets/${name}.png" 即可, 开发环境输出到浏览器时，被编译为 "/src/assets/name.png"，在生产环境也能被正确显示，另外也可以通过将静态头像模板图片放到根目录下的 public 来解决，在 vite build 时，public 会被复制到输出文件夹（ourDir）下。
保存头像
<Button v-if="fileList.length !== 0" :loading="downloading" @click="handleSave" type="primary" loading-text="保存中..." block color="#FA9935" >保存</Button>
template 中，使用 vant 组件库加载按钮，通过点击触发 handleSave 函数保存头像。
const downloading = ref(false)const handleSave = () => { if (fileList.value.length === 0) {
Toast.fail('请先上传头像') return
}
downloading.value = true
html2canvas(document.querySelector(`#${selectedId.value}`), { scale: 4, allowTaint: true, dpi: window.devicePixelRatio * 2,
}).then(canvas => { // downloadjs(canvas.toDataURL(), '头像.png', 'image/png')
saveAs(canvas.toDataURL(), 'image.jpg') // const dataUrl = canvas.toDataURL()
// const a = document.createElement('a')
// a.download = 'avatar.png'
// a.href = dataUrl
// a.click()
downloading.value = false
Toast.success('保存成功')
showFireworks.value = true
setTimeout(() => {
showFireworks.value = false
}, 3000)
})
}在 handleSave 函数中，开始将 downloading 的值更新为 true，按钮这时为 loading 状态。通过 html2canvas.js 将选中的头像模板转为 canvas，在结果中通过 canvas.toDataURL() 获取 canvas dataUrl，在通过 file-saver 将头像保存。通过 HTML a[download] 与 download.js 都不能很好的处理移动端兼容问题。最后，就是显示烟花彩蛋了，在烟花动画播放完毕再将它关闭。
烟花效果与开屏提示
以上就是主要代码了，下面分别是烟花效果与开屏提示组件的代码片段，如果你对它们感兴趣可以通过点击展开查看它们。
链接
Live DEMO
Github 代码仓库
Gitee 代码仓库
分类: Vue
标签: vant, vue3, vite
好文要顶 关注我 收藏该文 
guangzan
关注 - 60
粉丝 - 329
+加关注
2
0
« 上一篇： CH4 简化神经网络模型
posted @ 2021-10-01 17:02 guangzan 阅读(73) 评论(2) 编辑 收藏 举报
评论列表
回复 引用
#1楼 2021-10-01 18:51 GShang
非常好用????????
支持(0) 反对(0)
回复 引用
#2楼 [楼主] 2021-10-01 20:01 guangzan
@GShang ????
支持(0) 反对(0)
刷新评论刷新页面返回顶部
发表评论
编辑预览
自动补全
退出 订阅评论 我的博客
[Ctrl+Enter快捷键提交]
【推荐】跨平台组态\工控\仿真\CAD 50万行C++源码全开放免费下载！
【推荐】和开发者在一起：华为开发者社区，入驻博客园科技品牌专区
【注册】10W+ APP开发者成长平台：流量变现、用户增长、LTV提升！
编辑推荐：
· .Net 微服务实战之可观测性
· 使用 three.js 实现炫酷的酸性风格 3D 页面
· 一个故事看懂 CPU 的 TLB
· CSS 奇技淫巧 | 妙用混合模式实现文字镂空波浪效果
· 记一次 .NET 某上市工业智造 CPU+内存+挂死 三高分析
最新新闻：
· Google涂鸦纪念奇卡诺拳击手、活动家Rodolfo 'Corky' Gonzales（2021-10-01 21:57）
· 恒大汽车被曝员工半薪轮休：都在刷简历（2021-10-01 21:50）
· Google修补两个Chrome 0day危急漏洞 用户应尽快更新（2021-10-01 21:45）
· 一颗巨大的彗星最初被误认为是一颗矮行星（2021-10-01 21:38）
· 全球最大AI巨量模型，参数2457亿炼丹16天专注中文（2021-10-01 21:30）
» 更多新闻...
公告
昵称： guangzan
园龄： 3年
粉丝： 329
关注： 60
+加关注
| <2021年10月> | ||||||
| 日 | 一 | 二 | 三 | 四 | 五 | 六 |
|---|---|---|---|---|---|---|
| 26 | 27 | 28 | 29 | 30 | 1 | 2 |
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
| 31 | 1 | 2 | 3 | 4 | 5 | 6 |
搜索
常用链接
我的随笔
我的评论
我的参与
最新评论
我的标签
最新随笔
1.节日礼物待签收，开箱国庆头像
2.CH4 简化神经网络模型
3.CH3 初识 TensorFlow
4.Python 语言和 TensorFlow 框架环境准备
5.实现自动切换主题的 VSCode 扩展
6.Flutter 沉浸式状态栏
7.Vue3 style CSS 变量注入
8.使用 VSCode 搭建 Flutter 开发环境
9.vue3 script setup 定稿
10.vscode 设置终端无效
我的标签
javascript(15)
vite(12)
vue3(11)
VSCode(10)
Vue(10)
更多
积分与排名
积分 - 164572
排名 - 5704
随笔分类
Cnblog(13)
Code Optimization(3)
CSS(17)
Data Visualization(4)
Deep Leaning(3)
Design(1)
Error(13)
HTML(1)
Java(2)
JS/TS(33)
Linux(1)
Mobile App(5)
Module Bundler(14)
Node.js(3)
Python(1)
React(5)
Source Analysis(5)
Tools(22)
Vue(26)
Windows(18)
随笔档案
2021年10月(1)
2021年9月(8)
2021年8月(5)
2021年7月(14)
2021年6月(10)
2021年5月(9)
2021年4月(4)
2021年1月(2)
2020年12月(2)
2020年11月(5)
2020年10月(4)
2020年8月(3)
2020年7月(11)
2020年6月(2)
2020年5月(9)
2020年4月(7)
2020年3月(19)
2020年2月(6)
2020年1月(7)
2019年12月(1)
更多
相册
测试1(1)
测试2(1)
测试3(6)
友情链接
测试测试测试
测试测试测试
测试测试测试
阅读排行榜
1. vue实现简单的点击切换颜色(8755)
2. Parsing error: 'import' and 'export' may only appear at the top level(6024)
3. vant list 不断连续请求接口神奇原因(5818)
4. vue3 template refs dom的引用、组件的引用、获取子组件的值(4984)
5. vue3 父组件给子组件传值 provide & inject(4524)
评论排行榜
1. 【汇总】 博客园皮肤构建工具 awescnb(74)
2. 分享几套不一样的博客园皮肤 ？(39)
3. 多图预警 | 我为博客园新增了十几个功能(32)
4. 从这个博客皮肤迈入前端性能优化一小步(30)
5. 使用 Vite 开发博客园皮肤(29)
推荐排行榜
1. 多图预警 | 我为博客园新增了十几个功能(46)
2. 【汇总】 博客园皮肤构建工具 awescnb(39)
3. 分享几套不一样的博客园皮肤 ？(30)
4. 使用 Vite 开发博客园皮肤(26)
5. web深色模式适配(16)
最新评论
1. Re:节日礼物待签收，开箱国庆头像
@GShang ????...
--guangzan
2. Re:节日礼物待签收，开箱国庆头像
非常好用????????
--GShang
Copyright © 2021 guangzan
Powered by .NET 6 on Kubernetes
来源 https://www.cnblogs.com/guangzan/p/15359621.html