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

// components/prompt/prompt.jsComponent({ options: {  multipleSlots: true // 在組件定義時(shí)的選項(xiàng)中啟用多slot支持 }, /**  * 組件的屬性列表  */ properties: {  title: {         type: String,     value: '標(biāo)題'    },  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   })  },  /*  * 內(nèi)部私有方法建議以下劃線開頭  * triggerEvent 用于觸發(fā)事件  */  _cancel () {    //觸發(fā)cancel事件，即在外部，在組件上綁定cancel事件即可，bind:cancel，像綁定tap一樣   this.triggerEvent("cancel")  },  _confirm () {   this.triggerEvent("confirm");  },  _input(e){    //將參數(shù)傳出去，這樣在getInput函數(shù)中可以通過e去獲得必要的參數(shù)   this.triggerEvent("getInput",e.detail);     } }})

{ "component": true, "usingComponents": {}}

/* 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;}

 "usingComponents": {  "vas-prompt": "./components/prompt/prompt"  }

<prompt id="prompt"  btn_certain='確定'   bind:getInput="getInput"   bind:cancel="cancel"  bind:confirm="confirm"></prompt><button bindtap="showPrompt">點(diǎn)擊彈出prompt</button>

//在onReady生命周期函數(shù)中，先獲取prompt實(shí)例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(); },