不会吧？2022年了还有人相信星座吗？写一个星座排行榜生成器！
创作灵感
有一天群里小伙伴发了一张图，十二星座一辈子要爱上多上人？如下
这我就不开心了，我大摩羯座，凭什么只能爱一个？我要爱100个！100个！于是我就想这种无厘头的东西我为什么不能自己写一个呢？说干就干！
效果展示
在线地址：https://idonteatcookie.github.io/my-sign/
生成最后结果后可以自己截图进行分享。
实现思路
技术栈
选择了 Vite+Vue 实现的项目，因为项目比较简单，没有引入组件库，简单的组件样式是自己写的，比如 Button、Input。
其中涉及拖拽的部分引用了 vuedraggable。
第一步：选择模板
这一步就比较简单，我预设了一些模板，随便选择一个即可。页面效果：
第二步：编辑内容
在预设模板的基础上进行编辑。可以编辑标题，和星座描述：
这一步一共有两种编辑星座方式，一个是拖拽排序，一种是直接替换星座名。
拖拽部分引入了 vuedraggable 使得12星座可以自由排序。具体实现方式如下：
<draggable
v-model="result"
ghost-class="ghost"
dragClass="drag"
handle=".sign-drag"
item-key="key"
>
<template #item="{ element }">
<div class="sign-item">
<div class="sign-drag">
<i class="iconfont icon-drag"></i>
</div>
<div class="selected-sign">
<SignTag
@click="onSelect(element)"
v-if="!element.sign"
label="未选择"
disabled
style="width: 100%"
/>
<SignTag
closeable
@close="onDelete(element)"
v-else
:sign-item="element.sign"
/>
</div>
<div class="sign-desc">
<Input v-model="element.desc" />
</div>
</div>
</template>
</draggable>
拖拽组件 vuedraggable 的使用方式比较简单，通过 v-model 指定数组，通过 <template #item="{ element }">xxx</template> 指定子元素。ghost-class 是拖拽是占位元素的类，dragClass 是被拖拽元素的类，handle 是指定可以拖拽的元素选择器，item-key 是列表元素的 key。
至于替换星座名就是点击替换的方式，一是这样比较简单，而且也不会出现重复选择的情况。
定义了标签组件的已选择，未选择，选中样式。点击已选标签右上角的叉可以取消选中，点击选中后会高亮显示，然后在表单中点击可以填入该标签。
第三步：编辑结果
这一步主要是结果的颜色等配置，可以编辑背景颜色，边框颜色，文字颜色，宽度，还有水印。
这样就可以就可以截图转发你想要的星座排行了。
其他
这个确实没参考什么，想写的好玩一些，但是时间比较紧，自己也没那么多精力和能力，就随便写写了。感兴趣的可以提PR。 😃
