美文网首页
uniapp input聚焦自动弹出键盘

uniapp input聚焦自动弹出键盘

作者: sunflower_07 | 来源:发表于2020-08-05 14:17 被阅读0次

不能使用v-show 或者display:none;控制

<template>
    <view class="container" >
        <view class="content-box">
          <view class="button-my" @tap="buttonClick">显示</view>
          <input class="uni-input input-my" focus placeholder="自动获得焦点" />
          <view v-if="ifshow">
             <input class="uni-input input-my" focus placeholder="view" />
         </view>
         <!-- <view :class="viewShow=='1'?'show':'hide'">
             <input class="uni-input input-my" focus placeholder="view" />
         </view> -->
        </view>
    </view>
</template>

<script>
export default {
  data() {
    return {
      viewShow:'2',
      ifshow:false

    };
  },
  
  methods: {
      buttonClick(){
          this.viewShow =  '1';
          this.ifshow = !this.ifshow;
      }
  },

  created() {
    
  }
};
</script>

<style lang="scss" >
    .input-my{
        width: 100%;
        height: 50rpx;
        border: 1rpx solid #bbbbbb;
    }
    .button-my{
        display: inline-block;
        padding: 20rpx;
        background-color: aquamarine;
        font-size: 30px;
        text-align: center;
    }
    .show{
        display: block;
    }
    .hide{
        display: none;
    }
</style>

效果图


初始进来input.png
点击显示出发第二个input.png

相关文章

网友评论

      本文标题:uniapp input聚焦自动弹出键盘

      本文链接:https://www.haomeiwen.com/subject/pwonrktx.html