@taole/dev-helper 0.0.11 → 0.0.12

package/Tdiv/index.js

@@ -1,233 +1,233 @@
-import setting from "./setting.js";
-import { updateConfig, setViewportWidth, setViewportUnit, setUsePx, setUseButtonEffect, subscribe } from "./setting.js";
-
-const styleText = `
-.tw-img-div {
-    display: block;
-    background-position: top center;
-    background-repeat: no-repeat;
-    background-size: 100% auto;
-    flex: none;
-}
-.click-effect:active {
-    opacity: 0.85;
-    transform: translateY(1px);
-}`;
-
-function hasValue(value) {
-    return value !== null && value !== undefined && value !== '';
-}
-
-function calc(value, { usePx, viewportWidth, viewportUnit }) {
-    let vWidth = setting.viewportWidth;
-    if (viewportWidth) vWidth = viewportWidth;
-    let vUnit = setting.viewportUnit;
-    if (viewportUnit) vUnit = viewportUnit;
-    let localUsePx = setting.usePx;
-    if (typeof usePx === 'boolean') localUsePx = usePx;
-
-    // console.log("setting", setting, localUsePx);
-
-    if (typeof value === 'string' && !isNaN(value)) value = Number(value);
-    if (typeof value === 'number') {
-        if (localUsePx) return value + 'px';
-        let val = ((value / vWidth) * 100).toFixed(4);
-        return `${val}${vUnit}`;
-    }
-    return value;
-}
-
-class Tdiv extends HTMLElement {
-    static get observedAttributes() {
-        return [
-            '_class', 'usePx', '_style', 'src', 'width', 'height', 'absolute',
-            'top', 'left', 'right', 'bottom', 'zIndex', 'pointer', 'flex', 'column', 'center',
-            'text', 'color','radius','border','borderColor', 'srcMode', 'onClick', 'debug', 'viewportWidth', 'viewportUnit'
-        ];
-    }
-
-    constructor() {
-        super();
-        this._onClickHandler = this._onClickHandler.bind(this);
-        this._connected = false;
-        this._iscalcstyle = false;
-        this._unsubscribe = null;
-    }
-
-    connectedCallback() {
-        this._connected = true;
-        this._upgradeProperties();
-        this._update();
-        this.addEventListener('click', this._onClickHandler);
-        this._unsubscribe = subscribe(this._update.bind(this));
-    }
-
-    disconnectedCallback() {
-        this._connected = false;
-        this.removeEventListener('click', this._onClickHandler);
-        if (this._unsubscribe) {
-            this._unsubscribe();
-            this._unsubscribe = null;
-        }
-    }
-
-    attributeChangedCallback() {
-        if (!this._connected) return;
-        this._update();
-    }
-
-    _upgradeProperties() {
-        // For properties set before upgrade
-        Tdiv.observedAttributes.forEach(attr => {
-            if (this.hasOwnProperty(attr)) {
-                let value = this[attr];
-                delete this[attr];
-                this[attr] = value;
-            }
-        });
-    }
-
-    _getAttr(name, type = 'string') {
-        if (!this.hasAttribute(name)) return null;
-        let val = this.getAttribute(name);
-        if (type === 'boolean') return val === '' || val === 'true';
-        if (type === 'number') return Number(val);
-        return val;
-    }
-
-    _update() {
-        if (this._iscalcstyle) return;
-        this._iscalcstyle = true;
-        // console.log('update');
-        // 读取所有属性
-        const _class = this._getAttr('_class') || '';
-        const usePx = this._getAttr('usePx', 'boolean');
-        const styleAttr = this._getAttr('_style') || '';
-        const src = this._getAttr('src') || '';
-        const width = this._getAttr('width');
-        const height = this._getAttr('height');
-        const absolute = this._getAttr('absolute', 'boolean');
-        const top = this._getAttr('top');
-        const left = this._getAttr('left');
-        const right = this._getAttr('right');
-        const bottom = this._getAttr('bottom');
-        const zIndex = this._getAttr('zIndex');
-        const pointer = this._getAttr('pointer', 'boolean');
-        const flex = this._getAttr('flex', 'boolean');
-        const column = this._getAttr('column', 'boolean');
-        const center = this._getAttr('center', 'boolean');
-        const text = this._getAttr('text');
-        const color = this._getAttr('color');
-        const radius = this._getAttr('radius');
-        const border = this._getAttr('border');
-        const borderColor = this._getAttr('borderColor');
-        const srcMode = this._getAttr('srcMode') || 'auto';
-        const debug = this._getAttr('debug', 'boolean');
-        const viewportWidth = this._getAttr('viewportWidth', 'number');
-        const viewportUnit = this._getAttr('viewportUnit');
-        // class
-        let extraClass = ['tw-img-div'];
-        if (_class) extraClass.push(_class);
-        if (setting.useButtonEffect && this._getAttr('onClick')) extraClass.push('click-effect');
-        // 分组样式
-        const calcOpt = { usePx, viewportWidth, viewportUnit };
-        let layoutStyle = '';
-        // 宽度
-        if (hasValue(width)) {
-            const widthStyle = `width: ${calc(width, calcOpt)};`;
-            layoutStyle += widthStyle;
-        }
-        if (hasValue(height)) {
-            const heightStyle = `height: ${calc(height, calcOpt)};`;
-            layoutStyle += heightStyle;
-        }
-        if (absolute) {
-            layoutStyle += 'position: absolute;';
-            if (hasValue(left)) layoutStyle += `left: ${calc(left, calcOpt)};`;
-            if (hasValue(top)) layoutStyle += `top: ${calc(top, calcOpt)};`;
-            if (hasValue(right)) layoutStyle += `right: ${calc(right, calcOpt)};`;
-            if (hasValue(bottom)) layoutStyle += `bottom: ${calc(bottom, calcOpt)};`;
-        } else {
-            layoutStyle += 'position: relative;';
-            if (hasValue(top)) layoutStyle += `margin-top: ${calc(top, calcOpt)};`;
-            if (hasValue(left)) layoutStyle += `margin-left: ${calc(left, calcOpt)};`;
-            if (hasValue(right)) layoutStyle += `margin-right: ${calc(right, calcOpt)};`;
-            if (hasValue(bottom)) layoutStyle += `margin-bottom: ${calc(bottom, calcOpt)};`;
-        }
-        if (hasValue(radius)) layoutStyle += `border-radius: ${calc(radius, calcOpt)};`;
-        if (hasValue(border)) {
-            layoutStyle += `border: ${calc(border, calcOpt)} solid ${borderColor || "#000"};`;
-        } else if (hasValue(borderColor)) {
-            layoutStyle += `border-color: ${borderColor};`;
-        }
-        if (hasValue(zIndex)) layoutStyle += `z-index: ${zIndex};`;
-        if (pointer === true) {
-            layoutStyle += 'cursor: pointer;';
-        } else if (this._getAttr('onClick') && pointer === false) {
-            layoutStyle += 'cursor: pointer;';
-        }
-        if (flex) {
-            layoutStyle += 'display:flex;';
-            if (column) layoutStyle += 'flex-direction: column;';
-            if (center) {
-                layoutStyle += 'justify-content: center;';
-                layoutStyle += 'align-items: center;';
-            }
-        } else {
-            if (center) layoutStyle += 'text-align: center;';
-        }
-
-        if (text) layoutStyle += `font-size: ${calc(text, calcOpt)};`;
-        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`;
-            }
-            layoutStyle += `background-image: url(${realSrc});`;
-
-
-            if (srcMode === 'fill') {
-                layoutStyle += 'background-size: 100% 100%;';
-            } else if (srcMode === 'cover') {
-                layoutStyle += 'background-size: cover;';
-            }
-        }
-        if (color) layoutStyle += `color: ${color};`;
-        if (styleAttr) layoutStyle += styleAttr;
-        if (debug) {
-            console.log('layoutStyle', layoutStyle);
-        }
-        const currentList = Array.from(this.classList);
-        const classNeeded = extraClass.filter(item => !currentList.includes(item));
-        this.classList.add(...classNeeded);
-        this.style.cssText = layoutStyle;
-        this._iscalcstyle = false;
-    }
-
-    _onClickHandler(e) {
-        // 支持onClick属性（字符串，window作用域下查找）
-        const onClickAttr = this._getAttr('onClick');
-        if (onClickAttr && typeof window[onClickAttr] === 'function') {
-            window[onClickAttr](e);
-        }
-    }
-}
-
-
-let isRegister = false;
-function registerTdiv() {
-    if (!isRegister) {
-        customElements.define('t-div', Tdiv);
-        // append style for t-div
-        const style = document.createElement('style');
-        style.textContent = styleText;
-        document.head.appendChild(style);
-        isRegister = true;
-    }
-}
-
-registerTdiv();
-
-export default {
-    updateConfig, setViewportWidth, setViewportUnit, setUsePx, setUseButtonEffect
+import setting from "./setting.js";
+import { updateConfig, setViewportWidth, setViewportUnit, setUsePx, setUseButtonEffect, subscribe } from "./setting.js";
+
+const styleText = `
+.tw-img-div {
+    display: block;
+    background-position: top center;
+    background-repeat: no-repeat;
+    background-size: 100% auto;
+    flex: none;
+}
+.click-effect:active {
+    opacity: 0.85;
+    transform: translateY(1px);
+}`;
+
+function hasValue(value) {
+    return value !== null && value !== undefined && value !== '';
+}
+
+function calc(value, { usePx, viewportWidth, viewportUnit }) {
+    let vWidth = setting.viewportWidth;
+    if (viewportWidth) vWidth = viewportWidth;
+    let vUnit = setting.viewportUnit;
+    if (viewportUnit) vUnit = viewportUnit;
+    let localUsePx = setting.usePx;
+    if (typeof usePx === 'boolean') localUsePx = usePx;
+
+    // console.log("setting", setting, localUsePx);
+
+    if (typeof value === 'string' && !isNaN(value)) value = Number(value);
+    if (typeof value === 'number') {
+        if (localUsePx) return value + 'px';
+        let val = ((value / vWidth) * 100).toFixed(4);
+        return `${val}${vUnit}`;
+    }
+    return value;
+}
+
+class Tdiv extends HTMLElement {
+    static get observedAttributes() {
+        return [
+            '_class', 'usePx', '_style', 'src', 'width', 'height', 'absolute',
+            'top', 'left', 'right', 'bottom', 'zIndex', 'pointer', 'flex', 'column', 'center',
+            'text', 'color','radius','border','borderColor', 'srcMode', 'onClick', 'debug', 'viewportWidth', 'viewportUnit'
+        ];
+    }
+
+    constructor() {
+        super();
+        this._onClickHandler = this._onClickHandler.bind(this);
+        this._connected = false;
+        this._iscalcstyle = false;
+        this._unsubscribe = null;
+    }
+
+    connectedCallback() {
+        this._connected = true;
+        this._upgradeProperties();
+        this._update();
+        this.addEventListener('click', this._onClickHandler);
+        this._unsubscribe = subscribe(this._update.bind(this));
+    }
+
+    disconnectedCallback() {
+        this._connected = false;
+        this.removeEventListener('click', this._onClickHandler);
+        if (this._unsubscribe) {
+            this._unsubscribe();
+            this._unsubscribe = null;
+        }
+    }
+
+    attributeChangedCallback() {
+        if (!this._connected) return;
+        this._update();
+    }
+
+    _upgradeProperties() {
+        // For properties set before upgrade
+        Tdiv.observedAttributes.forEach(attr => {
+            if (this.hasOwnProperty(attr)) {
+                let value = this[attr];
+                delete this[attr];
+                this[attr] = value;
+            }
+        });
+    }
+
+    _getAttr(name, type = 'string') {
+        if (!this.hasAttribute(name)) return null;
+        let val = this.getAttribute(name);
+        if (type === 'boolean') return val === '' || val === 'true';
+        if (type === 'number') return Number(val);
+        return val;
+    }
+
+    _update() {
+        if (this._iscalcstyle) return;
+        this._iscalcstyle = true;
+        // console.log('update');
+        // 读取所有属性
+        const _class = this._getAttr('_class') || '';
+        const usePx = this._getAttr('usePx', 'boolean');
+        const styleAttr = this._getAttr('_style') || '';
+        const src = this._getAttr('src') || '';
+        const width = this._getAttr('width');
+        const height = this._getAttr('height');
+        const absolute = this._getAttr('absolute', 'boolean');
+        const top = this._getAttr('top');
+        const left = this._getAttr('left');
+        const right = this._getAttr('right');
+        const bottom = this._getAttr('bottom');
+        const zIndex = this._getAttr('zIndex');
+        const pointer = this._getAttr('pointer', 'boolean');
+        const flex = this._getAttr('flex', 'boolean');
+        const column = this._getAttr('column', 'boolean');
+        const center = this._getAttr('center', 'boolean');
+        const text = this._getAttr('text');
+        const color = this._getAttr('color');
+        const radius = this._getAttr('radius');
+        const border = this._getAttr('border');
+        const borderColor = this._getAttr('borderColor');
+        const srcMode = this._getAttr('srcMode') || 'auto';
+        const debug = this._getAttr('debug', 'boolean');
+        const viewportWidth = this._getAttr('viewportWidth', 'number');
+        const viewportUnit = this._getAttr('viewportUnit');
+        // class
+        let extraClass = ['tw-img-div'];
+        if (_class) extraClass.push(_class);
+        if (setting.useButtonEffect && this._getAttr('onClick')) extraClass.push('click-effect');
+        // 分组样式
+        const calcOpt = { usePx, viewportWidth, viewportUnit };
+        let layoutStyle = '';
+        // 宽度
+        if (hasValue(width)) {
+            const widthStyle = `width: ${calc(width, calcOpt)};`;
+            layoutStyle += widthStyle;
+        }
+        if (hasValue(height)) {
+            const heightStyle = `height: ${calc(height, calcOpt)};`;
+            layoutStyle += heightStyle;
+        }
+        if (absolute) {
+            layoutStyle += 'position: absolute;';
+            if (hasValue(left)) layoutStyle += `left: ${calc(left, calcOpt)};`;
+            if (hasValue(top)) layoutStyle += `top: ${calc(top, calcOpt)};`;
+            if (hasValue(right)) layoutStyle += `right: ${calc(right, calcOpt)};`;
+            if (hasValue(bottom)) layoutStyle += `bottom: ${calc(bottom, calcOpt)};`;
+        } else {
+            layoutStyle += 'position: relative;';
+            if (hasValue(top)) layoutStyle += `margin-top: ${calc(top, calcOpt)};`;
+            if (hasValue(left)) layoutStyle += `margin-left: ${calc(left, calcOpt)};`;
+            if (hasValue(right)) layoutStyle += `margin-right: ${calc(right, calcOpt)};`;
+            if (hasValue(bottom)) layoutStyle += `margin-bottom: ${calc(bottom, calcOpt)};`;
+        }
+        if (hasValue(radius)) layoutStyle += `border-radius: ${calc(radius, calcOpt)};`;
+        if (hasValue(border)) {
+            layoutStyle += `border: ${calc(border, calcOpt)} solid ${borderColor || "#000"};`;
+        } else if (hasValue(borderColor)) {
+            layoutStyle += `border-color: ${borderColor};`;
+        }
+        if (hasValue(zIndex)) layoutStyle += `z-index: ${zIndex};`;
+        if (pointer === true) {
+            layoutStyle += 'cursor: pointer;';
+        } else if (this._getAttr('onClick') && pointer === false) {
+            layoutStyle += 'cursor: pointer;';
+        }
+        if (flex) {
+            layoutStyle += 'display:flex;';
+            if (column) layoutStyle += 'flex-direction: column;';
+            if (center) {
+                layoutStyle += 'justify-content: center;';
+                layoutStyle += 'align-items: center;';
+            }
+        } else {
+            if (center) layoutStyle += 'text-align: center;';
+        }
+
+        if (text) layoutStyle += `font-size: ${calc(text, calcOpt)};`;
+        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`;
+            }
+            layoutStyle += `background-image: url(${realSrc});`;
+
+
+            if (srcMode === 'fill') {
+                layoutStyle += 'background-size: 100% 100%;';
+            } else if (srcMode === 'cover') {
+                layoutStyle += 'background-size: cover;';
+            }
+        }
+        if (color) layoutStyle += `color: ${color};`;
+        if (styleAttr) layoutStyle += styleAttr;
+        if (debug) {
+            console.log('layoutStyle', layoutStyle);
+        }
+        const currentList = Array.from(this.classList);
+        const classNeeded = extraClass.filter(item => !currentList.includes(item));
+        this.classList.add(...classNeeded);
+        this.style.cssText = layoutStyle;
+        this._iscalcstyle = false;
+    }
+
+    _onClickHandler(e) {
+        // 支持onClick属性（字符串，window作用域下查找）
+        const onClickAttr = this._getAttr('onClick');
+        if (onClickAttr && typeof window[onClickAttr] === 'function') {
+            window[onClickAttr](e);
+        }
+    }
+}
+
+
+let isRegister = false;
+function registerTdiv() {
+    if (!isRegister) {
+        customElements.define('t-div', Tdiv);
+        // append style for t-div
+        const style = document.createElement('style');
+        style.textContent = styleText;
+        document.head.appendChild(style);
+        isRegister = true;
+    }
+}
+
+registerTdiv();
+
+export default {
+    updateConfig, setViewportWidth, setViewportUnit, setUsePx, setUseButtonEffect
 }

