步驟一：新建一個component的文件夾，用來放所有的自定義組件；
步驟二：在該目錄下新建一個prompt的文件夾，用來放prompt組件；
步驟三：右擊–>新建–>component
直接上代碼
wxml
<view class="prompt-box" hidden="{{isHidden}}"> <view class="prompt-content contentFontColor"> <view class="prompt-title">{{title}}</view> <input class="prompt-input" type="digit" bindinput="_input" value="{{cost}}" /> <view class="prompt-btn-group"> <button class="btn-item prompt-cancel-btn contentFontColor" bind:tap="_cancel">{{btn_cancel}}</button> <button class="btn-item prompt-certain-btn" bind:tap="_confirm">{{btn_certain}}</button> </view> </view></view>js
// components/prompt/prompt.jsComponent({ options: { multipleSlots: true // 在組件定義時的選項中啟用多slot支持 }, /** * 組件的屬性列表 */ properties: { title: { type: String, value: '標題' }, btn_cancel: { type: String, value: '取消' }, btn_certain: { type: String, value: '確定' } }, data: { isHidden: true, }, methods: { hidePrompt: function () { this.setData({ isHidden: true }) }, showPrompt () { this.setData({ isHidden: false }) }, /* * 內部私有方法建議以下劃線開頭 * triggerEvent 用于觸發事件 */ _cancel () { //觸發cancel事件，即在外部，在組件上綁定cancel事件即可，bind:cancel，像綁定tap一樣 this.triggerEvent("cancel") }, _confirm () { this.triggerEvent("confirm"); }, _input(e){ //將參數傳出去，這樣在getInput函數中可以通過e去獲得必要的參數 this.triggerEvent("getInput",e.detail); } }})json
{ "component": true, "usingComponents": {}}wxss
/* components/vas-prompt/vas-prompt.wxss */.prompt-box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 11; background: rgba(0, 0, 0, .5);}.prompt-content { position: absolute; left: 50%; top: 40%; width: 80%; max-width: 600rpx; border: 2rpx solid #ccc; border-radius: 10rpx; box-sizing: bordre-box; transform: translate(-50%, -50%); overflow: hidden; background: #fff;}.prompt-title { width: 100%; padding: 20rpx; text-align: center; font-size: 40rpx; border-bottom: 2rpx solid gray;}.prompt-input{ margin: 8%; padding: 10rpx 15rpx; width: 80%; height:85rpx; border: 1px solid #ccc; border-radius: 10rpx;}.prompt-btn-group{ display: flex;}.btn-item { width: 35%; margin-bottom: 20rpx; height: 100rpx; line-height: 100rpx; background-color: white; justify-content: space-around;}.prompt-certain-btn{ color: white; background-color: #4FEBDE;}.prompt-cancel-btn{ border: 1px solid #4FEBDE;}.contentFontColor { color: #868686;}使用
例如，在index.html中使用
在json中添加useComponents屬性
"usingComponents": { "vas-prompt": "./components/prompt/prompt" }wxml
<prompt id="prompt" btn_certain='確定' bind:getInput="getInput" bind:cancel="cancel" bind:confirm="confirm"></prompt><button bindtap="showPrompt">點擊彈出prompt</button>
js
//在onReady生命周期函數中，先獲取prompt實例onReady:function(){ this.prompt = this.selectComponent("#prompt");},//顯示promptshowPrompt:function(){ this.prompt.showPrompt();},//將輸入的value保存起來getInput: function (e) { this.setData({ value: e.detail.value })},confirm: function () { let _cost = this.data.value; if (_cost == '') { console.log('你還未輸入'); return; } else{ .... } }, cancel: function () { this.prompt.hidePrompt(); },原理：
將prompt隱藏起來，點擊顯示的時候則顯示，然后通過原生的tap事件，觸發自定義事件，在使用該組件的時候，則使用自定義事件.
總結
以上所述是小編給大家介紹的微信小程序自定義prompt組件步驟詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VEVB武林網網站的支持！
新聞熱點
疑難解答
