不会吧？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。 😃

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

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