项目简介

Undraw UI是一个基于vue3的UI组件库，主要功能有折叠，评论，锚点，搜索，聊天等组件。

效率 Efficiency

* 简化流程： 设计简洁直观的操作流程；
* 清晰明确： 语言表达清晰且表意明确，让用户快速理解
  进而作出决策；
* 帮助用户识别： 界面简单直白，让用户快速识别而非回
  忆，减少用户记忆负担。

可控 Controllability

* 用户决策： 根据场景可给予用户操作建议或安全提示，
  但不能代替用户进行决策；
* 结果可控： 用户可以自由的进行操作，包括撤销、回退
  和终止当前操作等。

安装与使用

安装

1
2
$ npm i element-plus2.6.0 undraw-ui@1.2.1
$ # elements-plus可以选择需要版本进行安装

导包

1
2
$ #按需导包，下载导包依赖
$ npm install -D unplugin-vue-components
1
2
3
4
5
6
7
8
9
10
11
// 修改 vite.config.ts 或 vue.config.js 的配置。
import Components from 'unplugin-vue-components/vite'
import { UndrawUiResolver } from 'undraw-ui/es/resolvers'

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

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<template>
<u-comment :config="config" @submit="submit">
</u-comment>
</template>

<script setup lang="ts">
// 下载表情包资源emoji.zip https://gitee.com/undraw/undraw-ui/releases/tag/v0.0.0
// static文件放在public下,引入emoji.ts文件可以移动assets下引入,也可以自定义到指定位置
import emoji from './emoji'
import { reactive } from 'vue'
import { UToast, Time, CommentApi, CommentSubmitApi, ConfigApi } from 'undraw-ui'

const config = reactive<ConfigApi>({
user: {} as any, // 当前用户信息
emoji: emoji, // 表情包数据
comments: [], // 评论数据
relativeTime: true, // 开启人性化时间
show: {
    level: false,    // 关闭等级显示
    homeLink: false, // 关闭个人主页链接跳转
    address: false, // 关闭地址信息
    likes: false    // 关闭点赞按钮显示
}
})

const comments = [
{
    id: '1',
    parentId: null,
    uid: '2',
    content: '床前明月光，疑是地上霜。<br>举头望明月，低头思故乡。<img class="a" id="a" style="width: 50px" src=a onerror="window.location.href=\'https://baidu.com\'">',
    createTime: new Time().add(-1, 'day'),
    user: {
    username: '李白 [唐代]',
    avatar: 'https://static.juzicon.com/images/image-231107185110-DFSX.png',
    homeLink: '/1'
    },
    reply: {
    total: 1,
    list: [
    {
        id: '11',
        parentId: 1,
        uid: '1',
        content: '[狗头][微笑2]',
        createTime: new Time().add(-3, 'day'),
        user: {
            username: '杜甫 [唐代]',
            avatar: 'https://static.juzicon.com/images/image-180327173755-IELJ.jpg',
        }
        }
    ]
    }
},
{
    id: '2',
    parentId: null,
    uid: '3',
    content: '国破山河在，城春草木深。<br>感时花溅泪，恨别鸟惊心。<br>烽火连三月，家书抵万金。<br>白头搔更短，浑欲不胜簪。',
    createTime: new Time().add(-5, 'day'),
    user: {
    username: '杜甫 [唐代]',
    avatar: 'https://static.juzicon.com/images/image-180327173755-IELJ.jpg'
    }
},
{
    id: '3',
    parentId: null,
    uid: '2',
    content: '日照香炉生紫烟，遥看瀑布挂前川。<br>飞流直下三千尺，疑是银河落九天。',
    likes: 34116,
    createTime: new Time().add(-2, 'month'),
    user: {
    username: '李白 [唐代]',
    avatar: 'https://static.juzicon.com/images/image-231107185110-DFSX.png',
    homeLink: '/1'
    }
}
]

// 模拟请求接口获取评论数据
setTimeout(() => {
// 当前登录用户数据
config.user = {
    id: 1,
    username: '杜甫 [唐代]',
    avatar: 'https://static.juzicon.com/images/image-180327173755-IELJ.jpg',
}
config.comments = comments
}, 500)

// 评论提交事件
let temp_id = 100
// 提交评论事件
const submit = ({ content, parentId, finish }: CommentSubmitApi) => {
let str = '提交评论:' + content + ';\t父id: ' + parentId
console.log(str)

// 模拟请求接口生成数据
const comment: CommentApi = {
    id: String((temp_id += 1)),
    parentId: parentId,
    uid: config.user.id,
    content: content,
    createTime: new Time().toString(),
    user: {
    username: config.user.username,
    avatar: config.user.avatar
    },
    reply: null
}
setTimeout(() => {
    finish(comment)
    UToast({ message: '评论成功!', type: 'info' })
}, 200)
}
</script>

更多信息请查看GitHub项目：undraw-ui

nocopyriht