WeChat 애플릿의 Button 구성 요소에 대한 자세한 설명과 간단한 예

이 글에서는 주로 WeChat 애플릿의 Button 구성 요소에 대한 자세한 설명과 간단한 예를 소개합니다. 필요한 친구는

구현 예 렌더링을 참조할 수 있습니다:

属性名	类型	默认值	说明
size	String	default	有效值default, mini
type	String	default	按钮的样式类型，有效值primary, default, warn
plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否禁用
loading	Boolean	false	名称前是否带 loading 图标
formType	String	无	有效值：submit, reset，用于form组件，点击分别会触发submit/reset事件
hover-class	String	button-hover	指定按钮按下去的样式类。当hover-class="none"时，没有点击态效果

참고: 버튼 호버의 기본값은 {배경색:rgba(0,0,0)입니다. ,0.1);opacity:0.7;}

샘플 코드:

/** wxss **/
/** 修改button默认的点击态样式类**/
.button-hover{
 background-color:red;
}
/** 添加自定义button点击态样式类**/
.other-button-hover{
 background-color:blur;
}
<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}"
 disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover"> default </button>
<button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}"
 disabled="{{disabled}}" bindtap="primary"> primary </button>
<button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}"
 disabled="{{disabled}}" bindtap="warn"> warn </button>
<button bindtap="setDisabled">点击设置以上按钮disabled属性</button>
<button bindtap="setPlain">点击设置以上按钮plain属性</button>
<button bindtap="setLoading">点击设置以上按钮loading属性</button>
var types = [&#39;default&#39;, &#39;primary&#39;, &#39;warn&#39;]
var pageObject = {
 data: {
 defaultSize: &#39;default&#39;,
 primarySize: &#39;default&#39;,
 warnSize: &#39;default&#39;,
 disabled: false,
 plain: false,
 loading: false
 },
 setDisabled: function(e) {
 this.setData({
 disabled: !this.data.disabled
 })
 },
 setPlain: function(e) {
 this.setData({
 plain: !this.data.plain
 })
 },
 setLoading: function(e) {
 this.setData({
 loading: !this.data.loading
 })
 }
}

for (var i = 0; i < types.length; ++i) {
 (function(type) {
 pageObject[type] = function(e) {
 var key = type + &#39;Size&#39;
 var changedData = {}
 changedData[key] =
 this.data[key] === &#39;default&#39; ? &#39;mini&#39; : &#39;default&#39;
 this.setData(changedData)
 }
 })(types[i])
}

Page(pageObject)

읽어 주셔서 감사합니다. 도움이 되기를 바랍니다. 여러분, 감사합니다. 이 사이트를 지원해 주셔서 감사합니다!

WeChat 애플릿 버튼 구성 요소에 대한 자세한 설명과 간단한 예를 보려면 PHP 중국어 웹사이트를 참고하세요!