美文网首页
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