feat(harmony): 新增 button 组件

packages/taro-harmony/src/components/components-harmony/button/index.css

@@ -0,0 +1,108 @@
+div {
+  display: flex;
+  justify-content: center;
+}
+
+button {
+  border-radius: 5px;
+  height: 46px;
+  font-size: 18px;
+}
+
+.type-default {
+  background-color: #f8f8f8;
+  text-color: #000;
+  border: 1px solid #eee;
+}
+
+.type-primary {
+  background-color: #1aad19;
+  text-color: #fff;
+}
+
+.type-warn {
+  background-color: #e64340;
+  text-color: #fff;
+}
+
+.type-warn-plain {
+  background-color: transparent;
+  border: 1px solid #e64340;
+  text-color: #e64340;
+}
+
+.type-default-plain {
+  background-color: transparent;
+  border: 1px solid #353535;
+  text-color: #353535;
+}
+
+.type-primary-plain {
+  background-color: transparent;
+  border: 1px solid #1aad19;
+  text-color: #1aad19;
+}
+
+.disbaled {
+  text-color: hsla(0,0%,100%,.6);
+}
+
+.type-default-disabled {
+  background-color: #f7f7f7;
+  text-color: rgba(0,0,0,.3);
+  border: 1px solid #eee;
+}
+
+.type-primary-disabled {
+  background-color: #9ed99d;
+}
+
+.type-warn-disabled {
+  background-color: #ec8b89;
+}
+
+.type-default-plain-disabled {
+  border-color: rgba(0,0,0,.2);
+  text-color: rgba(0,0,0,.2);
+}
+
+.type-primary-plain-disabled {
+  border-color: rgba(0,0,0,.2);
+  text-color: rgba(0,0,0,.2);
+}
+
+.type-warn-plain-disabled {
+  border-color: rgba(0,0,0,.2);
+  text-color: rgba(0,0,0,.2);
+}
+
+.type-default-loading {
+  background-color: #dedede;
+  color: rgba(0,0,0,.6);
+}
+
+.type-warn-loading {
+  background-color: #ce3c39;
+  color: hsla(0,0%,100%,.6);
+}
+
+.type-primary-loading {
+  background-color: #179b16;
+  color: hsla(0,0%,100%,.6);
+}
+
+.size-default {
+  width: 100%;
+}
+
+.size-mini {
+  width: 100px;
+  height: 36px;
+  font-size: 13px;
+}
+
+.button-hover {
+  background-color: #dedede;
+  text-color: rgba(0,0,0,.6);
+  transition: all linear 0.2s;
+}

packages/taro-harmony/src/components/components-harmony/button/index.hml

@@ -0,0 +1,12 @@
+<div>
+  <button
+    id="{{id}}"
+    class="{{cls}} {{clsType}} {{clsSize}} {{clsPlain}} {{clsDisable}} {{clsDisableType}} {{clsLoading}} {{clsHover}}"
+    type="{{harmonyType}}"
+    disabled="{{disabled}}"
+    waiting="{{loading}}"
+    @click="onClick"
+    @touchstart="onTouchStart"
+    @touchend="onTouchEnd"
+  >{{value}}</button>
+</div>

packages/taro-harmony/src/components/components-harmony/button/index.js

@@ -0,0 +1,102 @@
+import { createOption } from '../utils'
+
+export default createOption({
+  props: {
+    id: {
+      default: ''
+    },
+    cls: {
+      default: ''
+    },
+    type: {
+      default: 'default'
+    },
+    harmonyType: {
+      default: 'capsule'
+    },
+    size: {
+      default: 'default'
+    },
+    plain: {
+      default: false
+    },
+    disabled: {
+      default: false
+    },
+    loading: {
+      default: false
+    },
+    hoverStartTime: {
+      default: 20
+    },
+    hoverStayTime: {
+      default: 70
+    },
+    hoverClass: {
+      default: 'button-hover'
+    },
+    cn: {
+      default: []
+    }
+  },
+  data () {
+    return {
+      hover: false,
+      touch: false
+    }
+  },
+  computed: {
+    clsType () {
+      return `type-${this.type}`
+    },
+    clsSize () {
+      return `size-${this.size}`
+    },
+    clsPlain () {
+      if (!this.plain) return ''
+      return `type-${this.type}-plain`
+    },
+    clsDisable () {
+      if (!this.disabled) return ''
+      return 'disabled'
+    },
+    clsLoading () {
+      if (!this.loading) return ''
+      return `type-${this.type}-loading`
+    },
+    clsDisableType () {
+      if (!this.disabled) return ''
+      if (this.plain) return `type-${this.type}-plain-disabled`
+      return `type-${this.type}-disabled`
+    },
+    clsHover () {
+      return this.hover && !this.disabled ? this.hoverClass : ''
+    },
+    value () {
+      return this.cn.map(i => i.v).join('')
+    }
+  },
+  onTouchStart () {
+    this.touch = true
+    if (this.hoverClass && !this.disabled) {
+      setTimeout(() => {
+        if (this.touch) {
+          this.hover = true
+        }
+      }, this.hoverStartTime)
+    }
+  },
+  onTouchEnd () {
+    this.touch = false
+    if (this.hoverClass && !this.disabled) {
+      setTimeout(() => {
+        if (!this.touch) {
+          this.hover = false
+        }
+      }, this.hoverStayTime)
+    }
+  },
+  onClick () {
+    this.$trigger('tap')
+  }
+})

packages/taro-harmony/src/template.ts

@@ -53,6 +53,10 @@ ${elements}
   }
 
   createMiniComponents (components): any {
+    components.Button.cn = ''
+    components.Button.bindtap = ''
+    components.Button.type = "'default'"
+
     const result = super.createMiniComponents(components)
 
     delete result['pure-view']