ulearning-ui v0.0.57
#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
9 months ago
10 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago