This action will force synchronization from undraw/undraw-ui, which will overwrite any changes that you have made since you forked the repository, and can not be recovered!!!
Synchronous operation will process in the background and will refresh the page when finishing processing. Please be patient.
Undraw UI - A Vue.js 3 UI library
折叠、评论、锚点、搜索
暗黑主题
请遵循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')
<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>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。