yks-element 1.7.0 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +50 -15
- package/lib/theme-chalk/audio.css +1 -0
- package/lib/theme-chalk/index.css +1 -1
- package/lib/theme-chalk/video-player.css +1 -1
- package/lib/yks.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -20,6 +20,10 @@ Vue.component(Button.name, Button)
|
|
|
20
20
|
|
|
21
21
|
### YKS-ELEMENT 文档
|
|
22
22
|
|
|
23
|
+
#### 2.0.0 更新文档
|
|
24
|
+
|
|
25
|
+
新增 `YksAudio` 音频条播放器；`YksMultimedia` 在 `isAudioPlay` 且音频后缀时走 `yks-audio`（mp3/wav/aac），外层可加 `is-audio-play-bar` 全宽条；`playLimitEnabled` 开启后点击播放抛 `play-request`（需外部调用 `play()`），并禁止拖进度。
|
|
26
|
+
|
|
23
27
|
#### 1.7.0 更新文档()
|
|
24
28
|
|
|
25
29
|
新增YksVideoPlayer组件，支持视频播放功能；在App.vue中添加示例用法；优化Multimedia组件的样式和功能；更新依赖项以支持新特性。
|
|
@@ -160,17 +164,41 @@ Vue.component(Button.name, Button)
|
|
|
160
164
|
- sure 点击确定时触发
|
|
161
165
|
- （其余事件完全继承 el-dialog，如 open、opened、closed）
|
|
162
166
|
|
|
167
|
+
* yks-audio 音频条播放器（原生 audio + 自定义控制条）
|
|
168
|
+
- Attribute
|
|
169
|
+
- src 音频 URL，必填（mp3 / wav / aac）
|
|
170
|
+
- width 预留宽度（px），默认 160（条形样式以 100% 撑满父级为准）
|
|
171
|
+
- height 预留高度（px），默认 90
|
|
172
|
+
- playLimitEnabled 是否开启播放限制，默认 false（true：点击播放抛 play-request，禁止拖进度）
|
|
173
|
+
- allowPause 限制开启时是否允许暂停，默认 true
|
|
174
|
+
- 展示
|
|
175
|
+
- 有总时长：右侧显示 当前 / 总时长（如 0:00 / 3:43）
|
|
176
|
+
- 拿不到总时长：只显示当前播放时间，进度条不可拖
|
|
177
|
+
- Methods（Events）
|
|
178
|
+
- play-request playLimitEnabled=true 且未在播放时，用户点击播放按钮触发；需外部再调用 play()
|
|
179
|
+
- Ref Methods（通过 $refs 调用）
|
|
180
|
+
- play() 外部触发播放，返回 Promise
|
|
181
|
+
- forcePause() 外部强制暂停（超次等）
|
|
182
|
+
- getMediaEl() 返回内部 HTMLAudioElement
|
|
183
|
+
|
|
163
184
|
* yks-multimedia 媒体文件显示（图片/音频/视频/文档）
|
|
164
185
|
- Attribute
|
|
165
|
-
- data
|
|
166
|
-
- visibleDel
|
|
167
|
-
- width
|
|
168
|
-
- height
|
|
169
|
-
- customize
|
|
170
|
-
- visibleFileName
|
|
171
|
-
- client
|
|
186
|
+
- data 文件信息对象，含 content（文件 URL）、fileName（文件名）
|
|
187
|
+
- visibleDel 是否显示删除按钮，默认 false
|
|
188
|
+
- width 宽度（px），默认 160（音频条模式下由 is-audio-play-bar 撑满）
|
|
189
|
+
- height 高度（px），默认 90
|
|
190
|
+
- customize 是否自定义视频放大（客户端模式自动为 true，移动端自动为 false），默认 true
|
|
191
|
+
- visibleFileName 是否显示文件名称，默认 true
|
|
192
|
+
- client 是否为客户端模式（android 下自动设置为 true），默认 false
|
|
193
|
+
- isAudioPlay 是否使用音频条 yks-audio，默认 false（需同时为 mp3/wav/aac）
|
|
194
|
+
- playLimitEnabled 是否开启播放限制（透传 yks-audio / yks-video），默认 false
|
|
195
|
+
- allowPause 限制开启时是否允许暂停，默认 true
|
|
172
196
|
- Methods（Events）
|
|
173
|
-
- delete
|
|
197
|
+
- delete 点击删除图标时触发，参数：data（当前文件信息对象），与 visibleDel 联动
|
|
198
|
+
- play-request 限制模式下用户点击播放时触发，需外部调用内部播放器 play()
|
|
199
|
+
- Ref Methods（通过 $refs 调用）
|
|
200
|
+
- play() 触发内部 yks-video 播放（音频条请 $refs.innerAudio.play()）
|
|
201
|
+
- forcePause() 强制暂停内部 yks-video
|
|
174
202
|
|
|
175
203
|
* yks-pagination 分页
|
|
176
204
|
- Attribute
|
|
@@ -242,7 +270,8 @@ Vue.component(Button.name, Button)
|
|
|
242
270
|
- width 编辑器宽度，默认 auto
|
|
243
271
|
- inline 是否使用内联模式，默认 false
|
|
244
272
|
- autosize 是否显示拖拽调高手柄，默认 false
|
|
245
|
-
- fileParams
|
|
273
|
+
- fileParamsAttributes fileParams自定义模式
|
|
274
|
+
- fileParams 附件数据列表，参考yks-multimedia
|
|
246
275
|
- uploadFileToHwCloud 图片上传函数，接收 blobInfo，返回图片 URL
|
|
247
276
|
- uploadFileFunction 音视频/文件上传函数
|
|
248
277
|
- externalPlugins 外部插件扩展对象
|
|
@@ -273,13 +302,19 @@ Vue.component(Button.name, Button)
|
|
|
273
302
|
|
|
274
303
|
* yks-video 轻量视频/音频播放器
|
|
275
304
|
- Attribute
|
|
276
|
-
- src
|
|
277
|
-
- width
|
|
278
|
-
- height
|
|
279
|
-
- customize
|
|
280
|
-
- fullScreen
|
|
305
|
+
- src 视频/音频 URL，必填
|
|
306
|
+
- width 播放器宽度（px），默认 160
|
|
307
|
+
- height 播放器高度（px），默认 90
|
|
308
|
+
- customize 是否使用自定义全屏事件（替换原生全屏），默认 false
|
|
309
|
+
- fullScreen 是否显示全屏图标按钮（仅 mp4 生效），默认 true
|
|
310
|
+
- playLimitEnabled 是否开启播放限制，默认 false（true：点击播放抛 play-request，可禁拖/禁暂停）
|
|
311
|
+
- allowPause 限制开启时是否允许暂停/拖进度，默认 true
|
|
281
312
|
- Methods（Events）
|
|
282
|
-
- customize
|
|
313
|
+
- customize customize=true 时点击全屏按钮或双击视频触发，参数：videoEl、{ src, musicDuration, id }
|
|
314
|
+
- play-request playLimitEnabled=true 且未在播放时，用户点击播放触发；需外部再调用 play()
|
|
315
|
+
- Ref Methods（通过 $refs 调用）
|
|
316
|
+
- play() 外部触发播放，返回 Promise
|
|
317
|
+
- forcePause() 外部强制暂停
|
|
283
318
|
```
|
|
284
319
|
|
|
285
320
|
### 更新依赖
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.yks-multimedia__audio{width:100%}.yks-multimedia__audio .yks-audio__el{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.yks-multimedia__audio .yks-audio-bar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:36px;padding:0 12px 0 10px;-webkit-box-sizing:border-box;box-sizing:border-box;background:-webkit-gradient(linear,left top,left bottom,from(#2a2a2a),to(#1c1c1c));background:linear-gradient(180deg,#2a2a2a 0,#1c1c1c 100%);color:#f4f4f4;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}.yks-multimedia__audio .yks-audio-bar__play{-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:28px;height:28px;margin-right:10px;padding:0;border:0;background:0 0;color:#f7f7f7;cursor:pointer;-webkit-transition:color .18s ease,-webkit-transform .18s ease;transition:color .18s ease,-webkit-transform .18s ease;transition:color .18s ease,transform .18s ease;transition:color .18s ease,transform .18s ease,-webkit-transform .18s ease}.yks-multimedia__audio .yks-audio-bar__play:hover{color:#fff;-webkit-transform:scale(1.06);transform:scale(1.06)}.yks-multimedia__audio .yks-audio-bar__play:active{-webkit-transform:scale(.96);transform:scale(.96)}.yks-multimedia__audio .yks-audio-bar__icon{display:block;width:22px;height:22px}.yks-multimedia__audio .yks-audio-bar__progress{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0;padding:0 6px}.yks-multimedia__audio .yks-audio-bar__progress .el-slider .el-slider__runway{height:2px;background-color:rgba(255,255,255,.28);margin:16px 0;border-radius:1px}.yks-multimedia__audio .yks-audio-bar__progress .el-slider .el-slider__bar{height:2px;background-color:#fff;border-radius:1px}.yks-multimedia__audio .yks-audio-bar__progress .el-slider .el-slider__button-wrapper{width:16px;height:16px;top:-7px}.yks-multimedia__audio .yks-audio-bar__progress .el-slider .el-slider__button{width:10px;height:10px;border:0;background-color:#fff;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.18);box-shadow:0 0 0 1px rgba(0,0,0,.18)}.yks-multimedia__audio .yks-audio-bar__progress .el-slider.is-disabled .el-slider__button{background-color:#fff}.yks-multimedia__audio .yks-audio-bar__progress .el-slider.is-disabled .el-slider__runway{cursor:default}.yks-multimedia__audio .yks-audio-bar__time{-ms-flex-negative:0;flex-shrink:0;margin-left:12px;font-family:Bahnschrift,"DIN Alternate","Sarasa Mono SC",Consolas,monospace;font-size:12px;font-weight:500;letter-spacing:.02em;line-height:1;color:rgba(255,255,255,.92);white-space:nowrap;font-variant-numeric:tabular-nums}.yks-multimedia__audio.is-playing .yks-audio-bar{background:-webkit-gradient(linear,left top,left bottom,from(#303030),to(#1f1f1f));background:linear-gradient(180deg,#303030 0,#1f1f1f 100%)}.yks-multimedia__audio.is-audio-no-seek .yks-audio-bar__progress{pointer-events:none}.yks-multimedia.is-audio-play-bar{width:100%!important;height:auto!important;display:block;margin-right:0}
|