解決微信小程序彈出層中input無法聚焦的問題

此處使用的是vant框架

解決聚焦問題

這里遇到的問題是，在點擊搜索框后，設置了彈起的彈出層中van-search 的foucs值為true

但是沒有起到聚焦效果

原因在於彈出框帶有一個動畫效果，需要在動畫效果之后再使focus的值為true才能生效

關鍵代碼如下

<van-search  
          focus="{{isfocus}}"
          model:value="{{ searchValue }}" 
          placeholder="請輸入您要搜索的值" 
          />

js中

 lifetimes: {
    attached: function() {
       setTimeout(()=>{
        this.setData({
          isfocus:true
        })
      },800)
    }
  },

順便記錄下封裝組件遇到的一些問題

需要先將json中設置"component":true

js的Component中設置options 這是為了可以使用父組件中的樣式

 options:{
    styleIsolation:"shared"
  },

當封裝彈出框組件時（vue同樣適用）

子組件設置一個properties接收父組件傳來的值fromparents

再設置一個data:isDialogShow,監測fromparents值的變化並賦值給這個data

不直接賦予是因為properties是單向數據流，只能父組件改變子組件，而不能子組件改變父組件，所以需要一個值作為中間過渡

父組件

html

 <component-popup  binddialogClose="dialogClose" fromparents="{{showDialog}}"/>

主要事件代碼如下

dialogClose(){
    setTimeout(()=>{  //因為動畫原因加的延時
      this.setData({
        showDialog: false
      });
    },500)
  },

子組件

html

<van-popup show="{{ isDialogShow }}" position="bottom" round custom-style="height: 94%;" bind:close="onClose">

js

主要代碼如下

  observers:{
    'fromparents'(){
      this.setData({
        isDialogShow:this.data.fromparents
      })
     if(this.data.showDialog){
        setTimeout(()=>{
          this.setData({
            isfocus:true
          })
        },800)
      } 
    }
  },
 methods:{
    // 關閉彈窗時
    onClose() {
      this.triggerEvent('dialogClose')
    }
  }