@netang/quasar 0.2.6 → 0.2.8

package/components/dialog/img-viewer/index.vue

@@ -102,23 +102,44 @@
                 </div>
             </div>
 
-            <!-- 图片列表 -->
-            <a
-                v-for="(src, i) in currentImages"
-                :key="`${src}-${i}`"
-                :href="src"
-                target="_blank"
-                class="non-selectable no-outline"
-            >
-                <img
-                    :ref="(el) => (imgRefs[i] = el)"
-                    :src="src"
-                    :style="imgStyle"
-                    @load="handleImgLoad"
-                    @error="handleImgError"
-                    v-show="i === activeIndex"
-                />
-            </a>
+
+            <!-- 图片列表(有点击事件) -->
+            <template v-if="isClickImg">
+                <div
+                    v-for="(src, i) in currentImages"
+                    :key="`${src}-${i}`"
+                    class="non-selectable no-outline"
+                    @click="onClickImg({ src })"
+                >
+                    <img
+                        :ref="(el) => (imgRefs[i] = el)"
+                        :src="src"
+                        :style="imgStyle"
+                        @load="handleImgLoad"
+                        @error="handleImgError"
+                        v-show="i === activeIndex"
+                    />
+                </div>
+            </template>
+            <!-- 图片列表(点击跳转原图) -->
+            <template v-else>
+                <a
+                    v-for="(src, i) in currentImages"
+                    :key="`${src}-${i}`"
+                    :href="src"
+                    target="_blank"
+                    class="non-selectable no-outline"
+                >
+                    <img
+                        :ref="(el) => (imgRefs[i] = el)"
+                        :src="src"
+                        :style="imgStyle"
+                        @load="handleImgLoad"
+                        @error="handleImgError"
+                        v-show="i === activeIndex"
+                    />
+                </a>
+            </template>
 
         </div>
     </q-dialog>
@@ -128,10 +149,15 @@
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { useDialogPluginComponent } from 'quasar'
 
+import $n_get from 'lodash/get'
+
 import $n_forEach from '@netang/utils/forEach'
+import $n_run from '@netang/utils/run'
 
 import $n_getImage from '../../../utils/getImage'
 
