yks-element 1.0.314 → 1.0.315

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yks-element",
-  "version": "1.0.314",
+  "version": "1.0.315",
   "description": "yks公共库",
   "private": false,
   "keywords": ["yks-element", "element-ui", "tinymce", "vue"],

package/packages/Dialog/src/index.vue

@@ -37,7 +37,7 @@ export default {
         ...ElDialog.props,
         height: {
             type: String,
-            default: '300px'
+            default: '390px'
         },
         show: {
             type: Boolean,

package/packages/Multimedia/src/index.vue

@@ -15,7 +15,17 @@
                 ></i>
             </div>
         </div>
-        <yks-video v-if="fileType === '2'" :src="data.content"></yks-video>
+        <yks-video v-else-if="fileType === '2'" :src="data.content"></yks-video>
+        <div v-else class="ks-stem__itemattrs" :title="fileName">
+            <div class="yks-tc file-stem">
+                <i class="el-icon-document-remove ks-stem__remove" @click="handleClick"></i>
+                <i
+                    v-if="visibleDel"
+                    class="el-icon-error media-delfile"
+                    @click.stop="handleCloseFile"
+                ></i>
+            </div>
+        </div>
         <div class="ks-stem__content yks-text-ellipsis">
             {{ fileName }}
         </div>
@@ -135,6 +145,10 @@ export default {
     .ks-stem__itemattrs {
         border-radius: 4px;
         position: relative;
+        .ks-stem__remove{
+            font-size: 50px;
+            cursor: pointer;
+        }
         .ks-stem__icon {
             width: 77px;
             height: 77px;

package/packages/Tinymce/src/index.vue

@@ -29,6 +29,7 @@
             :show.sync="show"
             :fileData="fileData"
             :title="title"
+            :uploadFileFunction="uploadFileFunction"
             @sure="onSure"
         ></yks-uploadfile>
     </div>
@@ -93,19 +94,28 @@ export default {
         value: {
             required: true
         },
+        /* 语言包 */
         language: {
+            type: String,
             default: 'zh_CN'
         },
+        /* 扩展bar */
         toolbar: {
+            type: [String, Array],
             default: () => []
         },
+        /* 字数限制 */
         charLimit: {
+            type: Number,
             default: 5000
         },
+        /* 插件 */
         plugins: {
+            type: [String, Array],
             default: () => []
         },
         menubar: {
+            type: String,
             default: 'file edit insert view format table'
         },
         height: {
@@ -113,31 +123,37 @@ export default {
             default: '660px'
         },
         width: {
+            type: String,
             default: 'auto'
         },
         inline: {
             type: Boolean,
             default: false
         },
+        /* 音视频数据 */
         fileParams: {
             type: Array,
             default: () => []
         },
+        /* 
+            上传文件函数
+            抛出blobInfo函数
+            接收data src
+        */
         uploadFileToHwCloud: {
             required: true,
             type: Function
         },
-        paramsList: {
-            type: Array,
-            default: () => {
-                return [
-                    {
-                        keys: 'fileType',
-                        value: 'stem'
-                    }
-                ]
-            }
+        /* 
+            上传音视频文件函数
+            抛出数组文件信息
+            接收data src
+        */
+        uploadFileFunction: {
+            required: true,
+            type: Function
         },
+        /* 扩展插件 */
         externalPlugins: {
             type: Object,
             default: () => {
@@ -236,7 +252,7 @@ export default {
                     })
 
                     try {
-                        const { data } = await this.uploadFileToHwCloud(blobInfo)
+                        const data = await this.uploadFileToHwCloud(blobInfo)
                         success(data)
                     } catch (error) {
                         console.log(error)

package/packages/UploadFile/src/index.vue

@@ -7,7 +7,7 @@
         :show.sync="show"
         append-to-body
         width="600px"
-        height="250px"
+        height="300px"
         @close="onClose"
         @sure="onSure"
     >
@@ -35,7 +35,6 @@
                 :multiple="false"
                 :accept="accept"
                 :auto-upload="false"
-                :headers="params.headers"
                 :limit="1"
                 :on-change="beforeUpload"
             >
@@ -105,17 +104,16 @@ export default {
             type: String,
             default: ''
         },
-        params: {
-            type: Object,
-            default: () => {
-                return {
-                    type: 'multimediaFile',
-                    headers: {},
-                    data: null
-                }
-            }
+        /* 上传函数 */
+        uploadFileFunction: {
+            type: Function,
+            required: true
         },
-        uploadFn: Function,
+        /* 
+            fileType: 上传类型 
+            typeList: 文件类型
+            fileSize: 文件大小
+        */
         fileData: {
             type: Object,
             default: () => {
@@ -237,27 +235,9 @@ export default {
         async handleUpload() {
             this.loading = true
             try {
-                const fileData = new FormData()
-                Object.keys(this.params.data || {}).forEach((key) => {
-                    fileData.append(key, this.params.data[key])
-                })
-
-                if (this.fileData.fileType === 'recording') {
-                    const fileNmae = Date.now() + '.mp3'
-                    const file = new File([this.data.data], fileNmae)
-                    fileData.append('fileType', this.params.type || 'multimediaFile')
-                    fileData.append('file', file)
-                } else {
-                    fileData.append('fileType', this.params.type || 'multimediaFile')
-                    fileData.append('file', this.data.raw)
-                }
-
-                const { data, code } = await this.uploadFn(fileData)
-                if (code === 20000) {
-                    Message.success('添加成功')
-                    this.$emit('sure', data)
-                    this.onClose()
-                }
+                const data = await this.uploadFileFunction(this.data)
+                this.$emit('sure', data)
+                this.onClose()
             } catch (error) {
                 console.log(error)
             }
@@ -373,7 +353,7 @@ export default {
 .dialog {
     position: relative;
     .dialog-title {
-        margin-top: 0;
+        margin-top: 20px;
     }
     .dialog-audio {
         display: none;
@@ -399,10 +379,10 @@ export default {
         bottom: 20px;
     }
     .icon-pause {
-        width: 10px;
+        width: 20px;
         height: 20px;
-        border-left: #fff solid 4px;
-        border-right: #fff solid 4px;
+        border-left: #fff solid 5px;
+        border-right: #fff solid 5px;
     }
 }
 </style>

package/packages/Video/src/index.vue

@@ -1,39 +1,48 @@
 <template>
-    <div class="ks-stem__videos yks-flex h-center v-center" :class="{ 'dialog-pause': playing }">
-        <video
-            :ref="videoId"
-            :width="width"
-            :height="height"
-            :src="src"
-            :poster="musicBgs"
-            playsinline
-            webkit-playsinline
-            preload="auto"
-            class="file__videos"
-            @timeupdate="durationUpdate"
-            @canplay="getDuration"
-        ></video>
-        <div class="slider-video">
-            <i class="el-icon-video-pause" @click.stop="handlePause"></i>
-            <Slider
-                v-model="musicDuration"
-                :max="musicAllDuration"
-                height="2px"
-                :show-tooltip="false"
-                class="slider__value"
-                @change="changeMusicDuration"
-                @mousedown.native="isChange = true"
-                @mouseup.native="isChange = false"
-            ></Slider>
-            <span class="slider__text">{{ formatTime(musicAllDuration) }}</span>
-            <i class="el-icon-full-screen" @click.stop="handleFullScreen"></i>
-        </div>
+    <div class="multimedia__video">
         <div
-            v-if="!playing"
-            class="dialog-playing yks-flex h-center v-center"
-            @click.stop="handlePlaying"
+            class="ks-stem__videos yks-flex h-center v-center"
+            :class="{ 'dialog-pause': playing }"
         >
-            <i class="icon-recording el-icon-video-play"></i>
+            <video
+                :ref="videoId"
+                :width="width"
+                :height="height"
+                :src="src"
+                :poster="musicBgs"
+                playsinline
+                webkit-playsinline
+                preload="auto"
+                class="file__videos"
+                @timeupdate="durationUpdate"
+                @canplay="getDuration"
+            ></video>
+            <div v-if="!isInfinity" class="slider-video">
+                <i class="el-icon-video-pause video-icon_mini" @click.stop="handlePause"></i>
+                <Slider
+                    v-model="musicDuration"
+                    :max="musicAllDuration"
+                    height="2px"
+                    :show-tooltip="false"
+                    class="slider__value"
+                    @change="changeMusicDuration"
+                    @mousedown.native="isChange = true"
+                    @mouseup.native="isChange = false"
+                ></Slider>
+                <span class="slider__text video-icon_mini">{{ formatTime(musicAllDuration) }}</span>
+                <i
+                    v-if="fileType === '3'"
+                    class="el-icon-full-screen video-icon_mini"
+                    @click.stop="handleFullScreen"
+                ></i>
+            </div>
+            <div
+                v-if="!playing || isInfinity"
+                class="dialog-playing yks-flex h-center v-center"
+                @click.stop="handlePlaying"
+            >
+                <i :class="[`icon-recording ${playingIcon}`]"></i>
+            </div>
         </div>
     </div>
 </template>
@@ -61,10 +70,19 @@ export default {
             /* 歌曲当前时长 */
             musicDuration: 0,
             /* 判断是否被拖动 */
-            isChange: false
+            isChange: false,
+            /* 判断是否为Infinity */
+            isInfinity: false
         }
     },
     computed: {
+        playingIcon() {
+            if (this.playing) {
+                return 'el-icon-video-pause'
+            } else {
+                return 'el-icon-video-play'
+            }
+        },
         /* 播放背景图 */
         musicBgs() {
             if (this.fileType === '3') {
@@ -150,7 +168,15 @@ export default {
         /* 获取音视频时长 */
         getDuration() {
             const video = this.$refs[this.videoId]
-            this.musicAllDuration = video.duration
+            console.log(video.duration)
+
+            if (!Number.isFinite(video.duration)) {
+                this.musicAllDuration = 300
+                this.isInfinity = true
+            } else {
+                this.isInfinity = false
+                this.musicAllDuration = video.duration
+            }
         },
         /* 获取音视频播放当前时间 */
         durationUpdate() {
@@ -163,6 +189,8 @@ export default {
         handlePlaying() {
             if (!this.playing) {
                 this.$refs[this.videoId].play()
+            } else {
+                this.handlePause()
             }
         },
         /* 暂停 */
@@ -175,93 +203,150 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.multimedia__video {
+    position: relative;
+    margin-right: 10px;
 
-.slider-video {
-    position: absolute;
-    width: 100%;
-    left: 0;
-    bottom: 2px;
-    display: flex;
-    align-items: center;
-    .el-icon-video-pause {
-        cursor: pointer;
-        color: #ffffff;
-        margin-left: 5px;
-        margin-right: 5px;
-    }
-    .el-icon-full-screen {
-        cursor: pointer;
-        color: #ffffff;
-        font-size: 12px;
-        margin-left: 5px;
-        margin-right: 5px;
-    }
-    .slider__value {
-        flex: 1;
-        margin: 0 5px;
-    }
-    .slider__text {
-        color: #fff;
-        font-size: 12px;
-        transform: scale(0.7);
-    }
-    ::v-deep {
-        .el-slider__runway {
-            margin: 0;
-            height: 1px;
-            background-color: #ffffff;
-            border-radius: 1px;
+    .slider-video {
+        position: absolute;
+        width: 100%;
+        left: 0;
+        bottom: 2px;
+        display: flex;
+        align-items: center;
+
+        .video-icon_mini {
+            font-size: 13px !important;
+            cursor: pointer;
+            color: #ffffff;
+            margin-left: 5px;
+            margin-right: 5px;
         }
-        .el-slider__bar {
-            height: 1px;
-            background-color: transparent;
-            border-radius: 1px;
+
+        .el-icon-video-pause {
+            cursor: pointer;
+            color: #ffffff;
+            margin-left: 5px;
+            margin-right: 5px;
+        }
+        .slider__value {
+            flex: 1;
+            margin: 0 5px;
         }
-        .el-slider__button-wrapper {
-            height: 31px;
-            width: 13px;
+        .slider__text {
+            color: #fff;
+            font-size: 12px;
+            transform: scale(0.7);
         }
-        .el-slider__button {
-            height: 5px;
-            width: 5px;
-            background: #ffffff;
-            border: unset;
+        ::v-deep {
+            .el-slider__runway {
+                margin: 0;
+            }
+            .el-slider__runway {
+                height: 1px;
+                background-color: #ffffff;
+                border-radius: 1px;
+            }
+            .el-slider__bar {
+                height: 1px;
+                background-color: transparent;
+                border-radius: 1px;
+            }
+            .el-slider__button-wrapper {
+                height: 31px;
+                width: 13px;
+            }
+            .el-slider__button {
+                height: 5px;
+                width: 5px;
+                background: #ffffff;
+                border: unset;
+            }
         }
     }
-}
 
-.media-delvideo {
-    top: -5px;
-    right: -5px;
-}
+    .file-stem {
+        position: relative;
+        width: 80px;
+        margin: 0 auto;
+    }
 
-.ks-stem__videos {
-    border-radius: 4px;
-    position: relative;
-    .file__videos {
-        background: #000000;
+    &:hover {
+        .media-delfile,
+        .media-delvideo {
+            opacity: 1 !important;
+        }
+
+        .dialog-pause {
+            .slider-video {
+                opacity: 1 !important;
+            }
+        }
+    }
+    .media-delfile,
+    .media-delvideo {
+        color: red;
+        position: absolute;
+        opacity: 0;
+        right: -3px;
+        top: -3px;
+        background: #fff;
+        border-radius: 50%;
+        cursor: pointer;
+        transition: 0.3s opacity;
+        -webkit-transition: 0.3s opacity;
+    }
+    .media-delvideo {
+        top: -5px;
+        right: -5px;
     }
-}
 
-.dialog-playing {
-    margin: 0 auto;
-    width: 50px;
-    height: 50px;
-    cursor: pointer;
-    position: absolute;
+    .ks-stem__itemattrs {
+        border-radius: 4px;
+        position: relative;
+        .ks-stem__icon {
+            width: 77px;
+            height: 77px;
+            margin-bottom: 9px;
+            cursor: pointer;
+        }
+    }
+    .ks-stem__content {
+        width: 160px;
+        font-size: 12px;
+        text-align: center;
+        padding-top: 5px;
+        color: #000;
+    }
 
-    &:hover {
-        opacity: 0.7;
+    .ks-stem__videos {
+        border-radius: 4px;
+        position: relative;
+        .file__videos {
+            background: #000000;
+        }
     }
-    .icon-recording {
-        color: #fff;
-        font-size: 30px;
+
+    .dialog-playing {
+        margin: 0 auto;
+        width: 50px;
+        height: 50px;
+        cursor: pointer;
+        position: absolute;
+
+        &:hover {
+            opacity: 0.7;
+        }
+        .icon-recording {
+            color: #fff;
+            font-size: 30px !important;
+        }
     }
-}
 
-.slider-video {
-    opacity: 1;
-    transition: 0.3s opacity;
-    -webkit-transition: 0.3s opacity;
+    .slider-video {
+        opacity: 0;
+        transition: 0.3s opacity;
+        -webkit-transition: 0.3s opacity;
+    }
 }
 </style>

package/packages/index.js

@@ -87,8 +87,11 @@ import YksDialog from './Dialog'
 import YksMultimedia from './Multimedia'
 import YksTinymce from './Tinymce'
 import YksPagination from './Pagination'
-import YksScrollbar from './Select'
+import YksSelect from './Select'
+import YksScrollbar from './Scrollbar'
 import YksTable from './Table'
+import YksUploadfile from './UploadFile'
+import YksVideo from './Video'
 import YksOption from './option/index'
 
 import locale from 'element-ui/src/locale'
@@ -98,9 +101,12 @@ const components = [
     YksMultimedia,
     YksTinymce,
     YksPagination,
+    YksSelect,
     YksScrollbar,
     YksTable,
-    YksOption
+    YksUploadfile,
+    YksOption,
+    YksVideo
 ]
 const install = function (Vue, opts = {}) {
     locale.use(opts.locale)
@@ -130,7 +136,7 @@ if (typeof window !== 'undefined' && window.Vue) {
     install(window.Vue)
 }
 export default {
-    version: '1.0.314',
+    version: '1.0.315',
     locale: locale.use,
     i18n: locale.i18n,
     install,