微信小程序 input、textarea 穿透问题

input、 textarea 穿透解决办法

穿透问题复现

弹框穿透，并且可以被点击

解决办法

在 input 聚焦时正常显示， 没有聚焦时使用 view 代替

HTML:

<template>
    <view class="accounts-money-input"
          v-if="!showMoneyInput"
          :style="inputPlaceholderStyle"
          @click="onMoneyFocus">
      {{money ? money : '请输入金额~'}}
    </view>
    <input class="accounts-money-input"
           v-else
           :value="money"
           :focus="showMoneyInput"
           type="digit"
           placeholder="请输入金额~"
           placeholderStyle="color:#D6D6D6"
           @input="onMoneyInput"
           @focus="onMoneyFocus"
           @blur="onMoneyBlur"/>
</template>

JS:

<script>
    export default {
      computed: {
        inputPlaceholderStyle() {
          return this.money ? '' : 'color: #D6D6D6'
        }
      },
      data() {
        return {
          money: '',
          showMoneyInput: false
        }
      },
      methods: {
        onMoneyInput(e) {
          this.money = e.detail.value
        },
        onMoneyFocus() {
          this.showMoneyInput = true
        },
        onMoneyBlur() {
          this.showMoneyInput = false
        }
      }
    }
</script>