今天给大家推荐一个基于vue3的UI组件，比较小众，先收藏一起，万一用得上呢！

UndrawUI

UndrawUI是一个基于Vue的UI组件，主要功能有评论，聊天，搜索，锚点。

功能介绍1.折叠和展开

使用属性unfold实现展开和折叠功能。


(资料图片)

2.Comment 评论

使用属性comment，通过Comment 事件实现评论回复、点赞、支持表情包、删除评论、图片上传等功能。

... 省略 ...
3.锚点

使用属性anchor提取标题元素到导航栏，通过导航栏快速跳转到目标位置。

4.Search搜索

使用search属性，通过config设置搜索配置，submit搜索提交事件。

<script setup lang="ts">import { ref } from "vue"import { SearchConfig } from "undraw-ui"const config = ref({  keywords: ["斗罗大陆", "斗破苍穹", "吞噬星空", "凡人修仙传", "一念永恒"], // 搜索框关键字滚动  hotSearchList: [    "斗罗大陆",    "斗破苍穹",    "吞噬星空",    "凡人修仙传",    "一念永恒",    "完美世界",    "鬼灭之刃",    "间谍过家家",    "武动乾坤",    "神印王座"  ] // top10 热门搜索 最多显示10条数据})const submit = (val: string) => {  console.log(val)  window.open("/all?keyword=" + val)}</script>

还有NoticeBar 通知栏、Tags标签页等功能，大家可以自行下载区体验噢~

使用介绍

1.使用npm安装

npm i undraw-ui

2.依赖：在 main.ts 中引入组件

import { createApp } from "vue"import App from "./App.vue"import UndrawUi from "undraw-ui"import "undraw-ui/dist/style.css"const app = createApp(App)app.use(UndrawUi)app.mount("#app")
项目地址

https://github.com/readpage/undraw-ui

https://undraw.gitee.io/undraw-ui

推荐内容