@netang/quasar 0.2.40 → 0.2.42

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

@@ -99,6 +99,15 @@
                         @click="handleActions('clockwise')"
                     />
 
+                    <!-- 原图 -->
+                    <q-icon
+                        tag="a"
+                        :href="currentImg.origin"
+                        target="_blank"
+                        class="cursor-pointer non-selectable no-outline n-text-decoration-none"
+                        name="crop_original"
+                        color="white"
+                    />
                 </div>
             </div>
 
@@ -106,14 +115,14 @@
             <!-- 图片列表(有点击事件) -->
             <template v-if="isClickImg">
                 <div
-                    v-for="(src, i) in currentImages"
-                    :key="`${src}-${i}`"
+                    v-for="(item, i) in currentImages"
+                    :key="`${item.src}-${i}`"
                     class="non-selectable no-outline"
                     @click="onClickImg({ src })"
                 >
                     <img
                         :ref="(el) => (imgRefs[i] = el)"
-                        :src="src"
+                        :src="item.src"
                         :style="imgStyle"
                         @load="handleImgLoad"
                         @error="handleImgError"
@@ -124,15 +133,15 @@
             <!-- 图片列表(点击跳转原图) -->
             <template v-else>
                 <a
-                    v-for="(src, i) in currentImages"
-                    :key="`${src}-${i}`"
-                    :href="src"
+                    v-for="(item, i) in currentImages"
+                    :key="`${item.src}-${i}`"
+                    :href="item.src"
                     target="_blank"
                     class="non-selectable no-outline"
                 >
                     <img
                         :ref="(el) => (imgRefs[i] = el)"
-                        :src="src"
+                        :src="item.src"
                         :style="imgStyle"
                         @load="handleImgLoad"
                         @error="handleImgError"
@@ -311,11 +320,11 @@ export default {
             $n_forEach(props.images, function (url) {
                 const origin = $n_getImage(url, { compress: false })
                 if (origin) {
-                    lists.push($n_getImage(url, { w: 1000 }))
-                    // lists.push({
-                    //     src: $n_getImage(url, { w: 1000 }),
-                    //     origin,
-                    // })
+                    // lists.push($n_getImage(url, { w: 1000 }))
+                    lists.push({
+                        src: $n_getImage(url, { w: 1000 }),
+                        origin,
+                    })
                 }
             })
 

package/components/img/index.vue

@@ -128,6 +128,17 @@ export default {
         preview: Boolean,
         // 预览参数
         previewProps: Object,
+
+        // 真实宽度
+        // 用于 cdn 显示真实图片宽度
+        realWidth: Number,
+        // 图片参数
+        options: Object,
+        // cdn 自动缩放
+        zoom: {
+            type: Boolean,
+            default: true,
+        },
     },
 
     /**
@@ -141,8 +152,31 @@ export default {
          * 当前图片地址
          */
         const currentSrc = computed(function () {
-            const res = $n_getImage(props.src, { w: props.width, zoom: true })
-            return res ? res : ''
+
+            if (props.src) {
+
+                // 获取参数
+                const options = {}
+
+                // 宽度
+                if (props.width) {
+                    options.w = props.width
+                }
+
+                // 真实宽度
+                if (props.realWidth) {
+                    options.realWidth = props.realWidth
+                }
+
+                // 自动缩放
+                if (props.zoom) {
+                    options.zoom = true
+                }
+
+                return $n_getImage(props.src, Object.assign(options, props.options)) || ''
+            }
+
+            return ''
         })
 
         /**

package/package.json

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

package/sass/common.scss

@@ -54,6 +54,10 @@ body {
     overflow-y: auto !important;
 }
 
+.n-text-decoration-none {
+    text-decoration: none;
+}
+
 // 字体大小 12 像素
 .n-font-size-12 {
     font-size: 12px;

package/utils/getImage.js

@@ -13,6 +13,50 @@ import $n_uploader from './uploader'
 
 import useFileUrl from './useFileUrl'
 
+/**
+ * 像素转数字
+ */
+function px2Number(w) {
+
+    if ($n_isString(w)) {
+        w = w.replace('px', '')
+    }
+
+    if ($n_isNumeric(w)) {
+        w = Number(w)
+        if (w > 0) {
+            return w
+        }
+    }
+
+    return 0
+}
+
+/**
+ * 获取宽度
+ */
+function getW(options) {
+
+    // 如果有真实宽度
+    if (
+        $n_has(options, 'realWidth')
+        && $n_isNumeric(options.realWidth)
+    ) {
+        const realWidth = px2Number(options.realWidth)
+        return realWidth > 0 ? realWidth : 0
+    }
+
+    if (
+        $n_has(options, 'w')
+        && $n_isNumeric(options.w)
+    ) {
+        const w = px2Number(options.w)
+        return w > 0 ? w : 0
+    }
+
+    return null
+}
+
 /**
  * 获取图片
  */
@@ -72,55 +116,43 @@ export default function getImage(src, options) {
             // 如果为对象定义的规格
             if ($n_isValidObject(options)) {
 
-                // 如果有定义 w
-                if ($n_has(options, 'w')) {
+                // 获取宽度
+                let w = getW(options)
+                if (w) {
 
                     let {
-                        w,
                         maxWidth,
                         zoom,
                     } = options
 
-                    // 先设为最大宽度
-                    options.w = maxWidth || 0
+                    /* #if IS_WEB */
+                    // 如果开启缩放
+                    if (
+                        zoom
+                        // 获取设备像素比
+                        && window.devicePixelRatio >= 2
+                    ) {
+                        // w *= (devicePixelRatio > 3 ? 3 : devicePixelRatio)
+                        w *= 2
+                    }
+                    /* #endif */
 
-                    // 如果有宽度
-                    if (w) {
+                    w = Math.floor(w)
 
-                        if (
-                            ! $n_isNumeric(w)
-                            && $n_isString(w)
-                        ) {
-                            w = w.replace('px', '')
-                        }
-
-                        if ($n_isNumeric(w)) {
-                            w = Number(w)
-                            if (w > 0) {
-
-                                /* #if IS_WEB */
-                                // 如果开启缩放
-                                if (
-                                    zoom
-                                    // 获取设备像素比
-                                    && window.devicePixelRatio >= 2
-                                ) {
-                                    // w *= (devicePixelRatio > 3 ? 3 : devicePixelRatio)
-                                    w *= 2
-                                }
-                                /* #endif */
-
-                                w = Math.floor(w)
-
-                                // 如果有最大宽度
-                                if (maxWidth && w > maxWidth) {
-                                    w = maxWidth
-                                }
-
-                                options.w = w
-                            }
-                        }
+                    // 如果有最大宽度
+                    if (maxWidth && w > maxWidth) {
+                        w = maxWidth
                     }
+
+                    options.w = w
+
+                // 否则如果无宽度
+                } else if (w === 0) {
+                    options.w = 0
+
+                // 否则删除宽度
+                } else if ($n_has(options, 'w')) {
+                    delete options.w
                 }
 
             } else {
@@ -156,7 +188,7 @@ export default function getImage(src, options) {
                 // 模式
                 mode: '2',
                 // 宽
-                w: 0,
+                w: 800,
                 // 高
                 h: 0,
                 // 质量