ulearning-ui

#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