yks公共库

Quick Start

import YksElement from 'yks-element'
import '~yks-element/lib/theme-chalk/index.css';

Vue.use(YksElement)

// or
import {
  Button
  // ...
} from 'yks-element'

Vue.component(Button.name, Button)

YKS-ELEMENT 文档

1.7.0 更新文档()

新增YksVideoPlayer组件，支持视频播放功能；在App.vue中添加示例用法；优化Multimedia组件的样式和功能；更新依赖项以支持新特性。

1.6.3 更新文档

{
  toolbar : ['selectVideo']
}

 selectVideo 新增选择视频
 点击抛出 selectVideo 事件

1.6.2 新增着重号 emphasis

{
  plugins : ['emphasis'],
  toolbar : ['emphasis']
}

新增ace-builds 编辑器

[
  { label: 'JavaScript', value: 'javascript' },
  { label: 'Objective-C', value: 'objectivec' },
  { label: 'C++', value: 'c_cpp' },
  { label: 'Java', value: 'java' },
  { label: 'C#', value: 'csharp' },
  { label: 'Go', value: 'golang' },
  { label: 'Python', value: 'python' },
  { label: 'PHP', value: 'php' },
  { label: 'SQL', value: 'sql' },
]

  * yks-video-player 播放器（基于 vue-video-player@5 + video.js@6）
    - 使用前需在项目入口引入 video.js 样式：
      import 'video.js/dist/video-js.css'
    - Attribute
      - src           视频/音频 URL
      - width         播放器宽度（px），默认 640
      - height        播放器高度（px），默认 360
      - poster        封面图片 URL，为空时自动截取视频第一帧
      - autoplay      是否自动播放，默认 false
      - loop          是否循环播放，默认 false
      - muted         是否静音，默认 false
      - fluid         是否响应式撑满父容器，默认 false（开启后 width/height 失效）
      - sources       多清晰度源数组 [{ src, type, label }]，优先级高于 src
      - playbackRates 倍速选项数组，默认 [0.5, 1, 1.5, 2]
      - options       video.js 原生 options 对象透传（高级配置）
    - Methods（Events）
      - ready         播放器实例就绪，参数：player（video.js 实例）
      - play          开始播放，参数：player
      - pause         暂停，参数：player
      - ended         播放结束，参数：player
      - timeupdate    进度更新，参数：{ currentTime, duration }
      - error         播放错误，参数：err

  * yks-acebuilds 代码编辑器
    - Attribute
      - value(v-model)  编辑器绑定值（代码字符串），必填
      - theme           主题，默认 tomorrow_night（可选 monokai、chrome）
      - language        编程语言，默认 javascript（可选 java、python、sql 等）
      - disabled        是否只读，默认 false
      - noCopy          是否禁用 Ctrl+C/V/X，默认 false
      - autosize        是否显示拖拽调高手柄，默认 false
      - height          编辑器高度（px），默认 400
      - fontSize        字体大小（px），默认 16
      - tabSize         Tab 缩进空格数，默认 4
      - lockedLines     锁定只读的行号数组（1-based），默认 []
    - Methods（Events）
      - input           内容变更，参数：value（用于 v-model）
    - Ref Methods（通过 $refs 调用）
      - setValue()      将当前 value prop 重新同步到编辑器
      - setTheme()      将当前 theme prop 应用到编辑器
      - setTabSize()    将当前 tabSize prop 应用到编辑器
      - setFontSize()   将当前 fontSize prop 应用到编辑器

  * yks-waveview 播放音频并显示波形轨迹
    - Attribute
      - processSlotClass  WaveView 视图挂载目标的 class 名，默认 IctrlProcessWave
      - url               要播放的音频文件 URL
      - styleWave         波形容器自定义样式对象
      - loop              是否循环播放
    - Ref Methods（通过 $refs 调用）
      - onStart()                       开始加载并播放音频
      - onPause()                       暂停播放
      - onResume()                      恢复播放
      - onStop()                        停止播放并重置状态
      - setRealtimeOn()                 切换为实时模式（降低延迟，丢弃积压数据）
      - setRealtimeOff()                切换为非实时模式（顺序完整播放所有数据）
      - receiveAudioChunk(arrayBuffer)  接收外部实时音频片段数据（ArrayBuffer）

  * yks-recorders 录音并显示音频轨迹
    - Attribute
      - fileSize         录音最大时长（单位 s），0 表示不限制，默认 600
      - sampleRate       录音采样率，默认 16000
      - bitRate          录音比特率，默认 16
      - type             录制输出格式，默认 mp3
      - disabled         是否禁止录制，默认 false
      - processSlotClass 使用 process slot 时 WaveView 挂载目标的 class 名
      - title            自定义状态标题文字
      - showProcess      是否显示录制波形轨迹，默认 false
    - Slot
      - default（作用域插槽）  自定义录音控件 UI，作用域变量：onRecord、timestamp、resetData
      - process              自定义波形显示区域（需配合 processSlotClass 使用）
    - Methods（Events）
      - change    录音完成后触发，参数：{ blob, duration, timestamp, powerLevel, fileSrc }
      - succress  每次录音操作成功后触发，参数：true
      - error     录音出错时触发，参数：error 对象
      - buffers   showProcess=true 时实时推送录音缓冲数据，参数：{ buffers, powerLevel, sampleRate }
    - Ref Methods（通过 $refs 调用）
      - onRecord()   开始/停止录音（toggle）
      - resetData()  重置所有录音状态数据

  * yks-dialog 弹窗（继承 el-dialog 全部属性与事件）
    - Attribute
      - show         是否显示 Dialog，支持 .sync 修饰符，默认 false
      - height       内容区滚动高度，默认 390px
      - loading      确定按钮 loading 状态，默认 false
      - disabledSure 是否禁用确定按钮，默认 false
      - footer       是否显示底部操作区，默认 true
      - （其余属性完全继承 el-dialog，如 title、width、top、modal、append-to-body 等）
    - Slot
      - title    自定义 Dialog 标题区域
      - default  内容区（被 yks-scrollbar 包裹）
      - footer   自定义底部操作区（默认渲染"确定/取消"按钮）
    - Methods（Events）
      - close    点击取消或关闭时触发
      - sure     点击确定时触发
      - （其余事件完全继承 el-dialog，如 open、opened、closed）

  * yks-multimedia 媒体文件显示（图片/音频/视频/文档）
    - Attribute
      - data            文件信息对象，含 content（文件 URL）、fileName（文件名）
      - visibleDel      是否显示删除按钮，默认 false
      - width           宽度（px），默认 160
      - height          高度（px），默认 90
      - customize       是否自定义视频放大（客户端模式自动为 true，移动端自动为 false），默认 true
      - visibleFileName 是否显示文件名称，默认 true
      - client          是否为客户端模式（android 下自动设置为 true），默认 false
    - Methods（Events）
      - delete  点击删除图标时触发，参数：data（当前文件信息对象），与 visibleDel 联动

  * yks-pagination 分页
    - Attribute
      - pageOption  分页状态对象（必填），含 total（总条数）、page（当前页）、pageSize（每页条数）
      - pageSizes   每页条数可选列表，默认 [10, 20, 50, 100]
      - layout      分页布局，默认 sizes, total, prev, pager, next, jumper
      - background  是否为分页按钮添加背景色，默认 false
      - hidden      是否隐藏分页组件，默认 false
    - Methods（Events）
      - pagination  页码或每页条数变更时触发，参数：更新后的 pageOption 对象

  * yks-scrollbar 自定义滚动条
    - Attribute
      - height  滚动区容器高度（CSS 值，如 390px、100%），默认 auto
    - Slot
      - default  被滚动区包裹的内容

  * yks-select 下拉选择（继承 el-select 全部属性与事件）
    - Attribute
      - data             下拉选项数据列表，默认 []
      - domNum           每次渲染的 DOM 条数，默认 10
      - domLimit         是否启用内部列表渲染模式，默认 true（false 时使用默认 slot）
      - optionMap        自定义字段映射，如 { value: 'id', label: 'name', disabled: 'dis' }
      - valueKey         作为 value 唯一标识的键名（对象值时使用）
      - clearable        是否可清空，默认 false
      - allowBottom      是否显示吸底区域（footer 插槽），默认 false
      - filterableInline 搜索框是否置于下拉框内部，默认 false
      - （其余属性完全继承 el-select）
    - Slot
      - default  domLimit=false 时自定义完整选项列表
      - options  作用域插槽，自定义每个选项内容，作用域变量：item
      - footer   吸底插槽（需 allow-bottom=true）
    - Methods（Events）
      - input         选中值变化，参数：当前选中值（用于 v-model）
      - scrollBottom  remote 模式下滚动到底部时触发（用于加载更多）
      - （其余事件继承 el-select）
    - Ref Methods（通过 $refs 调用）
      - focus()  使选择器聚焦
      - blur()   使选择器失焦

  * yks-table 表格（继承 el-table 全部属性与事件）
    - Attribute
      - columns   列定义数组，每项属性完全兼容 el-table-column 的 props
      - dom       是否启用内部自动列渲染，默认 true（false 时通过默认 slot 自定义列）
      - emptyMsg  暂无数据时的提示文字，默认 暂无数据~
      - （其余属性完全继承 el-table，如 data、height、stripe、border、row-key 等）
    - Slot
      - default          dom=false 时自定义列（直接放 el-table-column）
      - [col.prop]       每列单元格内容插槽，作用域变量：row、$index、column、columnIndex
      - header[col.prop] 每列表头插槽，作用域变量：column、$index
      - expand           展开行插槽，作用域变量：row、scope、$index
      - append           插入至表格最后一行之后
      - empty            空数据时显示的内容
    - （所有 el-table 原生事件均透传，如 selection-change、row-click、sort-change）

  * yks-tinymce 富文本编辑器
    - Attribute
      - value(v-model)       编辑器绑定值（HTML 富文本），必填
      - videoWidth           附件区视频宽度（px），默认 160
      - videoHeight          附件区视频高度（px），默认 90
      - effect               主题标识，默认 default
      - language             语言包，默认 zh_CN
      - toolbar              扩展工具栏（数组或字符串），默认 []
      - charLimit            字数上限，默认 5000
      - plugins              插件列表，默认 []
      - menubar              菜单栏，默认 file edit insert view format table
      - fontsizeFormats      字号选项字符串
      - height               编辑器高度，默认 660px
      - width                编辑器宽度，默认 auto
      - inline               是否使用内联模式，默认 false
      - autosize             是否显示拖拽调高手柄，默认 false
      - fileParamsAttributes fileParams自定义模式
      - fileParams           附件数据列表，参考yks-multimedia
      - uploadFileToHwCloud  图片上传函数，接收 blobInfo，返回图片 URL
      - uploadFileFunction   音视频/文件上传函数
      - externalPlugins      外部插件扩展对象
      - accept               限制图片上传类型（后缀数组），默认 []
      - moreParameters       透传到 tinymce init 的额外参数对象
    - Methods（Events）
      - input        内容变更，参数：value（用于 v-model）
      - blur         焦点变化，参数：true（失焦）/ false（聚焦）
      - delte        删除附件，参数：{ row, index }（注意事件名拼写为 delte）
      - change       上传音视频/文件确认后触发，参数：{ value, itemAttr: { type, content } }
      - selectVideo  工具栏点击"选择视频"按钮时触发
    - Ref Methods（通过 $refs 调用）
      - handleInsertContent(value)  向编辑器光标处插入 HTML 内容
      - deleFillItem(index)         删除第 index 个填空输入框并重新编号

  * yks-uploadFile 文件上传弹窗
    - Attribute
      - show                是否显示弹窗，支持 .sync 修饰符，默认 false
      - title               Dialog 标题
      - uploadFileFunction  自定义上传函数，接收 { file, fileData, fileSrc }，需返回 Promise
      - fileData            文件配置信息，含 fileType、typeList、fileSize、types 字段
      - excludeList         排除的文件类型后缀数组，默认 []
    - Slot
      - footer  自定义底部按钮区，作用域变量：row（当前文件数据）
    - Methods（Events）
      - sure         文件上传成功后触发，参数：上传函数返回的 data
      - update:show  关闭弹窗时触发（.sync 机制）

  * yks-video 轻量视频/音频播放器
    - Attribute
      - src        视频/音频 URL，必填
      - width      播放器宽度（px），默认 160
      - height     播放器高度（px），默认 90
      - customize  是否使用自定义全屏事件（替换原生全屏），默认 false
      - fullScreen 是否显示全屏图标按钮（仅 mp4 生效），默认 true
    - Methods（Events）
      - customize  customize=true 时点击全屏按钮或双击视频触发，参数：videoEl、{ src, musicDuration, id }

