# ulearning-ui

**Repository Path**: liuzhong0117/ulearning-ui

## Basic Information

- **Project Name**: ulearning-ui
- **Description**: www.ulearning.cn
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-05
- **Last Updated**: 2025-09-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## 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);

### 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
```
<ul-button type="primary" size="small" disabled round icon="icon-fujianleixingtupian">主要按钮</ul-button>
<ul-button hollow>字体主色，边框灰色</ul-button>
<ul-button plain>边框字体都是灰色的按钮</ul-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:
``` 
<ul-scrollbar
   tag="div"
   wrap-class="list-wrapper"
   ref="scrollbar"
   wrapStyle="max-height:200px;"
   noresize
   >
   <div class="block">
      <div v-for="item in 10" :key="item">{{item}}</div>
     </div>
  </ul-scrollbar>
```
### 表单 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 
<ul-image 
  style="width: 100px; height: 100px"
  src="https://leicloud.ulearning.cn//tongsk/contentmanage/85bcde8d-b5ba-4e72-9db3-b18d9924af4d.JPG" 
  :preview-src-list="imgList"
  @on-download="onDownload"
  >
</ul-image>
//方式二
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
<ul-editor :height="400" v-model="input1" @change="changeHandller" :allowPaste="false" :options="{height: 300}" :uploaderConfig="{
    authorization: '269AEBD380E2E26286B08AA8F7EEF687',
    uptokenHost: 'https://courseapi.tongshike.cn',
    obsHost: 'https://leicloud.ulearning.cn'
 }"></ul-editor>
```
@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.59
editor 上传支持qiniu huawei设置