diff --git a/src/badge/index.js b/src/badge/index.js
index d20c3a6..fc42760 100644
--- a/src/badge/index.js
+++ b/src/badge/index.js
@@ -15,7 +15,7 @@ class Badge extends Component {
       default: null
     },
     hidden: false,
-    'is-dot': false
+    isDot: false
   }
 
   static styles = [
@@ -85,7 +85,7 @@ class Badge extends Component {
     return html`
       <div class="badge" ref="bad">
         <slot></slot>
-        ${!this['is-dot'] && !this.hidden
+        ${!this.isDot && !this.hidden
           ? html`<div class="num">
               ${this.max && this.value >= this.max
                 ? this.max + '+'
diff --git a/src/form/textarea.js b/src/form/textarea.js
index 8899a1e..2143869 100644
--- a/src/form/textarea.js
+++ b/src/form/textarea.js
@@ -23,7 +23,7 @@ class TextArea extends Component {
     minheight: null,
     maxlength: null,
     minlength: null,
-    'show-limit': false,
+    showLimit: false,
     lazy: 0 // 并发拦截时间, 单位毫秒
   }
 
@@ -228,7 +228,7 @@ class TextArea extends Component {
           @keydown=${this.onKeydown}
           @change=${this.onChange}
         ></textarea>
-        ${this['show-limit']
+        ${this.showLimit
           ? html`<div class="input-stat">
               ${this.value.length}/${this.maxlength || '∞'}
             </div>`
diff --git a/src/image-preview/index.js b/src/image-preview/index.js
index 88b866e..a200abd 100644
--- a/src/image-preview/index.js
+++ b/src/image-preview/index.js
@@ -15,8 +15,8 @@ class ImagePreview extends Component {
       attribute: false
     },
     visible: false,
-    'max-zoom': 3,
-    'min-zoom': 1 / 3
+    maxZoom: 3,
+    minZoom: 1 / 3
   }
 
   static styles = css`
@@ -138,8 +138,7 @@ class ImagePreview extends Component {
     this.setZoom(this.#state.scale / 1.2)
   }
   setZoom(val) {
-    const maxZoom = this['max-zoom']
-    const minZoom = this['min-zoom']
+    const { maxZoom, minZoom } = this
     val = Math.max(val, minZoom)
     val = Math.min(val, maxZoom)
     val = val.toFixed(2)
diff --git a/src/image/index.js b/src/image/index.js
index 7630053..133287e 100644
--- a/src/image/index.js
+++ b/src/image/index.js
@@ -12,7 +12,7 @@ class Image extends Component {
     src: '',
     fit: 'fill',
     lazy: false,
-    'referrer-policy': null,
+    referrerPolicy: null,
     alt: {
       type: String,
       default: null
@@ -56,15 +56,7 @@ class Image extends Component {
   }
 
   render() {
-    let {
-      lazy,
-      src,
-      status,
-      fit,
-      alt,
-      'referrer-policy': referrerPolicy
-    } = this
-
+    let { lazy, src, status, fit, alt, referrerPolicy } = this
     let styles = styleMap({
       'object-fit': fit
     })
diff --git a/src/popconfirm/index.js b/src/popconfirm/index.js
index c458008..41f893d 100644
--- a/src/popconfirm/index.js
+++ b/src/popconfirm/index.js
@@ -14,22 +14,22 @@ class Popconfirm extends Component {
       default: '',
       attribute: false
     },
-    'confirm-button-text': {
+    confirmButtonText: {
       type: String,
       default: '确定',
       attribute: false
     },
-    'cancel-button-text': {
+    cancelButtonText: {
       type: String,
       default: '取消',
       attribute: false
     },
-    'confirm-button-type': {
+    confirmButtonType: {
       type: String,
       default: 'primary',
       attribute: false
     },
-    'cancel-button-type': {
+    cancelButtonType: {
       type: String,
       default: '',
       attribute: false
@@ -39,15 +39,14 @@ class Popconfirm extends Component {
       default: 'info',
       attribute: false
     },
-    'icon-color': {
+    iconColor: {
       type: String,
       default: '#ff9900',
       attribute: false
     },
-    'hide-icon': {
+    hideIcon: {
       type: Boolean,
-      default: false,
-      attribute: false
+      default: false
     },
 
     show: {
@@ -187,34 +186,34 @@ class Popconfirm extends Component {
           ref="popover"
         >
           <p class="content">
-            ${this['hide-icon']
+            ${this.hideIcon
               ? ''
               : html`<wc-icon
                   name=${this.icon}
-                  style=${`color:${this['icon-color']}`}
+                  style=${`color:${this.iconColor}`}
                 ></wc-icon>`}
             ${this.title}
           </p>
 
           <div class="btns">
-            ${!this['cancel-button-type']
+            ${!this.cancelButtonType
               ? html`<span class="cancel" @click=${this.hide}
-                  >${this['cancel-button-text']}</span
+                  >${this.cancelButtonText}</span
                 >`
               : html`<wc-button
-                  type=${this['cancel-button-type']}
+                  type=${this[cancelButtonType]}
                   class="cancel"
                   size="s"
                   @click=${this.hide}
-                  >${this['cancel-button-text']}</wc-button
+                  >${this[cancelButtonText]}</wc-button
                 >`}
 
             <wc-button
-              type=${this['confirm-button-type']}
+              type=${this.confirmButtonType}
               size="s"
               solid
               @click=${this.hide}
-              >${this['confirm-button-text']}</wc-button
+              >${this.confirmButtonText}</wc-button
             >
           </div>
         </div>
diff --git a/src/progress/index.js b/src/progress/index.js
index aaecdba..e1b4573 100644
--- a/src/progress/index.js
+++ b/src/progress/index.js
@@ -20,12 +20,12 @@ class Progress extends Component {
       type: String,
       default: 'line' //  line/circle/dashboard
     },
-    'stroke-width': {
+    strokeWidth: {
       type: Number,
       default: 6,
       attribute: false
     },
-    'text-inside': {
+    textInside: {
       type: Boolean,
       default: false,
       attribute: true
@@ -52,22 +52,22 @@ class Progress extends Component {
       default: 126,
       attribute: false
     },
-    'show-text': {
+    showText: {
       type: Boolean,
       default: false,
       attribute: true
     },
-    'back-color': {
+    backColor: {
       type: String,
       default: '#ebeef5',
       attribute: false
     },
-    'text-color': {
+    textColor: {
       type: String,
       default: '#606266',
       attribute: false
     },
-    'stroke-linecap': {
+    strokeLinecap: {
       type: String,
       default: 'round', //butt/round/square
       attribute: false
@@ -125,7 +125,7 @@ class Progress extends Component {
   #colors
 
   get relativeStrokeWidth() {
-    return ((this['stroke-width'] / this.width) * 100).toFixed(1)
+    return ((this.strokeWidth / this.width) * 100).toFixed(1)
   }
   get radius() {
     if (this.type === 'circle' || this.type === 'dashboard') {
@@ -199,7 +199,7 @@ class Progress extends Component {
   get progressTextSize() {
     let size =
       this.type === 'line'
-        ? 12 + this['stroke-width'] * 0.4
+        ? 12 + this.strokeWidth * 0.4
         : this.width * 0.111111 + 2
     return size + 'px'
   }
@@ -230,7 +230,7 @@ class Progress extends Component {
           <path
             role="circle__track"
             d=${this.trackPath}
-            stroke=${this['back-color']}
+            stroke=${this.backColor}
             stroke-width=${this.relativeStrokeWidth}
             fill="none"
             style=${this.trailPathStyle}
@@ -240,7 +240,7 @@ class Progress extends Component {
             d=${this.trackPath}
             stroke=${this.stroke}
             fill="none"
-            stroke-linecap=${this['stroke-linecap']}
+            stroke-linecap=${this.strokeLinecap}
             stroke-width=${this.value ? this.relativeStrokeWidth : 0}
             style=${this.circlePathStyle}
           ></path>
@@ -250,13 +250,13 @@ class Progress extends Component {
   }
   renderLine() {
     let $barInnerText = ''
-    if (this['text-inside'] && this['show-text']) {
+    if (this.textInside && this.showText) {
       $barInnerText = html`
         <div
           class="bar-innerText"
           style=${styleMap({
-            color: this['text-color'],
-            'line-height': this['stroke-width'] + 'px'
+            color: this.textColor,
+            'line-height': this.strokeWidth + 'px'
           })}
         >
           ${this.value + '%'}
@@ -269,8 +269,8 @@ class Progress extends Component {
         <div
           class="bar-outer"
           :style=${styleMap({
-            height: this['stroke-width'] + 'px',
-            'background-color': this['back-color']
+            height: this.strokeWidth + 'px',
+            'background-color': this.backColor
           })}
         >
           <div class="bar-inner" style=${this.barStyle}>${$barInnerText}</div>
@@ -280,12 +280,12 @@ class Progress extends Component {
   }
   render() {
     let $outSideText = ''
-    if (this['show-text'] && !this['text-inside']) {
+    if (this.showText && !this.textInside) {
       $outSideText = html`
         <div
           class="progress-text"
           style=${styleMap({
-            color: this['text-color'],
+            color: this.textColor,
             fontSize: this.progressTextSize
           })}
         >
diff --git a/src/result/index.js b/src/result/index.js
index 3a5a8b0..77e3e9d 100644
--- a/src/result/index.js
+++ b/src/result/index.js
@@ -14,7 +14,7 @@ class Result extends Component {
       default: '',
       attribute: false
     },
-    'sub-title': { type: String, default: '' },
+    subTitle: { type: String, default: '' },
     type: {
       type: String,
       default: 'success'
@@ -117,7 +117,7 @@ class Result extends Component {
 
         <div class="sub-title">
           <slot name="sub-title">
-            <span>${this['sub-title']}</span>
+            <span>${this.subTitle}</span>
           </slot>
         </div>
 
diff --git a/src/swipe/index.js b/src/swipe/index.js
index 5edb03c..5ce06db 100644
--- a/src/swipe/index.js
+++ b/src/swipe/index.js
@@ -7,6 +7,7 @@
 import { css, html, Component, nextTick, styleMap } from '@bd/core'
 import '../icon/index.js'
 const CARD_SCALE = 0.83
+
 function createWatcher(object, key, effect) {
   let value
   Object.defineProperty(object, key, {
@@ -19,9 +20,10 @@ function createWatcher(object, key, effect) {
     }
   })
 }
+
 class Swipe extends Component {
   static props = {
-    'initial-index': {
+    initialIndex: {
       type: Number,
       default: 0
     },
@@ -68,11 +70,12 @@ class Swipe extends Component {
       type: String,
       default: 'horizontal' // horizontal or  vertical
     },
-    'pause-on-hover': {
+    pauseOnHover: {
       type: Boolean,
       default: true
     }
   }
+
   static styles = css`
     :host {
       overflow: hidden;
@@ -175,6 +178,7 @@ class Swipe extends Component {
       }
     }
   `
+
   items = []
   activeIndex = 0
   stamp = 0
@@ -222,16 +226,19 @@ class Swipe extends Component {
       return
     }
     this.stamp = now
+
     if (typeof index === 'string') {
       const filteredItems = this.items.filter(item => item.name === index)
       if (filteredItems.length > 0) {
         index = this.items.indexOf(filteredItems[0])
       }
     }
+
     index = Number(index)
     if (isNaN(index) || index !== Math.floor(index)) {
       return
     }
+
     const length = this.items.length
     const oldIndex = this.activeIndex
     if (index < 0) {
@@ -244,6 +251,7 @@ class Swipe extends Component {
     if (oldIndex !== this.activeIndex) {
       this.resetItemPosition(oldIndex)
     }
+
     this.resetTimer()
     nextTick(() => this.$requestUpdate())
   }
@@ -277,10 +285,11 @@ class Swipe extends Component {
     this.updateItems()
     this.resetItemPosition()
   }
+
   mounted() {
     this.updateItems()
     nextTick(() => {
-      let initialIndex = this['initial-index']
+      let initialIndex = this.initialIndex
       if (initialIndex >= 0 && initialIndex < this.items.length) {
         this.activeIndex = initialIndex
       }
@@ -289,10 +298,11 @@ class Swipe extends Component {
       this.startTimer()
     })
 
-    if (this['pause-on-hover']) {
+    if (this.pauseOnHover) {
       this.$on('mouseenter', () => this.pauseTimer())
       this.$on('mouseleave', () => this.startTimer())
     }
+
     if (this.arrow === 'hover') {
       this.$on('mouseenter', () => this.showArrow())
       this.$on('mouseleave', () => this.hideArrow())
@@ -300,15 +310,18 @@ class Swipe extends Component {
       this.showArrow()
     }
   }
+
   unmounted() {
     this.resizeObserve.disconnect()
     this.resizeObserve = null
     this.pauseTimer()
   }
+
   render() {
     let styles = styleMap({
       opacity: this.showArrowBtn ? 0.6 : 0
     })
+
     let toggleBtns =
       this.direction === 'horizontal'
         ? html`
@@ -345,10 +358,12 @@ class Swipe extends Component {
     `
   }
 }
+
 class SwipeItem extends Component {
   static props = {
     name: { String, attributes: false }
   }
+
   static styles = css`
     :host {
       position: absolute;
@@ -372,42 +387,51 @@ class SwipeItem extends Component {
       cursor: pointer;
     }
   `
+
   static watch = {
     translate(val) {
       const translateType =
         this.$parent.direction === 'horizontal' ? 'translateX' : 'translateY'
       this.style.transform = `${translateType}(${val}px) scale(${this.scale})`
     },
+
     ready(val) {
       val ? this.setAttribute('ready', '') : this.removeAttribute('ready')
     },
+
     animating(val) {
       val
         ? this.setAttribute('animating', '')
         : this.removeAttribute('animating')
     },
+
     active(val) {
       if (this.$parent.type !== 'card') {
         return
       }
-      let style = {
+
+      const style = {
         opacity: 1,
         'z-index': 1,
         filter: 'brightness(0.8)'
       }
+
       if (this.inStage) {
         style['z-index'] = 1
       } else {
         style['z-index'] = -1
         style.opacity = 0
       }
+
       if (val) {
         style['z-index'] = 2
         style.filter = 'brightness(1)'
       }
+
       Object.assign(this.style, style)
     }
   }
+
   processIndex(index, activeIndex, length) {
     if (activeIndex === 0 && index === length - 1) {
       return -1
@@ -420,6 +444,7 @@ class SwipeItem extends Component {
     }
     return index
   }
+
   calcCardTranslate(index, activeIndex) {
     const parentWidth = this.$parent.offsetWidth
     if (this.inStage) {
@@ -430,6 +455,7 @@ class SwipeItem extends Component {
       return ((3 + CARD_SCALE) * parentWidth) / 4
     }
   }
+
   calcTranslate(index, activeIndex, isVertical) {
     const distance = this.$parent[isVertical ? 'offsetHeight' : 'offsetWidth']
     return distance * (index - activeIndex)
@@ -439,18 +465,22 @@ class SwipeItem extends Component {
     const parentType = this.$parent.type
     const parentDirection = this.$parent.direction
     const length = this.$parent.items.length
+
     if (parentType !== 'card' && oldIndex !== undefined) {
       this.animating = index === activeIndex || index === oldIndex
     }
+
     if (index !== activeIndex && length > 2 && this.$parent.loop) {
       index = this.processIndex(index, activeIndex, length)
     }
+
     if (parentType === 'card') {
       if (parentDirection === 'vertical') {
         console.warn(
           '[Warn][Carousel]vertical direction is not supported in card mode'
         )
       }
+
       this.inStage = Math.round(Math.abs(index - activeIndex)) <= 1
       this.active = index === activeIndex
       this.scale = this.active ? 1 : CARD_SCALE
@@ -462,14 +492,17 @@ class SwipeItem extends Component {
       this.scale = 1
       this.translate = this.calcTranslate(index, activeIndex, isVertical)
     }
+
     !this.ready && (this.ready = true)
   }
+
   created() {
     const { watch } = this.constructor
     for (const key in watch) {
       createWatcher(this, key, watch[key])
     }
   }
+
   mounted() {
     this.$parent = this.parentNode
     if (this.$parent.type === 'card') {