更新依赖

npm install yks-element@latest -S
or
yarn add yks-element@latest -S

发布npm包

npm publish

发布测试包

version : '0.0.1-beta'
npm publish --tag=beta

下载测试包

npm install yks-element@beta

删除npm包

npm unpublish [email protected] --force

yks-icon 图标库

 * yks-icon-camera
 * yks-icon-download
 * yks-icon-excel
 * yks-icon-other
 * yks-icon-pdf
 * yks-icon-ppt
 * yks-icon-word
 * yks-icon-play
 * yks-icon-microphone
 * yks-icon-finish
 * yks-icon-puase
 * yks-icon-bichen
 * yks-icon-edit
 * yks-icon-message
 * yks-icon-notification
 * yks-icon-duixiao
 * yks-icon-circle
 * yks-icon-export
 * yks-icon-publish
 * yks-icon-close
 * yks-icon-select
 * yks-icon-import
 * yks-icon-filter
 * yks-icon-merge
 * yks-icon-split
 * yks-icon-archive
 * yks-icon-calendar
 * yks-icon-warning
 * yks-icon-toggle
 * yks-icon-up-arrow
 * yks-icon-down-arrow
 * yks-icon-left-arrow
 * yks-icon-right-arrow
 * yks-icon-caret-bottom
 * yks-icon-report
 * yks-icon-notes
 * yks-icon-settings
 * yks-icon-exam
 * yks-icon-log
 * yks-icon-management
 * yks-icon-practice
 * yks-icon-user
 * yks-icon-add
 * yks-icon-audio
 * yks-icon-video
 * yks-icon-refresh-time
 * yks-icon-list
 * yks-icon-pause
 * yks-icon-flag
 * yks-icon-voice
 * yks-icon-quiz
 * yks-icon-alert
 * yks-icon-application
 * yks-icon-setting
 * yks-icon-organization
 * yks-icon-clipboard
 * yks-icon-duplicate
 * yks-icon-zoom
 * yks-icon-translate
 * yks-icon-record
 * yks-icon-snapshot
 * yks-icon-synchronize
 * yks-icon-volume
 * yks-icon-gear
 * yks-icon-arrow-down
 * yks-icon-silence
 * yks-icon-sound
 * yks-icon-exam-receive
 * yks-icon-exam-warning
 * yks-icon-expand
 * yks-icon-strengthen
 * yks-icon-collapse
 * yks-icon-restrict-video
 * yks-icon-carousel-settings
 * yks-icon-video-guard
 * yks-icon-restriction
 * yks-icon-live-broadcast
 * yks-icon-refresh
 * yks-icon-message-normal
 * yks-icon-message-small
 * yks-icon-id-route
 * yks-icon-unified-route
 * yks-icon-tracking
 * yks-icon-notification-log
 * yks-icon-multi-notification
 * yks-icon-voice-4
 * yks-icon-fullscreen
 * yks-icon-device-monitor
 * yks-icon-person-recognition
 * yks-icon-search-small
 * yks-icon-dropdown
 * yks-icon-mute
 * yks-icon-unmute

LICENSE

MIT