+import { configs } from '../../../utils/config'
+
 export default {
 
     /**
@@ -259,6 +285,9 @@ export default {
         // 模式
         const isContain = ref(true)
 
+        // 图片是否可点击
+        const isClickImg = ref($n_get(configs, 'components.imgViewer.isClickImg') === true)
+
         // 转换效果
         const transform = ref({
             scale: 1,
@@ -519,6 +548,13 @@ export default {
             }
         }
 
+        /**
+         * 点击图片
+         */
+        function onClickImg(e) {
+            $n_run($n_get(configs, 'components.imgViewer.onClickImg'))(e)
+        }
+
         // ==========【声明周期】=========================================================================================
 
         /**
@@ -551,6 +587,8 @@ export default {
             isContain,
             // 转换效果
             transform,
+            // 图片是否可点击
+            isClickImg,
 
             // 当前图片数组
             currentImages,
@@ -583,6 +621,8 @@ export default {
             handleActions,
             // 点击遮蔽
             onMask,
+            // 点击图片
+            onClickImg,
         }
     }
 }

package/components/img/index.vue

@@ -21,7 +21,6 @@
                         :name="errorIcon"
                     />
                 </div>
-
                 <!-- 默认插槽 -->
                 <slot />
             </slot>
@@ -58,7 +57,6 @@
                         :name="errorIcon"
                     />
                 </div>
-
                 <!-- 默认插槽 -->
                 <slot />
             </slot>

package/components/uploader/index.vue

@@ -39,6 +39,8 @@ export default {
     props: {
         // 值
         modelValue: [String, Array],
+        // 上传器类型
+        uploaderType: String,
         // 上传文件类型, 可选值 file image video audio
         type: {
             type: String,
@@ -99,6 +101,9 @@ export default {
 
         // 创建上传器
         const uploader = $n_uploader.create({
+            // 上传器类型
+            uploaderType: props.uploaderType,
+            // 上传文件类型, 可选值 file image video audio
             type: props.type,
             // 声明属性
             props,

package/components/uploader-query/index.vue

@@ -315,6 +315,21 @@
                         />
 
                         <!-- 播放图标 -->
+                        <n-thumbnail
+                            class="rounded-borders cursor-pointer"
+                            :src="fileItem.json.p"
+                            :size="currentSize / 1.5"
+                            title="播放"
+                            @click.prevent.stop="uploader.play(fileItem)"
+                            v-else-if="fileItem.json.p"
+                        >
+                            <div class="absolute-full no-padding row items-center justify-center">
+                                <q-icon
+                                    name="play_circle"
+                                    :size="toPx(currentSize / 3)"
+                                />
+                            </div>
+                        </n-thumbnail>
                         <q-icon
                             class="n-uploader-query__item__icon__icon cursor-pointer"
                             name="play_circle"
@@ -431,13 +446,14 @@ import $n_getImage from '../../utils/getImage'
 import $n_previewImage from '../../utils/previewImage'
 
 import NDragger from '../dragger'
+import NThumbnail from '../thumbnail'
 
 import { NUploaderKey } from '../../utils/symbols'
 
 import {
     // 上传状态
     UPLOAD_STATUS,
-} from '../../utils/useUploader'
+} from '../../utils/uploader'
 
 export default {
 
@@ -451,6 +467,7 @@ export default {
      */
     components: {
         NDragger,
+        NThumbnail,
     },
 
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netang/quasar",
-  "version": "0.2.6",
+  "version": "0.2.8",
 
   "description": "netang-quasar",
   "scripts": {

package/utils/config.js

@@ -1,4 +1,5 @@
 import $n_get from 'lodash/get'
+import $n_merge from 'lodash/merge'
 
 // 用户配置 参数
 // userConfig: {
@@ -26,14 +27,21 @@ export const configs = {
     routers: {},
     // 表格配置
     tablesConfig: {},
+    // 组件配置
+    components: {},
     // 对话框组件
     dialogComponents: {},
-    // 格式化上传文件 hash
-    formatUploadFileHash: null,
-    // 格式化上传网络链接
-    formatUploadNet: null,
-    // 获取文件地址
-    getFileUrl: null,
+    // 上传器配置
+    uploader: {
+        // 如果是 Minio 上传, 则在后面加上下划线
+        hasMinioSuffix: true,
+        // 格式化上传文件 hash
+        formatUploadFileHash: null,
+        // 格式化上传网络链接
+        formatUploadNet: null,
+        // 获取文件地址
+        getFileUrl: null,
+    },
 }
 
 /**
@@ -41,7 +49,7 @@ export const configs = {
  * @param options
  */
 export function settings(options) {
-    Object.assign(configs, options)
+    $n_merge(configs, options)
 }
 
 /**

package/utils/getFile.js

@@ -50,11 +50,16 @@ export default function getFile(src) {
             }
 
             const {
-                // type,
+                type,
                 domain,
-            } = $n_uploader.getUpload()
-
-            return useFileUrl(domain, src)
+            } = $n_uploader.getUpload(
+                null,
+                src && src.slice(-1) === '_'
+                    ? 'minio'
+                    : ''
+            )
+
+            return useFileUrl({ type, domain, src })
         }
     }
 

package/utils/getImage.js

@@ -130,7 +130,16 @@ export default function getImage(src, options) {
             const {
                 type,
                 domain,
-            } = $n_uploader.getUpload(null, $n_get(options, 'upload', ''))
+            } = $n_uploader.getUpload(
+                null,
+                $n_has(options, 'upload')
+                    ? options.upload
+                    : (
+                        src && src.slice(-1) === '_'
+                            ? 'minio'
+                            : ''
+                    )
+            )
 
             // 判断图片上传方式
             switch (type) {
@@ -219,7 +228,7 @@ export default function getImage(src, options) {
             // #endif
             // --------------------------------------------------
 
-            return useFileUrl(domain, src)
+            return useFileUrl({ type, domain, src })
         }
     }
 

package/utils/index.js

@@ -24,6 +24,7 @@ import getImage from './getImage'
 import getTime from './getTime'
 import loading from './loading'
 import notify from './notify'
+import play from './play'
 import previewImage from './previewImage'
 import price from './price'
 import timestamp from './timestamp'
@@ -57,6 +58,7 @@ export default {
     getTime,
     loading,
     notify,
+    play,
     previewImage,
     price,
     timestamp,

package/utils/play.js

@@ -0,0 +1,40 @@
+import { Platform, Screen, Dialog } from 'quasar'
+
+import $n_getFile from './getFile'
+
+/**
+ * 播放视频 / 音频
+ */
+export default function play(hash) {
+
+    const src = $n_getFile(hash)
+
+    let width
+    let height
+    let fullWidth = false
+    let fullHeight = false
+    let ok = true
+    let style = ''
+
+    if (Platform.is.mobile) {
+        width = Screen.width - 48 - 32
+        height = Screen.height - 48 - 32 - 6 - 52
+        fullWidth = true
+        fullHeight = true
+    } else {
+        width = 800 - 32
+        height = 400 - 32 - 6
+        ok = false
+        style = 'width:800px;max-width:800px;height:400px;max-height:400px;'
+    }
+
+    Dialog.create({
+        message: `<video style="width:${width}px;height:${height}px;" playsinline autoplay controls src="${src}" type="video/mp4" muted="muted"></video>`,
+        style,
+        html: true,
+        dark: true,
+        ok,
+        fullWidth,
+        fullHeight,
+    })
+}