不会吧？2022年了还有人相信星座吗？写一个星座排行榜生成器！「建议收藏」-星座排行生成器下载

不会吧？2022年了还有人相信星座吗？写一个星座排行榜生成器！「建议收藏」创作灵感有一天群里小伙伴发了一张图，十二星座一辈子要爱上多上人？如下这我就不开心了，我大摩羯座，凭什么只能爱一个？我要爱100个！100个！于是我就想这种无厘头的东西我为什么不能自己写一个呢？说干就干！效果展示在线地址：https://idonteatcookie.github.io/my-

创作灵感

有一天群里小伙伴发了一张图，十二星座一辈子要爱上多上人？如下

这我就不开心了，我大摩羯座，凭什么只能爱一个？我要爱100个！100个！于是我就想这种无厘头的东西我为什么不能自己写一个呢？说干就干！

效果展示

在线地址：https://idonteatcookie.github.io/my-sign/

生成最后结果后可以自己截图进行分享。

实现思路

技术栈

选择了 Vite+Vue 实现的项目，因为项目比较简单，没有引入组件库，简单的组件样式是自己写的，比如 Button、Input。

其中涉及拖拽的部分引用了 vuedraggable。

第一步：选择模板

这一步就比较简单，我预设了一些模板，随便选择一个即可。页面效果：

第二步：编辑内容

在预设模板的基础上进行编辑。可以编辑标题，和星座描述：

这一步一共有两种编辑星座方式，一个是拖拽排序，一种是直接替换星座名。

拖拽部分引入了 vuedraggable 使得12星座可以自由排序。具体实现方式如下：

<draggable    v-model="result"    ghost-    dragClass="drag"    handle=".sign-drag"    item-key="key"  >  <template #item="{ element }">    <p >      <p >        <i ></i>      </p>      <p >        <SignTag          @click="onSelect(element)"          v-if="!element.sign"          label="未选择"          disabled          style="width: 100%"        />        <SignTag          closeable          @close="onDelete(element)"          v-else          :sign-item="element.sign"        />      </p>      <p >        <Input v-model="element.desc" />      </p>    </p>  </template></draggable>

【正版授权，激活自己账号】：Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

拖拽组件 vuedraggable 的使用方式比较简单，通过 v-model 指定数组，通过 <template #item="{ element }">xxx</template> 指定子元素。ghost-class 是拖拽是占位元素的类，dragClass 是被拖拽元素的类，handle 是指定可以拖拽的元素选择器，item-key 是列表元素的 key。

至于替换星座名就是点击替换的方式，一是这样比较简单，而且也不会出现重复选择的情况。

定义了标签组件的已选择，未选择，选中样式。点击已选标签右上角的叉可以取消选中，点击选中后会高亮显示，然后在表单中点击可以填入该标签。

第三步：编辑结果

这一步主要是结果的颜色等配置，可以编辑背景颜色，边框颜色，文字颜色，宽度，还有水印。

这样就可以就可以截图转发你想要的星座排行了。

其他

这个确实没参考什么，想写的好玩一些，但是时间比较紧，自己也没那么多精力和能力，就随便写写了。感兴趣的可以提PR。 ????

源码地址：https://github.com/idonteatcookie/my-sign

预览地址：https://idonteatcookie.github.io/my-sign/