button控制元件學習

1.button屬性

2.size和type屬性對button的影響

size屬性的預設值為default，type屬性的預設值也為default，如果值為default時，該屬性可以省略；

<view class="content">
<!--type屬性為default-->
<!--size屬性為default-->
<button type="default" size="default"> size屬性為default </button>
<!--size屬性為mini-->
<button type="default" size="mini"> size屬性為mini </button>

<!--type屬性為primary-->
<!--size屬性為default-->
<button type="primary" size="default"> size屬性為default </button>
<!--size屬性為mini-->
<button type="primary" size="mini"> size屬性為mini </button>

<!--type屬性為warn 一般用於需要慎重點選的按鈕-->
<!--size屬性為default-->
<button type="warn" size="default"> size屬性為default </button>
<!--size屬性為mini-->
<button type="warn" size="mini"> size屬性為mini </button>
</view>
 

3.plain屬性對按鈕的影響

<!--type屬性為default-->
<!--plain屬性為false的時候可以省略-->
<button type="default" size="default"> size屬性為default </button>
<!--plain屬性為true-->
<button type="default" size="default" plain="true"> size屬性為mini </button>




<!--type屬性為primary-->
<!--plain屬性為false的時候可以省略-->
<button type="primary" size="default" > size屬性為default </button>
<!--plain屬性為true-->
<button type="primary" size="default" plain="true"> size屬性為mini </button>




<!--type屬性為warn 一般用於需要慎重點選的按鈕-->
<!--plain屬性為false的時候可以省略-->
<button type="warn" size="default"> size屬性為default </button>
<!--plain屬性為true-->
<button type="warn" size="default" plain="true"> size屬性為mini </button>



<text>補充:如果plain屬性的值為false的時候要不省略，要不通過.js檔案中的值，否則會有問題</text>
<!--不正確，設定為false,但是識別到的字串不為空，所以都是真值，所以鏤空-->
<button type="primary" size="default" plain="false"> size屬性為default </button>
<!--通過.js檔案中的變數設定值-->
<button type="primary" size="default" plain="{{plain}}"> size屬性為default </button>
<!--直接用預設值 推薦-->
<button type="primary" size="default"> size屬性為mini </button>
 

//.js中定義的變數
data: {
    plain: false
  },

4.disable屬性對按鈕的影響

<!--disabled屬性為false的時候可以省略-->
<button type="primary" size="default" > size屬性為default </button>
<!--disabled屬性為true-->
<button type="primary" size="default" disabled="true"> size屬性為mini </button>

該屬性的設定注意點與plain相同，參見plain屬性圖片上的紅色強調字型

5.loading屬性對按鈕的影響

<!--disabled屬性為false的時候可以省略-->
<button type="primary" size="default" > 沒有loading的 </button>
<!--disabled屬性為true-->
<button type="primary" size="default" loading="true" > 有loading的 </button>

6.注意事項

通常按鈕的屬性都通過.js檔案定義變數來修改，這樣便於按鈕互動時實時更新按鈕狀態，提示使用者

data: {
    defaultSize: 'default',
    primarySize: 'default',
    warnSize: 'default',
    disabled: false,
    plain: false,
    loading: false
  },

在程式碼用引用變數

<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>