介绍

写了个「从夯到拉」排行榜

https://h2l-ranking.netlify.app

🎯 拖拽排序 - 支持将图片拖拽到不同等级进行分类
🖼️ 图片管理 - 支持上传本地图片或通过 URL 添加
💾 数据持久化 - 使用 IndexedDB 和 localStorage 保存数据
🔒 本地存储 - 所有图片数据仅存储在浏览器本地

开发

封装了 Vue3 组件 🧩 h2l-ranking

<script setup lang="ts">
import H2lRanking from 'h2l-ranking'
import { ref } from 'vue'
import 'h2l-ranking/style.css'

const rankings = ref({
  hang: [
    { title: '《中二病也要谈恋爱》', cover: '/images/1.png', url: 'https://example.com/1', description: '本人入宅作，给到一个夯' },
    { title: '《玉子爱情故事》', cover: '/images/2.png' },
    { title: '《葬送的芙莉莲》', cover: '/images/3.png' },
    { title: '《我心里危险的东西》', cover: '/images/4.png' }
  ],
  upper: [
    { title: '《搞笑漫画日和》', cover: '/images/13.png' },
    { title: '《胆大党》', cover: '/images/14.png' },
    { title: '《荒川爆笑团》', cover: '/images/15.png' }
  ],
  middle: [],
  lower: [],
  la: []
})
</script>

<template>
  <H2lRanking :rankings="rankings" />
</template>

开源：Github

个人排行：https://imba97.me/ranking