@taole/dev-helper 0.0.1

package/Tdiv/index.svelte

@@ -0,0 +1,263 @@
+<script>
+    import { createEventDispatcher } from "svelte";
+
+    /**
+     * @type {string}
+     * 传入的class请务必放在global下
+     */
+    export let _class = "";
+
+    /**
+     * @type {boolean}
+     * 默认false， 传入true表示直接使用px单位，一般使用场景比如pc
+     */
+    export let usePx = false;
+
+    /**
+     * @type {string}
+     * 请不要传入数值相关的style, 因为这部分不会被转换成vw单位
+     */
+    export let style = "";
+
+    /**
+     * @type {string}
+     * 图片地址
+     * 传入完整url或者path，组件会自动拼上`https://dynamics-share.tuwan.com/${src}?x-oss-process=image/format,webp/ignore-error,1`
+     */
+    export let src = "";
+    /**
+     * @type {number|string}
+     * 宽度
+     */
+    export let width = null;
+    /**
+     * @type {number|string}
+     * 高度
+     */
+    export let height = null;
+    /**
+     * @type {boolean}
+     * 使用绝对布局， false则为相对布局
+     */
+    export let absolute = false;
+
+    /**
+     * @type {number|string}
+     * 绝对布局下为top，相对布局下为margin-top
+     */
+    export let top = null;
+    /**
+     * @type {number|string}
+     * 绝对布局下为left，相对布局下为margin-left
+     */
+    export let left = null;
+    /**
+     * @type {number|string}
+     * 绝对布局下为right，相对布局下为margin-right
+     */
+    export let right = null;
+    /**
+     * @type {number|string}
+     * 绝对布局下为bottom，相对布局下为margin-bottom
+     */
+    export let bottom = null;
+    /**
+     * @type {number}
+     * z-index层级
+     */
+    export let zIndex = null;
+    /**
+     * @type {boolean}
+     * cursor:pointer
+     */
+    export let pointer = null;
+    /**
+     * @type {boolean}
+     * 使用flex布局
+     */
+    export let flex = false;
+    /**
+     * @type {boolean}
+     * flex布局下，flex-direction:column
+     */
+    export let column = false;
+    /**
+     * @type {boolean}
+     * flex布局下，align-items:center;justify-content: center;
+     */
+    export let center = false;
+    /**
+     * @type {number|string}
+     * 内部文本的大小
+     */
+    export let text = null;
+    /**
+     * @type {string}
+     * 内部文本的颜色
+     */
+    export let color = "";
+    /**
+     * @type {'auto'|'fill'|'cover'}
+     * src传入时有效, 图片的填充模式: 默认auto
+     * - fill: 长款拉伸填充
+     * - auto: 自动填充(按照宽高比自动填充， 不重复不裁剪)
+     * - cover: 覆盖
+     */
+    export let srcMode = "auto";
+
+    /**
+     * @type {(e) => void}
+     * 点击事件监听
+     * - onClick 使用onClick将会自动设置cursor:pointer样式
+     * - on:click 不会
+     */
+    export let onClick = null;
+
+    /**
+     * @type {boolean}
+     * 打开后，属性变化的时候会打印最终的所有style
+     */
+    export let debug = false;
+
+    // 留个口子
+    export const viewportWidth = 750; // 默认值不改
+    export const viewportUnit = "vw"; // 默认值不改
+
+    const dispatch = createEventDispatcher();
+
+    /**
+     * 计算宽高
+     * @param value
+     * @returns {string}
+     */
+    function calc(value) {
+        // @ts-ignore
+        if (typeof value === "string" && !isNaN(value)) {
+            value = Number(value);
+        }
+        if (typeof value === "number") {
+            if (usePx) {
+                return value + "px";
+            }
+            let val = ((value / viewportWidth) * 100).toFixed(4); // 4?
+            return `${val}${viewportUnit}`;
+        }
+        return value;
+    }
+
+    function handleOnClick(e) {
+        if(typeof onClick === 'function'){
+            onClick(e);
+        }
+        dispatch("click", e);
+    }
+
+    function hasValue(value) {
+        return value !== null && value !== undefined && value !== "";
+    }
+
+    // 计算最终样式
+    $: styleStr = (function fmtStyle() {
+        let ret = "";
+        if (hasValue(width)) {
+            ret += `width: ${calc(width)};`;
+        }
+        if (hasValue(height)) {
+            ret += `height: ${calc(height)};`;
+        }
+        if (absolute) {
+            ret += `position: absolute;`;
+            if (hasValue(left)) {
+                ret += `left: ${calc(left)};`;
+            }
+            if (hasValue(top)) {
+                ret += `top: ${calc(top)};`;
+            }
+            if (hasValue(right)) {
+                ret += `right: ${calc(right)};`;
+            }
+            if (hasValue(bottom)) {
+                ret += `bottom: ${calc(bottom)};`;
+            }
+        } else {
+            ret += `position: relative;`;
+            if (hasValue(top)) {
+                ret += `margin-top: ${calc(top)};`;
+            }
+            if (hasValue(left)) {
+                ret += `margin-left: ${calc(left)};`;
+            }
+            if (hasValue(right)) {
+                ret += `margin-right: ${calc(right)};`;
+            }
+            if (hasValue(bottom)) {
+                ret += `margin-bottom: ${calc(bottom)};`;
+            }
+        }
+        if (hasValue(zIndex)) {
+            ret += `z-index: ${zIndex};`;
+        }
+        if (pointer === true) {
+            ret += `cursor: pointer;`;
+        } else if(typeof onClick === "function" && pointer === null){
+            ret += `cursor: pointer;`;
+        }
+        if (flex) {
+            ret += "display:flex;";
+            if (column) {
+                ret += "flex-direction: column;";
+            }
+            if (center) {
+                ret += "justify-content: center;";
+                ret += "align-items: center;";
+            }
+        } else {
+            if (center) {
+                ret += "text-align: center;";
+            }
+        }
+        if (text) {
+            ret += `font-size: ${calc(text)};`;
+        }
+        if (src) {
+            let realSrc = src;
+            if (src.indexOf("https://") === -1) {
+                realSrc = `https://dynamics-share.tuwan.com/${src}?x-oss-process=image/format,webp/ignore-error,1`;
+            }
+            ret += `background-image: url(${realSrc});`;
+            if (srcMode === "fill") {
+                ret += `background-size: 100% 100%;`;
+            } else if (srcMode === "cover") {
+                ret += `background-size: cover;`;
+            }
+        }
+        if (color) {
+            ret += `color: ${color};`;
+        }
+        if (style) {
+            ret += style;
+        }
+        if (debug) {
+            console.log("styleStr", ret);
+        }
+        return ret;
+    })();
+</script>
+
+<div
+    role="presentation"
+    on:click={handleOnClick}
+    class="tw-img-div {_class}"
+    style={styleStr}
+>
+    <slot />
+</div>
+
+<style scoped>
+    .tw-img-div {
+        background-position: top center;
+        background-repeat: no-repeat;
+        background-size: 100% auto;
+        flex: none;
+    }
+</style>

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@taole/dev-helper",
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files":[
+    "Tdiv"
+  ],
+  "author": "",
+  "license": "ISC",
+  "description": ""
+}