# ulearning-ui > 优学院UI组件库,基于element-ui修改，挑选组件 Latest version **0.0.62** (published 2026-09-07) · ISC license · 0 weekly downloads ## Install ```sh npm install ulearning-ui pnpm add ulearning-ui yarn add ulearning-ui bun add ulearning-ui ``` ## Health **Score 55/100 (C)** — status: active. Positive: no vulnerabilities; recently updated; high maintenance score. Warnings: low downloads; no types; no esm support; large bundle; pre 1.0. ## Facts | | | |---|---| | Version | 0.0.62 | | Published | 2026-09-07 | | First published | 2021-08-05 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 12 | | Unpacked size | 16.8 MB | | Known vulnerabilities | 0 (+9 in 2 direct dependencies) | | Install scripts | no | | Author | ulearning | | Maintainers | liuzhong, ulearning_npm | | Keywords | ulearning, vue, element-ui | ## Links - npm: https://www.npmjs.com/package/ulearning-ui - npm.io page: https://npm.io/package/ulearning-ui ## Dependencies (12) - [fabric](https://npm.io/package/fabric.md) ^4.5.0 - [tinymce](https://npm.io/package/tinymce.md) ^5.8.2 - [webpack](https://npm.io/package/webpack.md) 4.14.0 - [deepmerge](https://npm.io/package/deepmerge.md) ^4.2.2 - [file-save](https://npm.io/package/file-save.md) ^0.2.0 - [webpack-cli](https://npm.io/package/webpack-cli.md) 3.0.8 - [eslint-loader](https://npm.io/package/eslint-loader.md) 2.0.0 - [ulearning-obs](https://npm.io/package/ulearning-obs.md) 0.0.48 - [async-validator](https://npm.io/package/async-validator.md) ^4.0.2 - [normalize-wheel](https://npm.io/package/normalize-wheel.md) ^1.0.1 - [throttle-debounce](https://npm.io/package/throttle-debounce.md) ^1.0.1 - [resize-observer-polyfill](https://npm.io/package/resize-observer-polyfill.md) ^1.5.1 ## Recent versions - 0.0.62 (latest) — 2026-09-07 - 0.0.61 — 2026-04-29 - 0.0.60 — 2025-09-03 - 0.0.59 — 2025-03-26 - 0.0.58 — 2025-02-18 - 0.0.57 — 2024-04-02 - 0.0.55 — 2024-02-21 - 0.0.54 — 2024-02-05 - 0.0.53 — 2024-01-30 - 0.0.52 — 2024-01-29 - 0.0.51 — 2023-12-06 - 0.0.50 — 2023-11-06 - 0.0.49 — 2023-10-13 - 0.0.48 — 2023-09-08 - 0.0.47 — 2023-09-07 - … 44 more at https://npm.io/package/ulearning-ui/versions ## README #ulearning-ui ## 安装 npm install ulearning-ui --save ## 使用 ### 1，全部引入 import Vue from 'vue'; import UlearningUI from 'ulearning-ui'; import 'ulearning-ui/lib/style/index.css'; Vue.use(UlearningUI); ### 自定义主题色 编译期使用固定主色： ```scss $--color-primary: #409eff; @import "~ulearning-ui/src/styles/src/index.scss"; ``` 运行时切换主题时，可以使用 CSS 变量作为主色。调用方需要同时提供从 `--color-primary-light-1` 到 `--color-primary-light-9` 的浅色变量： ```scss :root { --color-primary: #409eff; --color-primary-light-1: #53a8ff; --color-primary-light-2: #66b1ff; --color-primary-light-3: #79bbff; --color-primary-light-4: #8cc5ff; --color-primary-light-5: #a0cfff; --color-primary-light-6: #b3d8ff; --color-primary-light-7: #c6e2ff; --color-primary-light-8: #d9ecff; --color-primary-light-9: #ecf5ff; } $--color-primary: var(--color-primary, #409eff); @import "~ulearning-ui/src/styles/src/index.scss"; ``` 自定义主题样式已经包含完整组件样式，调用方不要再引入 `ulearning-ui/lib/styles/index.css`。 ### 2，按需引入(暂不支持) import Vue from 'vue'; import { Button, Select } from 'ulearning-ui'; Vue.use(Button) Vue.use(Select) ## 组件说明 **以element-ui为基础进行的二次开发，基本使用方式和element-ui一致，文档可以参考element-ui,使用时组件名字从el-xx修改成ul-xx，如ul-input,ul-radio，组件库里面icon使用iconfont class类，使用新的icon库** ### 按钮 button ``` 主要按钮 字体主色，边框灰色 边框字体都是灰色的按钮 ``` 按钮形式上主要是这三种和 element-ui类似 size 提供mini，small两个额外尺寸 round icon disabled 目前支持这些属性，icon类名对应使用iconfont的class，button-group未实现 ### 单选框 radio 使用文档直接参考element-ui,ul-radio-button暂不支持 ### 复选框 checkbox 使用文档直接参考element-ui,ul-checkbox-button暂不支持 ### 输入框 input 使用文档直接参考element-ui ### 下拉选择 dropdown 使用文档直接参考element-ui ### 选择器 select 使用文档直接参考element-ui ### 滚动条 srollbar wrapStyle: {}, 给wrap设置style wrapClass: {}, 给wrap添加class viewClass: {}, 给view添加class viewStyle: {}, 给view设置style noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能 tag: { type: String, default: 'div' } 设置view这一层的标签名 demo: ```
{{item}}
 ``` ### 表单 form 使用文档直接参考element-ui ### 弹框 dialog 使用文档直接参考element-ui ### 提示框 messagebox(alert,confirm) 使用文档直接参考element-ui ### 时间日期选择器 datepicker（datetimepicker） 使用文档直接参考element-ui ### 弹出框 popover 使用文档直接参考element-ui ### 抽屉 drawer 使用文档直接参考element-ui ### 加载 loading 参考element-ui ### 图片预览组件 两种使用方式 1,图片预览标签 文档参考element-ui 2,方法调用 参数和 ``` vm.imgList= [{ url: 'https://leicloud.ulearning.cn//tongsk/contentmanage/85bcde8d-b5ba-4e72-9db3-b18d9924af4d.JPG', name: '第一张图.png' },{ url: 'https://leicloud.ulearning.cn/resources/972721/201811141823364022', name: '第二张图.jpg' }] // 方式1 //方式二 this.$viewImage({ zIndex: 1, // 图片预览的z-index值 一般情况下不需要传 initialIndex: 0, // 初始化展示图片的序号 默认为0 imgList : imgList, //图片列表 name可选 url必选 onDownload: (item) => {}, }) ``` ### 富文本编辑器 editor 基于tinymce-vue的二次封装，依赖@tinymce/tinymce-vue ulearning-obs ***使用须知：需要把ulearning-ui内editorLib文件复制到项目静态资源目录内，以vue-cli@3.x为例 将editorLib文件夹放入publick目录内，如果需要自定义插件，在editorLib内进行扩展*** 参数名 | 是否必选 | 默认值 | 说明 ---|---|---|--- value | 是 | '' | 编辑器内容值 不能在options统一设置 需单独绑定 allowPaste | 否 | true | 是否允许粘贴 autoFocus | 否 | false | 是否自动获取焦点 height| 否 | 500 | 编辑器高度 options| 否 | {} | 编辑器初始化配置 uploaderConfig | 是 | {} | 富文本文件上传配置uptokenHost获取上传token的接口，authorization是该接口的校验token，obsHost上传之后文件访问域名 options初始化配置参考https://www.tiny.cloud/docs/configure/integration-and-setup/ Configuration reference 部分基本设置已经在组件内设置完毕，针对使用的场景需要进行额外设置，两个常用的设置项（autoFocus，height）可独立设置，独立设置项优先级高于options内的设置项 ``` // options内的height设置会被属性参数height覆盖 最后高度为400 ``` @change 事件 监听编辑器内容变化 ### 无限滚动组件 InfiniteScroll 参考element-ui ### 轻提示组件 message 参考element-ui ### 0.0.26 修复select 下拉框的宽度问题 ### 0.0.27 增加backtop ### 0.0.28 修复dropdown边距问题 confirm alert垂直不居中 ### 0.0.29 增加loading ### 0.0.30 button样式调整 ### 0.0.32 优化css引入方式 支持自定义修改全局变量 ### 0.0.32 增加imageviewer ### 0.0.35 增加infinite-scroll 分组引入 #### 0.0.36 按需打包优化 message组件 ### 0.0.38 editor富文本组件 imageview组件修改 ### 0.0.39 breadcrumb面包屑 card卡片 tree树形组件 image函数触发页面内容滚动问题 ### 0.0.40 修复化学公式显示问题 ### 0.0.41 更新obs组件 ### 0.0.42 更新obs组件 图片增加下载回调 ### 0.0.43 更新obs组件 引入obs-nxu宁夏大学专版 优学院业务请不要使用此版本 ### 0.0.44 更新obs组件 引入obs-nxu宁夏大学专版 优学院业务请不要使用此版本 ### 0.0.45 obs组件还原为obs-huawei editor组件增加自定义link unlink设置 ### 0.0.46 新增tree cascader组件 ### 0.0.47 新增autocomplete组件 ### 0.0.48 autocomplete search事件回调 ### 0.0.49 支持国际化 ### 0.0.50 更新obs@0.0.48 ### 0.0.51 密码输入框密码显示隐藏icon ### 0.0.52 文档预览 ### 0.0.54 文档预览bugfix ### 0.0.55 文档预览组件bugfix scrollbar增加isScrollBarAlwaysShow参数 默认false,为true时滚动条始终显示 ### 0.0.56 editor国际化支持 ### 0.0.57 editor国际化支持bugfix ### 0.0.58 image组件图片拖拽触摸屏支持 ### 0.0.59 image组件触摸屏双指缩放 ### 0.0.60 editor 上传支持qiniu huawei设置 ### 0.0.61 下载文本国际化 ### 0.0.62 主题色支持修改 --- _Source: https://npm.io/package/ulearning-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._