代码拉取完成,页面将自动刷新
同步操作将从 undraw/undraw-ui 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
Undraw UI - A Vue.js 3 UI library
折叠、评论、锚点、搜索
暗黑主题
请遵循https://undraw.gitee.io/undraw-ui/上的文档!
使用npm
安装
vue低于3.2.25可能无法正常使用
npm i undraw-ui@0.9.3
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')
App.vue
中使用(1)下载表情包资源emoji.zip下载,密码:undraw
(2)static文件放在public下,引入emoji.ts文件可以移动assets下引入,也可以自定义到指定位置
(3)js实例在emoji.zip文件里
<template>
<u-comment :config="config" @submit="submit" @like="like">
<!-- <template #info>用户信息卡槽</template> -->
<!-- <template #card>用户信息卡片卡槽</template> -->
</u-comment>
</template>
<script setup lang="ts">
import emoji from './emoji'
import { reactive } from 'vue'
import { CommentApi, ConfigApi, SubmitParamApi, UToast, createObjectURL } from 'undraw-ui'
const config = reactive<ConfigApi>({
user: {
id: 1,
username: 'jack',
avatar: 'https://static.juzicon.com/avatars/avatar-200602130320-HMR2.jpeg?x-oss-process=image/resize,w_100',
// 评论id数组 建议:存储方式用户uid和评论id组成关系,根据用户uid来获取对应点赞评论id,然后加入到数组中返回
likeIds: [1, 2, 3]
},
emoji: emoji,
comments: [],
total: 10
})
let temp_id = 100
// 提交评论事件
const submit = ({ content, parentId, files, finish }: SubmitParamApi) => {
console.log('提交评论: ' + content, parentId, files)
/**
* 上传文件后端返回图片访问地址,格式以'||'为分割; 如: '/static/img/program.gif||/static/img/normal.webp'
*/
let contentImg = files.map(e => createObjectURL(e)).join('||')
const comment: CommentApi = {
id: String((temp_id += 1)),
parentId: parentId,
uid: config.user.id,
address: '来自江苏',
content: content,
likes: 0,
createTime: '1分钟前',
contentImg: contentImg,
user: {
username: config.user.username,
avatar: config.user.avatar,
level: 6,
homeLink: `/${(temp_id += 1)}`
},
reply: null
}
setTimeout(() => {
finish(comment)
UToast({ message: '评论成功!', type: 'info' })
}, 200)
}
// 点赞按钮事件 将评论id返回后端判断是否点赞,然后在处理点赞状态
const like = (id: string, finish: () => void) => {
console.log('点赞: ' + id)
setTimeout(() => {
finish()
}, 200)
}
config.comments = [
{
id: '1',
parentId: null,
uid: '1',
address: '来自上海',
content:
'缘生缘灭,缘起缘落,我在看别人的故事,别人何尝不是在看我的故事?别人在演绎人生,我又何尝不是在这场戏里?谁的眼神沧桑了谁?我的眼神,只是沧桑了自己[喝酒]',
likes: 2,
contentImg: '/static/img/program.gif, /static/img/normal.webp',
createTime: '1分钟前',
user: {
username: '落🤍尘',
avatar: 'https://static.juzicon.com/avatars/avatar-200602130320-HMR2.jpeg?x-oss-process=image/resize,w_100',
level: 6,
homeLink: '/1'
}
}
]
</script>
<style lang="scss" scoped>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
}
body {
font-size: 12px;
}
</style>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。