props定义改为驼峰

src/drawer/index.js

@@ -48,7 +48,7 @@ class Drawer extends Component {
     },
     width: '',
     height: '',
-    'mask-close': false
+    maskClose: false
   }
 
   static styles = [
@@ -136,7 +136,7 @@ class Drawer extends Component {
     this.$on('click', ev => {
       let path = ev.composedPath()
 
-      if (path[0] === ev.currentTarget && this['mask-close']) {
+      if (path[0] === ev.currentTarget && this.maskClose) {
         this.closeDrawer()
       }
     })

src/form/star.js

@@ -11,8 +11,8 @@ class Star extends Component {
   static props = {
     value: 0,
     text: [],
-    'allow-half': false,
-    'show-value': false,
+    allowHalf: false,
+    showValue: false,
     disabled: false,
     clearable: false
   }
@@ -115,7 +115,7 @@ class Star extends Component {
       f = f < 0.5 ? 0.5 : 1
     }
 
-    if (!this['allow-half']) {
+    if (!this.allowHalf) {
       f = f > 0 ? 1 : 0
     }
     // 数值没变化, 直接终止
@@ -199,7 +199,7 @@ class Star extends Component {
         <wc-icon data-idx="2" name="star"></wc-icon>
         <wc-icon data-idx="3" name="star"></wc-icon>
         <wc-icon data-idx="4" name="star"></wc-icon>
-        <span class="text">${this['show-value'] ? val : ''}</span>
+        <span class="text">${this.showValue ? val : ''}</span>
       </label>
     `
   }

src/form/switch.js

@@ -14,9 +14,9 @@ class Switch extends Component {
       default: false,
       attribute: false
     },
-    'inactive-text': '',
-    'active-text': '',
-    'inline-text': false,
+    inactiveText: '',
+    activeText: '',
+    inlineText: false,
     disabled: false,
     readonly: false
   }
@@ -215,17 +215,17 @@ class Switch extends Component {
     >
       <span
         class=${classes}
-        st=${this['inline-text']
+        st=${this.inlineText
           ? this.value
-            ? this['active-text']
-            : this['inactive-text']
+            ? this.activeText
+            : this.inactiveText
           : ''}
       ></span>
       <slot
-        >${!this['inline-text']
+        >${!this.inlineText
           ? this.value
-            ? this['active-text']
-            : this['inactive-text']
+            ? this.activeText
+            : this.inactiveText
           : ''}</slot
       >
     </label>`

src/layer/index.js

@@ -32,9 +32,9 @@ class Layer extends Component {
     top: { type: String, attribute: false },
     bottom: { type: String, attribute: false },
     background: { type: String, attribute: false },
-    'mask-color': { type: String, attribute: false },
+    maskColor: { type: String, attribute: false },
     mask: false,
-    'mask-close': false,
+    maskClose: false,
     title: { type: String, default: '', attribute: false },
     content: { type: String, default: '', attribute: false },
     btns: []
@@ -356,7 +356,7 @@ class Layer extends Component {
             return
           }
 
-          if (this['mask-close']) {
+          if (this.maskClose) {
             if (this.#wrapped === false) {
               this.#reject()
             }
@@ -365,8 +365,8 @@ class Layer extends Component {
         }
       })
 
-      if (this['mask-color']) {
-        this.style.backgroundColor = this['mask-color']
+      if (this.maskColor) {
+        this.style.backgroundColor = this.maskColor
       }
     }
 

src/tabs/index.js

@@ -19,7 +19,7 @@ class Tabs extends Component {
   static props = {
     tab: { type: String, attribute: false },
     type: 'default',
-    'tab-position': 'top',
+    tabPosition: 'top',
     labels: []
   }
 
@@ -526,7 +526,7 @@ class Tabs extends Component {
 
   render() {
     let tabStyle = {}
-    if (this['tab-position'] === 'top' || this['tab-position'] === 'bottom') {
+    if (this.tabPosition === 'top' || this.tabPosition === 'bottom') {
       tabStyle = {
         width: this.#tabWidth + 'px',
         left: this.#tabLeft + 'px'