Button ?? ??? WeChat ???? ?????.

Button ?? ??? WeChat ???? ????? ???? ???? ??? ?? ??? ??? ?? ???? ???? ?? ????? ??? ?? ??? ? ????. ???? ?? ??. WeChat ?? ???? ?? ??.
??? ??? ?? Button ?? ??? ??? ?? ????? ?? ?? ??? ???? ???? ?? ? ???? Button ?? ??? ??? ???? ? ?? ????.

???, ??? ?????

?? ?? ? ??? ????.

5?? ??? ????

• 3?? ??? ????

• ??? ??? ????

• ?? ??? ?????.

• ???? ??

• ???? ??? ? ????

?? ??

? ?? ??? ?? ??? ??? ????

?? ???? ?? ???? WeChat ??? ??? ? ?? ??? ?? ?? ??? ????

??? Vscode? ??? ?? less? ???? easyLess ????? less? wxss ???? ?? ??????.

? ?? ??, ?? ?? ? ???

?? ?? ??:

• ???? ??? ????? ??? ???? ??? ?? flex ????? ???? ? ?? ????.

• ???? ???? ???. ?? ??? ??? ???? ????

• ??? ?? ??? ???? ???

• ??? ??? ??? ?????

<button>
??<pm-icon></pm-icon>
??<slot></slot>
</button>

.pm-button?{
??border-radius:?0;
??font-weight:?normal;
??display:?flex;
??flex-flow:?row?nowrap;
??justify-content:?center;
??align-items:?center;
??white-space:?nowrap;
}
.pm-button:not([size='mini'])?{
??width:?0;
}
.pm-button--normal?{
??width:?80px?!important;
??height:?40px;
??font-size:?16px;
}
.pm-button--normal.pm-button--round?{
??border-radius:?40px;
}
.pm-button--small?{
??width:?60px?!important;
??height:?30px;
??font-size:?14px;
}
.pm-button--small.pm-button--round?{
??border-radius:?30px;
}
.pm-button--mini?{
??width:?40px?!important;
??height:?20px;
??font-size:?12px;
}
.pm-button--mini.pm-button--round?{
??border-radius:?20px;
}
.pm-button--primary?{
??background-color:?#1989fa;
??border:?1px?solid?#1989fa;
??color:?white;
}
.pm-button--primary.pm-button--plain?{
??color:?#1989fa;
}
.pm-button--success?{
??background-color:?#07c160;
??border:?1px?solid?#07c160;
??color:?white;
}
.pm-button--success.pm-button--plain?{
??color:?#07c160;
}
.pm-button--danger?{
??background-color:?#ee0a24;
??border:?1px?solid?#ee0a24;
??color:?white;
}
.pm-button--danger.pm-button--plain?{
??color:?#ee0a24;
}
.pm-button--warning?{
??background-color:?#ff976a;
??border:?1px?solid?#ff976a;
??color:?white;
}
.pm-button--warning.pm-button--plain?{
??color:?#ff976a;
}
.pm-button--default?{
??background-color:?#ffffff;
??border:?1px?solid?#ebedf0;
??color:?black;
}
.pm-button--primary:active,
.pm-button--success:active,
.pm-button--danger:active,
.pm-button--warning:active,
.pm-button--default:active?{
??opacity:?0.8;
}
.pm-button--default:active?{
??background-color:?#ebedf0;
}
.pm-button--plain?{
??background-color:?transparent;
}
.pm-button--plain:active?{
??opacity:?1!important;
??background-color:?#ebedf0;
}
.pm-button--disabled?{
??opacity:?0.6;
}
.pm-button--disabled:active?{
??opacity:?0.6?!important;
}
.pm-button--disabled.pm-button--plain:active,
.pm-button--disabled.pm-button--default:active?{
??background-color:?transparent;
}

3??, ??? ??

Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    size: {
      type: String,
      value: 'normal'
    },
    type: {
      type: String,
      value: 'primary'
    },
    plain: Boolean,
    disabled: Boolean,
    round: Boolean,
    cStyle: String,
    icon: String,
    iconColor: String,
    iconSize: String
  },

  /**
   * 組件的方法列表
   */
  methods: {
    clickHandler() {
      !this.data.disabled && this.triggerEvent('click', {})
    }
  }
})

?? ????: "WeChat ?? ????"

? ??? WeChat ???? ?? ?? ??? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!