哈喽，大家好！我是前端实验室的小师妹!

夏天热似南方，冬天冷似东北。西安没有春秋，只有冬夏，春秋大概只有战国有吧...

还没来得及感受秋天凉爽的微风，寒冷萧瑟的冬天就到了，小师妹已经穿上羽绒服了，你们呢？

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

UndrawUI

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

功能介绍

1.折叠和展开

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

<template>
  <u-fold unfold line="1">
    <p>
      时间不是某种从我们身上流过的东西，而就是我的生命。弃我而去的不是日历上的一个个日子，而是我生命中的岁月；甚至也不仅仅是我的岁月，而就是我自己。我不但找不回逝去的岁月，而且也找不回从前的我了。
    </p>
  </u-fold>
</template>

2.Comment 评论

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

<template>
  <div class="comment-view" style="padding: 0px">
    <u-comment :config="config" @submit="submit" @like="like" @remove="remove" @report="report">
      <!-- <template #list-title>全部评论</template> -->
    </u-comment>
  </div>
</template>

... 省略 ...

3.锚点

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

<template>
  <div class="view">
    <div class="ac">
      <div id="article" class="article">
        <h2>人和植物一样</h2>
        <p>内容1</p>
        <h2>文明与野蛮</h2>
        <p>内容2</p>
        <h2>村庄的时间</h2>
        <p>内容3</p>
      </div>
    </div>
    <!-- container参数指定监听的容器 -->
    <div class="article-catalog">
      <u-anchor style="position: fixed" container="#article"></u-anchor>
    </div>
  </div>
</template>

3.Search搜索

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

<template>
  <u-search :config="config" style="margin-left: 20px" @submit="submit"></u-search>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { SearchConfig } from 'undraw-ui'

const config = ref<SearchConfig>({
  keywords: ['斗罗大陆', '斗破苍穹', '吞噬星空', '凡人修仙传', '一念永恒'], // 搜索框关键字滚动
  hotSearchList: [
    '斗罗大陆',
    '斗破苍穹',
    '吞噬星空',
    '凡人修仙传',
    '一念永恒',
    '完美世界',
    '鬼灭之刃',
    '间谍过家家',
    '武动乾坤',
    '神印王座'
  ] // top10 热门搜索 最多显示10条数据
})

const submit = (val: string) => {
  console.log(val)
  window.open('/all?keyword=' + val)
}
</script>

<style lang="scss" scoped></style>

还有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

今天的介绍就到这里啦，喜欢的朋友不要忘记点赞分享~