国庆头像待签收，开箱时能否看到特别惊喜？
摘要：🎁 点击这里 获取国庆头像。通过 Vue3 + Vant（组件库） + Vite 构建。 应用的流程 在做之前，先思考它的流程： 上传头像 选择头像模板 保存新头像 进入应
🎁 点击这里 获取国庆头像。通过 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，以便区分它们。