演示代碼如下：

<!-- default，plain -->
<button type="primary" plain>primary+plain</button>

<!-- default，plain -->
<button type="default" plain>default+plain</button>

<!-- warn，plain -->
<button type="warn" plain>warn+plain</button>

其表現(xiàn)形態(tài)展示的 效果圖 如下：

六. disabled禁用屬性

disabled屬性，用于控制按鈕是否可點擊，當(dāng)按鈕處于disabled狀態(tài)下時，按鈕的形態(tài)將 置灰 且用戶 不可再進(jìn)行點擊操作

代碼示例如下：

<!-- default，disabled -->
<button type="primary" disabled>primary+disabled</button>

<!-- default，disabled -->
<button type="default" disabled>default+disabled</button>

<!-- warn，disabled -->
<button type="warn" disabled>warn+disabled</button>

其表現(xiàn)形態(tài)展示的 效果圖 如下：

七. loading屬性

loading屬性，該屬性用于控制按鈕是否處于loading狀態(tài)，嚴(yán)格的來說，loading狀態(tài)算是一種組合狀態(tài)，它主要由 disabled 加上 loading動畫 組合而成，和disabled屬性不同的是，uni-app中l(wèi)oading屬性的disabled并不會置灰按鈕，具體說明如下

loading屬性常用于等待階段，比如：用戶注冊時，當(dāng)用戶填寫完信息并點擊注冊按鈕后，此時信息已被發(fā)送至后臺，為了保證用戶不進(jìn)行重復(fù)點擊注冊按鈕，且希望通過交互效果告知用戶注冊已經(jīng)正在處理中了，那么就可以使用loading屬性；

<!-- default，loading -->
<button type="primary" :loading="true">primary+loading</button>

<!-- default，disabled -->
<button type="default" :loading="true">default+loading</button>

<!-- warn，disabled -->
<button type="warn" :loading="true">warn+loading</button>

其表現(xiàn)形態(tài)展示的 效果圖 如下：

八. 事件機制

在uni-app中的事件機制完全遵循于Vue的語法，那么理所當(dāng)然的button的事件也遵循Vue的語法，比如，我們要為按鈕添加一個點擊事件，點擊后提示一個alert彈窗，那么代碼如下

<template>
	<view class="buton-conatiner">
		<!-- 基礎(chǔ)用法 -->
		<view class="button-group">
			<h4>默認(rèn)按鈕</h4>
			<!-- 默認(rèn)按鈕組件 -->
			<button @click="handleClick">這是一個按鈕</button>
		</view>
	</view>
</template>

<script>
export default {
	methods: {
		handleClick() {
			alert('觸發(fā)點擊');
		}
	}
};
</script>

我們看到 點擊事件的綁定是遵循Vue的語法的，通過指令 @ 或者 v-on 的語法，如下

九. open-type開放能力

open-type，開放能力，uni-app作為跨端的解決方案，必然有對應(yīng)各個小程序的open-type，可能會有小伙伴問，什么是open-type，簡單的說，就是封裝好的一些公共能力，這些能力可以快速的協(xié)助我們完成業(yè)務(wù)需求，比如獲取用戶的手機號碼，分享轉(zhuǎn)發(fā)等等；
uni-app的open-type值綜合了眾多小程序，用法與原版大致相似，最主要的區(qū)別還是語法，畢竟語法上uni-app遵循的是Vue的語法，舉個例子吧，我們以微信小程序為例，獲取用戶的手機號碼，我們看一下在 uni-app中書寫后編譯運行結(jié)果 以及 在原版微信小程序開發(fā)者工具中的運行結(jié)果；

9.1 uni-app

uni-app中我們聲明了一個 open-type，值為 getPhoneNumber 意思為獲取手機號碼，之后綁定了一個 自定義事件getPhoneNumber 取得點擊時的值并打印，具體代碼如下，：

<!-- 默認(rèn)按鈕組件 -->
<button 
  open-type="getPhoneNumber" 
  @getphonenumber="decryptPhoneNumber">
  獲取用戶手機
</button>

<script>
export default {
	methods: {
		decryptPhoneNumber(e) {
			console.log(e);
		}
	}
};
</script>

執(zhí)行編譯，并運行在微信小程序開發(fā)者工具中，運行路徑如下：運行 -> 運行到小程序模擬器 -> 微信開發(fā)者工具：

點擊按鈕后，成功在控制臺進(jìn)行了打印，打印結(jié)果如下：

從結(jié)果看，確實已經(jīng)編譯成微信小程序?qū)?yīng)的open-type了；

9.2 微信小程序原版

接著，我們看一下在微信小程序中的實現(xiàn)代碼，如下：

<!-- 默認(rèn)按鈕組件 -->
<button 
  open-type="getPhoneNumber" 
  bind:getphonenumber="getPhoneNumber">
  這是一個按鈕
</button>

Page({
  data: {},
  getPhoneNumber(e){
    console.log(e)
  },
})

代碼展示效果如下：

從截圖中的結(jié)果來看，uni-app與微信小程序?qū)崿F(xiàn)的getPhoneNumber效果完全一致；

9.3 代碼對比

為了更好的了解兩者代碼上的書寫差異，我們在對比一下

<!-- uni-app -->
<button 
  open-type="getPhoneNumber" 
  @getphonenumber="decryptPhoneNumber">
  獲取用戶手機
</button>

<!-- 微信小程序 -->
<button 
  open-type="getPhoneNumber" 
  bind:getphonenumber="getPhoneNumber">
  這是一個按鈕
</button>

代碼確實非常接近，最大的區(qū)別就是 自定義事件 了，uni-app中使用的是 Vue的語法綁定的事件，而在微信小程序中則是 原生的bind事件捕捉機制；

9.4 open-type有效值

除了 getPhoneNumber 之外，uni-app還有非常多的 open-type有效值，這些值存在平臺上的一些差異，畢竟不同的平臺API并不是完全一致的，具體如下，就不一一介紹了，有興趣的小伙伴可以挑感興趣的試試：

十. 小結(jié)

本文主要分享了uni-app中內(nèi)置組件button的一些用法，包括 屬性的使用，事件機制 以及 一些開放能力，我們知道button是圖形化界面中的基石之一，它承擔(dān)了用戶與系統(tǒng)之間絕大多數(shù)的交互，隨著時代的發(fā)展，用戶對于界面的要求越來越高，不管是界面的美觀還是交互邏輯的合理性；

在保證界面質(zhì)量的要求下，如何提高開發(fā)效率逐漸成為了開發(fā)的一大難題，時代的答案則是 組件的高度封裝來解決，將常用的功能，屬性統(tǒng)統(tǒng)進(jìn)行封裝，就如同uni-app中的button組件，它內(nèi)置了主題，大小，loading等屬性，在使用的時候簡單的設(shè)置即可完成期望的功能和交互；

(PS：都已經(jīng)看到這里了，點個贊，求個關(guān)注吧，萬分感謝～)文章來源地址http://www.zghlxwxcb.cn/news/detail-785993.html

到了這里，關(guān)于《uni-app》表單組件-Button按鈕的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！