package/dist/tdiv.umd.js

@@ -85,226 +85,235 @@
         notify();
     }
 
-    const styleText = `
-.tw-img-div {
-    display: block;
-    background-position: top center;
-    background-repeat: no-repeat;
-    background-size: 100% auto;
-    flex: none;
-}
-.click-effect:active {
-    opacity: 0.85;
-    transform: translateY(1px);
-}`;
-
-    function hasValue(value) {
-        return value !== null && value !== undefined && value !== '';
-    }
-
-    function calc(value, { usePx, viewportWidth, viewportUnit }) {
-        let vWidth = config.viewportWidth;
-        if (viewportWidth) vWidth = viewportWidth;
-        let vUnit = config.viewportUnit;
-        if (viewportUnit) vUnit = viewportUnit;
-        let localUsePx = config.usePx;
-        if (typeof usePx === 'boolean') localUsePx = usePx;
-
-        // console.log("setting", setting, localUsePx);
-
-        if (typeof value === 'string' && !isNaN(value)) value = Number(value);
-        if (typeof value === 'number') {
-            if (localUsePx) return value + 'px';
-            let val = ((value / vWidth) * 100).toFixed(4);
-            return `${val}${vUnit}`;
-        }
-        return value;
-    }
-
-    class Tdiv extends HTMLElement {
-        static get observedAttributes() {
-            return [
-                '_class', 'usePx', '_style', 'src', 'width', 'height', 'absolute',
-                'top', 'left', 'right', 'bottom', 'zIndex', 'pointer', 'flex', 'column', 'center',
-                'text', 'color', 'srcMode', 'onClick', 'debug', 'viewportWidth', 'viewportUnit'
-            ];
-        }
-
-        constructor() {
-            super();
-            this._onClickHandler = this._onClickHandler.bind(this);
-            this._connected = false;
-            this._iscalcstyle = false;
-            this._unsubscribe = null;
-        }
-
-        connectedCallback() {
-            this._connected = true;
-            this._upgradeProperties();
-            this._update();
-            this.addEventListener('click', this._onClickHandler);
-            this._unsubscribe = subscribe(this._update.bind(this));
-        }
-
-        disconnectedCallback() {
-            this._connected = false;
-            this.removeEventListener('click', this._onClickHandler);
-            if (this._unsubscribe) {
-                this._unsubscribe();
-                this._unsubscribe = null;
-            }
-        }
-
-        attributeChangedCallback() {
-            if (!this._connected) return;
-            this._update();
-        }
-
-        _upgradeProperties() {
-            // For properties set before upgrade
-            Tdiv.observedAttributes.forEach(attr => {
-                if (this.hasOwnProperty(attr)) {
-                    let value = this[attr];
-                    delete this[attr];
-                    this[attr] = value;
-                }
-            });
-        }
-
-        _getAttr(name, type = 'string') {
-            if (!this.hasAttribute(name)) return null;
-            let val = this.getAttribute(name);
-            if (type === 'boolean') return val === '' || val === 'true';
-            if (type === 'number') return Number(val);
-            return val;
-        }
-
-        _update() {
-            if (this._iscalcstyle) return;
-            this._iscalcstyle = true;
-            // console.log('update');
-            // 读取所有属性
-            const _class = this._getAttr('_class') || '';
-            const usePx = this._getAttr('usePx', 'boolean');
-            const styleAttr = this._getAttr('_style') || '';
-            const src = this._getAttr('src') || '';
-            const width = this._getAttr('width');
-            const height = this._getAttr('height');
-            const absolute = this._getAttr('absolute', 'boolean');
-            const top = this._getAttr('top');
-            const left = this._getAttr('left');
-            const right = this._getAttr('right');
-            const bottom = this._getAttr('bottom');
-            const zIndex = this._getAttr('zIndex');
-            const pointer = this._getAttr('pointer', 'boolean');
-            const flex = this._getAttr('flex', 'boolean');
-            const column = this._getAttr('column', 'boolean');
-            const center = this._getAttr('center', 'boolean');
-            const text = this._getAttr('text');
-            const color = this._getAttr('color');
-            const srcMode = this._getAttr('srcMode') || 'auto';
-            const debug = this._getAttr('debug', 'boolean');
-            const viewportWidth = this._getAttr('viewportWidth', 'number');
-            const viewportUnit = this._getAttr('viewportUnit');
-            // class
-            let extraClass = ['tw-img-div'];
-            if (_class) extraClass.push(_class);
-            if (config.useButtonEffect && this._getAttr('onClick')) extraClass.push('click-effect');
-            // 分组样式
-            const calcOpt = { usePx, viewportWidth, viewportUnit };
-            let layoutStyle = '';
-            // 宽度
-            if (hasValue(width)) {
-                const widthStyle = `width: ${calc(width, calcOpt)};`;
-                layoutStyle += widthStyle;
-            }
-            if (hasValue(height)) {
-                const heightStyle = `height: ${calc(height, calcOpt)};`;
-                layoutStyle += heightStyle;
-            }
-            if (absolute) {
-                layoutStyle += 'position: absolute;';
-                if (hasValue(left)) layoutStyle += `left: ${calc(left, calcOpt)};`;
-                if (hasValue(top)) layoutStyle += `top: ${calc(top, calcOpt)};`;
-                if (hasValue(right)) layoutStyle += `right: ${calc(right, calcOpt)};`;
-                if (hasValue(bottom)) layoutStyle += `bottom: ${calc(bottom, calcOpt)};`;
-            } else {
-                layoutStyle += 'position: relative;';
-                if (hasValue(top)) layoutStyle += `margin-top: ${calc(top, calcOpt)};`;
-                if (hasValue(left)) layoutStyle += `margin-left: ${calc(left, calcOpt)};`;
-                if (hasValue(right)) layoutStyle += `margin-right: ${calc(right, calcOpt)};`;
-                if (hasValue(bottom)) layoutStyle += `margin-bottom: ${calc(bottom, calcOpt)};`;
-            }
-            if (hasValue(zIndex)) layoutStyle += `z-index: ${zIndex};`;
-            if (pointer === true) {
-                layoutStyle += 'cursor: pointer;';
-            } else if (this._getAttr('onClick') && pointer === false) {
-                layoutStyle += 'cursor: pointer;';
-            }
-            if (flex) {
-                layoutStyle += 'display:flex;';
-                if (column) layoutStyle += 'flex-direction: column;';
-                if (center) {
-                    layoutStyle += 'justify-content: center;';
-                    layoutStyle += 'align-items: center;';
-                }
-            } else {
-                if (center) layoutStyle += 'text-align: center;';
-            }
-
-            if (text) layoutStyle += `font-size: ${calc(text, calcOpt)};`;
-            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`;
-                }
-                layoutStyle += `background-image: url(${realSrc});`;
-
-
-                if (srcMode === 'fill') {
-                    layoutStyle += 'background-size: 100% 100%;';
-                } else if (srcMode === 'cover') {
-                    layoutStyle += 'background-size: cover;';
-                }
-            }
-            if (color) layoutStyle += `color: ${color};`;
-            if (styleAttr) layoutStyle += styleAttr;
-            if (debug) {
-                console.log('layoutStyle', layoutStyle);
-            }
-            const currentList = Array.from(this.classList);
-            const classNeeded = extraClass.filter(item => !currentList.includes(item));
-            this.classList.add(...classNeeded);
-            this.style.cssText = layoutStyle;
-            this._iscalcstyle = false;
-        }
-
-        _onClickHandler(e) {
-            // 支持onClick属性（字符串，window作用域下查找）
-            const onClickAttr = this._getAttr('onClick');
-            if (onClickAttr && typeof window[onClickAttr] === 'function') {
-                window[onClickAttr](e);
-            }
-        }
-    }
-
-
-    let isRegister = false;
-    function registerTdiv() {
-        if (!isRegister) {
-            customElements.define('t-div', Tdiv);
-            // append style for t-div
-            const style = document.createElement('style');
-            style.textContent = styleText;
-            document.head.appendChild(style);
-            isRegister = true;
-        }
-    }
-
-    registerTdiv();
-
-    var index = {
-        updateConfig, setViewportWidth, setViewportUnit, setUsePx, setUseButtonEffect
+    const styleText = `
+.tw-img-div {
+    display: block;
+    background-position: top center;
+    background-repeat: no-repeat;
+    background-size: 100% auto;
+    flex: none;
+}
+.click-effect:active {
+    opacity: 0.85;
+    transform: translateY(1px);
+}`;
+
+    function hasValue(value) {
+        return value !== null && value !== undefined && value !== '';
+    }
+
+    function calc(value, { usePx, viewportWidth, viewportUnit }) {
+        let vWidth = config.viewportWidth;
+        if (viewportWidth) vWidth = viewportWidth;
+        let vUnit = config.viewportUnit;
+        if (viewportUnit) vUnit = viewportUnit;
+        let localUsePx = config.usePx;
+        if (typeof usePx === 'boolean') localUsePx = usePx;
+
+        // console.log("setting", setting, localUsePx);
+
+        if (typeof value === 'string' && !isNaN(value)) value = Number(value);
+        if (typeof value === 'number') {
+            if (localUsePx) return value + 'px';
+            let val = ((value / vWidth) * 100).toFixed(4);
+            return `${val}${vUnit}`;
+        }
+        return value;
+    }
+
+    class Tdiv extends HTMLElement {
+        static get observedAttributes() {
+            return [
+                '_class', 'usePx', '_style', 'src', 'width', 'height', 'absolute',
+                'top', 'left', 'right', 'bottom', 'zIndex', 'pointer', 'flex', 'column', 'center',
+                'text', 'color','radius','border','borderColor', 'srcMode', 'onClick', 'debug', 'viewportWidth', 'viewportUnit'
+            ];
+        }
+
+        constructor() {
+            super();
+            this._onClickHandler = this._onClickHandler.bind(this);
+            this._connected = false;
+            this._iscalcstyle = false;
+            this._unsubscribe = null;
+        }
+
+        connectedCallback() {
+            this._connected = true;
+            this._upgradeProperties();
+            this._update();
+            this.addEventListener('click', this._onClickHandler);
+            this._unsubscribe = subscribe(this._update.bind(this));
+        }
+
+        disconnectedCallback() {
+            this._connected = false;
+            this.removeEventListener('click', this._onClickHandler);
+            if (this._unsubscribe) {
+                this._unsubscribe();
+                this._unsubscribe = null;
+            }
+        }
+
+        attributeChangedCallback() {
+            if (!this._connected) return;
+            this._update();
+        }
+
+        _upgradeProperties() {
+            // For properties set before upgrade
+            Tdiv.observedAttributes.forEach(attr => {
+                if (this.hasOwnProperty(attr)) {
+                    let value = this[attr];
+                    delete this[attr];
+                    this[attr] = value;
+                }
+            });
+        }
+
+        _getAttr(name, type = 'string') {
+            if (!this.hasAttribute(name)) return null;
+            let val = this.getAttribute(name);
+            if (type === 'boolean') return val === '' || val === 'true';
+            if (type === 'number') return Number(val);
+            return val;
+        }
+
+        _update() {
+            if (this._iscalcstyle) return;
+            this._iscalcstyle = true;
+            // console.log('update');
+            // 读取所有属性
+            const _class = this._getAttr('_class') || '';
+            const usePx = this._getAttr('usePx', 'boolean');
+            const styleAttr = this._getAttr('_style') || '';
+            const src = this._getAttr('src') || '';
+            const width = this._getAttr('width');
+            const height = this._getAttr('height');
+            const absolute = this._getAttr('absolute', 'boolean');
+            const top = this._getAttr('top');
+            const left = this._getAttr('left');
+            const right = this._getAttr('right');
+            const bottom = this._getAttr('bottom');
+            const zIndex = this._getAttr('zIndex');
+            const pointer = this._getAttr('pointer', 'boolean');
+            const flex = this._getAttr('flex', 'boolean');
+            const column = this._getAttr('column', 'boolean');
+            const center = this._getAttr('center', 'boolean');
+            const text = this._getAttr('text');
+            const color = this._getAttr('color');
+            const radius = this._getAttr('radius');
+            const border = this._getAttr('border');
+            const borderColor = this._getAttr('borderColor');
+            const srcMode = this._getAttr('srcMode') || 'auto';
+            const debug = this._getAttr('debug', 'boolean');
+            const viewportWidth = this._getAttr('viewportWidth', 'number');
+            const viewportUnit = this._getAttr('viewportUnit');
+            // class
+            let extraClass = ['tw-img-div'];
+            if (_class) extraClass.push(_class);
+            if (config.useButtonEffect && this._getAttr('onClick')) extraClass.push('click-effect');
+            // 分组样式
+            const calcOpt = { usePx, viewportWidth, viewportUnit };
+            let layoutStyle = '';
+            // 宽度
+            if (hasValue(width)) {
+                const widthStyle = `width: ${calc(width, calcOpt)};`;
+                layoutStyle += widthStyle;
+            }
+            if (hasValue(height)) {
+                const heightStyle = `height: ${calc(height, calcOpt)};`;
+                layoutStyle += heightStyle;
+            }
+            if (absolute) {
+                layoutStyle += 'position: absolute;';
+                if (hasValue(left)) layoutStyle += `left: ${calc(left, calcOpt)};`;
+                if (hasValue(top)) layoutStyle += `top: ${calc(top, calcOpt)};`;
+                if (hasValue(right)) layoutStyle += `right: ${calc(right, calcOpt)};`;
+                if (hasValue(bottom)) layoutStyle += `bottom: ${calc(bottom, calcOpt)};`;
+            } else {
+                layoutStyle += 'position: relative;';
+                if (hasValue(top)) layoutStyle += `margin-top: ${calc(top, calcOpt)};`;
+                if (hasValue(left)) layoutStyle += `margin-left: ${calc(left, calcOpt)};`;
+                if (hasValue(right)) layoutStyle += `margin-right: ${calc(right, calcOpt)};`;
+                if (hasValue(bottom)) layoutStyle += `margin-bottom: ${calc(bottom, calcOpt)};`;
+            }
+            if (hasValue(radius)) layoutStyle += `border-radius: ${calc(radius, calcOpt)};`;
+            if (hasValue(border)) {
+                layoutStyle += `border: ${calc(border, calcOpt)} solid ${borderColor || "#000"};`;
+            } else if (hasValue(borderColor)) {
+                layoutStyle += `border-color: ${borderColor};`;
+            }
+            if (hasValue(zIndex)) layoutStyle += `z-index: ${zIndex};`;
+            if (pointer === true) {
+                layoutStyle += 'cursor: pointer;';
+            } else if (this._getAttr('onClick') && pointer === false) {
+                layoutStyle += 'cursor: pointer;';
+            }
+            if (flex) {
+                layoutStyle += 'display:flex;';
+                if (column) layoutStyle += 'flex-direction: column;';
+                if (center) {
+                    layoutStyle += 'justify-content: center;';
+                    layoutStyle += 'align-items: center;';
+                }
+            } else {
+                if (center) layoutStyle += 'text-align: center;';
+            }
+
+            if (text) layoutStyle += `font-size: ${calc(text, calcOpt)};`;
+            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`;
+                }
+                layoutStyle += `background-image: url(${realSrc});`;
+
+
+                if (srcMode === 'fill') {
+                    layoutStyle += 'background-size: 100% 100%;';
+                } else if (srcMode === 'cover') {
+                    layoutStyle += 'background-size: cover;';
+                }
+            }
+            if (color) layoutStyle += `color: ${color};`;
+            if (styleAttr) layoutStyle += styleAttr;
+            if (debug) {
+                console.log('layoutStyle', layoutStyle);
+            }
+            const currentList = Array.from(this.classList);
+            const classNeeded = extraClass.filter(item => !currentList.includes(item));
+            this.classList.add(...classNeeded);
+            this.style.cssText = layoutStyle;
+            this._iscalcstyle = false;
+        }
+
+        _onClickHandler(e) {
+            // 支持onClick属性（字符串，window作用域下查找）
+            const onClickAttr = this._getAttr('onClick');
+            if (onClickAttr && typeof window[onClickAttr] === 'function') {
+                window[onClickAttr](e);
+            }
+        }
+    }
+
+
+    let isRegister = false;
+    function registerTdiv() {
+        if (!isRegister) {
+            customElements.define('t-div', Tdiv);
+            // append style for t-div
+            const style = document.createElement('style');
+            style.textContent = styleText;
+            document.head.appendChild(style);
+            isRegister = true;
+        }
+    }
+
+    registerTdiv();
+
+    var index = {
+        updateConfig, setViewportWidth, setViewportUnit, setUsePx, setUseButtonEffect
     };
 
     return index;

package/package.json

@@ -1,24 +1,24 @@
-{
-  "name": "@taole/dev-helper",
-  "version": "0.0.11",
-  "type": "module",
-  "scripts": {
-    "build": "npx -y rimraf dist && rollup -c",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "files": [
-    "Tdiv",
-    "dist"
-  ],
-  "author": "",
-  "license": "ISC",
-  "description": "",
-  "devDependencies": {
-    "rollup": "^4.45.1"
-  }
-}
+{
+  "name": "@taole/dev-helper",
+  "version": "0.0.12",
+  "type": "module",
+  "scripts": {
+    "build": "npx -y rimraf dist && rollup -c",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "Tdiv",
+    "dist"
+  ],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "rollup": "^4.45.1"
+  }
+}