Ulearning-ui NPM

#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 事件监听编辑器内容变化