小程序的input是通過封裝的,封裝後已是塊級元素,而不是原來的行內元素。html
按一向的套路,給input加個label標籤綁定,然而發現並不行。
翻看文檔,發現只能綁定4種控件。。。
那怎麼辦呢,小程序怎麼實現相似label的這種綁定?
還好還好,小程序關上了一扇門,仍是打開了一扇窗!
input控件自帶一個focus
屬性,爲true
時聚焦,false
時失去焦點。詳看小程序input
因此能夠經過給focus綁定一個變量,經過數據驅動來決定是否聚焦。小程序
優勢:更加靈活,不受制於label的限制,只要是能修改到該綁定變量的任何動做,均可以聚焦
缺點:須要js介入,而label標籤不須要函數
文檔中input控件有四個原生事件spa
如今有個需求是將用戶輸入的金額,好比500,失去焦點以後顯示爲¥500,須要用到其中的bindinput
和bindblur
一開始我打算用一個討巧的辦法(不可行),由於看到bindinput
的說明中有一句3d
處理函數能夠直接 return 一個字符串,將替換輸入框的內容
因此我就在bindinput綁定的的方法里加上if(//失去焦點) return '¥'+ e.detail.value
失去焦點變量由bindblur
綁定的方法控制,僞代碼爲:
//記錄失去焦點狀態的變量改爲true //調用bindinput綁定的方法,把event對象傳入
沒錯,並無起做用。。。bindblur
綁定的方法調用不了bindinput
綁定的方法,就好像不能在其餘函數調用生命週期函數同樣code
還好還好,那就別用return了,老老實實經過bindinput
綁定的方法獲取輸入的值記錄下來,bindblur
事件觸發後把記錄下來的值加工,而後把加工後的值傳給和input控件value
屬性綁定的變量。完美!component