@taole/dev-helper 0.0.9 → 0.0.11

package/Tdiv/index.js

@@ -42,7 +42,7 @@ class Tdiv extends HTMLElement {
         return [
             '_class', 'usePx', '_style', 'src', 'width', 'height', 'absolute',
             'top', 'left', 'right', 'bottom', 'zIndex', 'pointer', 'flex', 'column', 'center',
-            'text', 'color', 'srcMode', 'onClick', 'debug', 'viewportWidth', 'viewportUnit'
+            'text', 'color','radius','border','borderColor', 'srcMode', 'onClick', 'debug', 'viewportWidth', 'viewportUnit'
         ];
     }
 
@@ -118,6 +118,9 @@ class Tdiv extends HTMLElement {
         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');
@@ -151,6 +154,12 @@ class Tdiv extends HTMLElement {
             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;';

package/Tdiv/index.svelte

@@ -97,6 +97,26 @@
      * 内部文本的颜色
      */
     export let color = "";
+
+    /**
+     * @type {number|string}
+     * 圆角大小
+     */
+    export let radius = null;
+
+    /**
+     * @type {string}
+     * 边框宽度
+     */
+    export let border = null;
+
+    /**
+     * @type {string}
+     * 边框颜色
+     */
+    export let borderColor = null;
+
+
     /**
      * @type {'auto'|'fill'|'cover'|'contain'}
      * src传入时有效, 图片的填充模式: 默认auto
@@ -208,6 +228,15 @@
                 ret += `margin-bottom: ${calc(bottom)};`;
             }
         }
+        if(hasValue(radius)){
+            ret += `border-radius: ${calc(radius)};`;
+        }
+        if(hasValue(border)){
+            ret += `border: ${calc(border)} solid ${borderColor || "#000"};`;
+        } else if(hasValue(borderColor)){
+            ret += `border-color: ${borderColor};`;
+        }
+        
         if (hasValue(zIndex)) {
             ret += `z-index: ${zIndex};`;
         }
@@ -278,10 +307,8 @@
         background-size: 100% auto;
         flex: none;
     }
-    .click-effect {
-        &:active {
-            opacity: 0.85;
-            transform: translateY(1px);
-        }
+    .click-effect:active {
+        opacity: 0.85;
+        transform: translateY(1px);
     }
 </style>

package/Tdiv/index.vue

@@ -28,6 +28,9 @@ export default {
     center: { type: Boolean, default: false },
     text: { type: [Number, String], default: null },
     color: { type: String, default: '' },
+    radius: { type: [Number, String], default: null },
+    border: { type: [Number, String], default: null },
+    borderColor: { type: String, default: null },
     srcMode: { type: String, default: 'auto' },
     onClick: { type: Function, default: null },
     debug: { type: Boolean, default: false },
@@ -80,6 +83,12 @@ export default {
         if (hasValue(this.right)) ret += `margin-right: ${calc(this.right)};`;
         if (hasValue(this.bottom)) ret += `margin-bottom: ${calc(this.bottom)};`;
       }
+      if (hasValue(this.radius)) ret += `border-radius: ${calc(this.radius)};`;
+      if (hasValue(this.border)) {
+        ret += `border: ${calc(this.border)} solid ${this.borderColor || "#000"};`;
+      } else if(hasValue(this.borderColor)){
+        ret += `border-color: ${this.borderColor};`;
+      }
       if (hasValue(this.zIndex)) ret += `z-index: ${this.zIndex};`;
       if (this.pointer === true) {
         ret += 'cursor: pointer;';
@@ -134,10 +143,8 @@ export default {
   flex: none;
 }
 
-.click-effect {
-  &:active {
+.click-effect:active {
     opacity: 0.85;
     transform: translateY(1px);
   }
-}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taole/dev-helper",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "type": "module",
   "scripts": {
     "build": "npx -y rimraf dist && rollup -c",