克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

Undraw UI - A Vue.js 3 UI library

🔥功能

折叠、评论、锚点、搜索

  1. 折叠

  1. 评论

暗黑主题

img

  1. 搜索(input关键词动态滚动)

  1. 锚点

入门

请遵循https://undraw.gitee.io/undraw-ui/上的文档!

地址

安装

使用npm安装

element-plus可以选择需要版本

npm i element-plus2.6.0 undraw-ui@1.1.1

导入

按需导入(推荐)

您需要使用额外的插件来导入要使用的组件。
首先你需要安装 unplugin-vue-components 和 unplugin-auto-import 两款插件。

npm install -D unplugin-vue-components unplugin-auto-import

然后修改 vite.config.ts 或 vue.config.js 的配置。

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { UndrawUiResolver } from 'undraw-ui/es/resolvers'

export default {
  plugins: [
    Components({
      resolvers: [UndrawUiResolver]
    }),
  ],
}

全局注册

如果你对打包后的文件大小不是很在乎,那么使用完整导入会更方便。

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import UndrawUi from 'undraw-ui'
import 'undraw-ui/dist/style.css'

const app = createApp(App)
app.use(ElementPlus)
app.use(UndrawUi)
app.mount('#app')

使用

fold 折叠组件

<template>
  <div style="width: 200px;">
    <u-fold line="1">
      <p>每当白日依山尽,夕阳余辉便透过朵朵云层,像万道金光,如霞光万丈,把天空白云染得红彤彤,把大地山河映得金灿灿,仿佛整个世界在那一瞬间都变得金碧辉煌,热情奔放起来</p>
    </u-fold>
    <u-divider />
    <u-fold line="2">
      孩子或者像孩子一样单纯的人,目的意识淡薄,沉浸在过程中,过程和目的浑然不分,他们能够随遇而安,即事起兴,不易感到无聊。商人或者像商人一样精明的人,有非常明确实际的目的,以此指导行动,规划过程,目的与过程丝丝相扣,他们能够聚精会神,分秒必争,也不易感到无聊。怕就怕既失去了孩子的单纯,又不肯学商人的精明,目的意识强烈却并无明确实际的目的,有所追求但所求不是太缥缈就是太模糊。
    </u-fold>
    <!-- 使用属性 unfold 启动展开和折叠功能 -->
    <u-fold unfold line="1">
      <p>
        时间不是某种从我们身上流过的东西,而就是我的生命。弃我而去的不是日历上的一个个日子,而是我生命中的岁月;甚至也不仅仅是我的岁月,而就是我自己。我不但找不回逝去的岁月,而且也找不回从前的我了。
      </p>
    </u-fold>
  </div>
</template>

评论组件

基础使用-vite模板地址
组件后端相关实例
增强功能地址

开发交流

QQ群:undraw(682265529)

MIT License Copyright (c) 2023 readpage Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

vue评论组件,🔥基于vue3的UI组件,主要功能有评论,聊天,搜索,锚点。你的⭐️Star ,是作者开发的动力! 展开 收起
TypeScript
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化