今天發現最近做的手機端頁面 ui 用的cube-ui textarea 輸入內容后點擊鍵盤 完成 不回彈的問題
記錄下來 備忘
<template> <div> <section class="cube-content"> <h2 class="cube-index-list-anchor">財務處理</h2> <div class="scroll-list-wrap"> <cube-scroll ref="scroll"> <section class="anchor"> <p>張小黑:100001ASA1L1</p> <p>參照費用:16800</p> </section> <section class="anchor"> <cube-upload :max="3" action="http://devtbsapp.origimed.com:18081/app/qa/Questions/uploadFiles.json?TOKEN=cdWsYYqJQce9FVmhwNTpcV" :simultaneous-uploads="1" @files-added="filesAdded" @file-success="fileSuccess"/> </section> <section class="anchor"> <cube-input v-model="value" :placeholder="placeholder" @focus="getFocus"></cube-input> </section> <section class="anchor"> <cube-input v-model="pay" :placeholder="pay2" @focus="getFocus"></cube-input> </section> <section class="anchor"> <cube-input v-model="time" :placeholder="time2" :readonly="readonly" @focus="showDateTimePicker"></cube-input> </section> <section class="anchor"> <cube-textarea v-model="text" :maxlength="maxlength" :placeholder="text2" @focus="getFocus"></cube-textarea> </section> <section class="anchor"> <cube-textarea v-model="explain" :maxlength="maxlength" :placeholder="text3" @focus="getFocus"></cube-textarea> </section> <section class="anchor"> <cube-button :primary="true" :disabled="disabledBtn">確定</cube-button> <cube-button class="rback">返回</cube-button> </section> </cube-scroll> </div> </section> </div> </template>
getFocus() { window.addEventListener('focusout', function () { document.body.scrollTop = document.body.scrollHeight; }) },
就是在每個input上綁定個getFocus事件
親試好用 感謝