@taole/dev-helper 0.0.2 → 0.0.3

package/Tdiv/index.svelte

@@ -1,5 +1,6 @@
 <script>
     import { createEventDispatcher } from "svelte";
+    import setting from "./setting";
 
     /**
      * @type {string}
@@ -120,8 +121,8 @@
     export let debug = false;
 
     // 留个口子
-    export const viewportWidth = 750; // 默认值不改
-    export const viewportUnit = "vw"; // 默认值不改
+    export let viewportWidth;
+    export let viewportUnit;
 
     const dispatch = createEventDispatcher();
 
@@ -131,6 +132,14 @@
      * @returns {string}
      */
     function calc(value) {
+        let vWidth = setting.viewportWidth;
+        if(viewportWidth){
+            vWidth = viewportWidth;
+        }
+        let vUnit = setting.viewportUnit;
+        if(viewportUnit){
+            vUnit = viewportUnit;
+        }
         // @ts-ignore
         if (typeof value === "string" && !isNaN(value)) {
             value = Number(value);
@@ -139,8 +148,8 @@
             if (usePx) {
                 return value + "px";
             }
-            let val = ((value / viewportWidth) * 100).toFixed(4); // 4?
-            return `${val}${viewportUnit}`;
+            let val = ((value / vWidth) * 100).toFixed(4); // 4?
+            return `${val}${vUnit}`;
         }
         return value;
     }

package/Tdiv/index.vue

@@ -1,15 +1,12 @@
 <template>
-  <div
-    role="presentation"
-    :class="['tw-img-div', _class]"
-    :style="styleStr"
-    @click="handleOnClick"
-  >
+  <div role="presentation" :class="['tw-img-div', _class]" :style="styleStr" @click="handleOnClick">
     <slot />
   </div>
 </template>
 
 <script>
+import setting from "./setting";
+
 export default {
   name: 'Tdiv',
   props: {
@@ -34,17 +31,26 @@ export default {
     srcMode: { type: String, default: 'auto' },
     onClick: { type: Function, default: null },
     debug: { type: Boolean, default: false },
+    viewportWidth: { type: Number, default: null },
+    viewportUnit: { type: String, default: null },
   },
   computed: {
     styleStr() {
-      const viewportWidth = 750;
-      const viewportUnit = 'vw';
+      let vWidth = setting.viewportWidth;
+      if (this.viewportWidth) {
+        vWidth = this.viewportWidth;
+      }
+      let vUnit = setting.viewportUnit;
+      if (this.viewportUnit) {
+        vUnit = this.viewportUnit;
+      }
       const calc = (value) => {
+
         if (typeof value === 'string' && !isNaN(value)) value = Number(value);
         if (typeof value === 'number') {
           if (this.usePx) return value + 'px';
-          let val = ((value / viewportWidth) * 100).toFixed(4);
-          return `${val}${viewportUnit}`;
+          let val = ((value / vWidth) * 100).toFixed(4);
+          return `${val}${vUnit}`;
         }
         return value;
       };

package/Tdiv/setting.js

@@ -0,0 +1,14 @@
+const config = {
+    viewportWidth: 750,
+    viewportUnit: "vw",
+}
+
+export function setViewportWidth(width) {
+    config.viewportWidth = width;
+}
+
+export function setViewportUnit(unit) {
+    config.viewportUnit = unit;
+}
+
+export default config;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taole/dev-helper",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"