介绍

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

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