2022年了还有人相信星座吗?写一个星座排行榜生成器!

1,715 阅读2分钟

我正在参加「创意开发 投稿大赛」详情请看:掘金创意开发大赛来了!

走过路过发现 bug 请指出,拯救一个辣鸡(但很帅)的少年就靠您啦!!!

创作灵感

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

21659845790_.pic.jpg

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

效果展示

Aug-10-2022 23-52-55.gif

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

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

实现思路

技术栈

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

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

第一步:选择模板

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

image.png

第二步:编辑内容

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

image.png

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

拖拽部分引入了 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

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

Aug-11-2022 00-14-04.gif

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

第三步:编辑结果

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

Aug-11-2022 00-19-50.gif

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

其他

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

源码地址:github.com/idonteatcoo…

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