uniapp微信小程序全局button自定义

简单记录

最近在做一个小程序，为了满足ui的需求，重写了微信小程序中button的默认样式。这里只是简单记录下代码，不上效果图，有需要的可以通过uniapp简单运行看效果。

代码说明

实现源码(scss)

$color-primary: #067AFF;
$color-success: #1aad19;
$color-warning: #f0ad4e;
$color-danger: #FF1425;

/* 重写 button 样式 */
button[size=small] {
  display: inline-block;
  font-size: 28rpx;
  line-height: 64rpx;
  padding: 0 48rpx;
}
button {
  border: 1px solid #eeeeee;
  border-radius: 16rpx;
  color: #242424;
  background-color: white;
  &[type=primary] {
    background-color: $color-primary;
    color: #fff;
  }
  &[type=success] {
    background-color: $color-success;
    color: #fff;
  }
  &[type=warning] {
    background-color: $color-warning;
    color: #fff;
  }
  &[type=danger] {
    background-color: $color-danger;
    color: #fff;
  }
}
button[disabled] {
  &[type=primary] {
    background-color: rgba($color-primary, .6);
    color: rgba(#fff, .6);
  }
  &[type=success] {
    background-color: rgba($color-success, .6);
    color: rgba(#fff, .6);
  }
  &[type=warning] {
    background-color: rgba($color-warning, .6);
    color: rgba(#fff, .6);
  }
  &[type=danger] {
    background-color: rgba($color-danger, .6);
    color: rgba(#fff, .6);
  }
}
button[plain] {
  &[type=primary] {
    background-color: transparent;
    border: 1px solid $color-primary;
    color: $color-primary;
  }
  &[type=success] {
    background-color: transparent;
    border: 1px solid $color-success;
    color: $color-success;
  }
  &[type=warning] {
    background-color: transparent;
    border: 1px solid $color-warning;
    color: $color-warning;
  }
  &[type=danger] {
    background-color: transparent;
    border: 1px solid $color-danger;
    color: $color-danger;
  }
}
.button-hover {
  &[type=primary] {
    background-color: $color-primary;
    color: #fff;
    &::after {
      background-color: rgba(#000, .2);
    }
  }
  &[type=success] {
    background-color: $color-success;
    color: #fff;
    &::after {
      background-color: rgba(#000, .2);
    }
  }
  &[type=warning] {
    background-color: $color-warning;
    color: #fff;
    &::after {
      background-color: rgba(#000, .2);
    }
  }
  &[type=danger] {
    background-color: $color-danger;
    color: #fff;
    &::after {
      background-color: rgba(#000, .2);
    }
  }
}
.button-hover[plain] {
  &[type=primary] {
    border: 1px solid rgba($color-primary, .6);
    color: rgba($color-primary, .6);
    &::after {
      background-color: transparent;
    }
  }
  &[type=success] {
    border: 1px solid rgba($color-success, .6);
    color: rgba($color-success, .6);
    &::after {
      background-color: transparent;
    }
  }
  &[type=warning] {
    border: 1px solid rgba($color-warning, .6);
    color: rgba($color-warning, .6);
    &::after {
      background-color: transparent;
    }
  }
  &[type=danger] {
    border: 1px solid rgba($color-danger, .6);
    color: rgba($color-danger, .6);
    &::after {
      background-color: transparent;
    }
  }
}

主要添加了四种颜色主题的按钮，primary、successs、warning和danger，通过type赋值直接使用，type default值则依然是默认的button样式。还有plain标签属性是镂空按钮。在微信小程序原有的尺寸 default和mini的基础上添加了small尺寸，一共三种尺寸大小，也是和微信小程序同样的使用方式，通过size赋值

<button>默认<button>
<button type="primary">primary<button>
<button type="success">success<button>
<button type="warning">warning<button>
<button type="danger">danger<button>
<button type="primary" plain>镂空 primary<button>
<button type="success" plain>镂空 success<button>
<button type="warning" plain>镂空 warning<button>
<button type="danger" plain>镂空 danger<button>
<!-- 各种尺寸 -->
<button type="primary" size="default">默认块元素 button<button>
<button type="primary" size="small">small button<button>
<button type="primary" size="mini">mini button<button>