WeChat 애플릿의 버튼 구성 요소를 빠르게 구현

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!