DDR爱好者之家 Design By 杰米
如下所示:
我把它写成了组件
主要代码是
document.getElementById(this.FullScreenId).scrollTop = document.getElementById(this.FullScreenId).scrollHeight
我这边把div满屏了看下面css就知道了
你也可以使用body,这个你行百度一下就可以了
注意点是css
/* 页面满屏 */ .pageFullScreen { height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; }
父组件
<style> </style> <template> <div id="testFullScreenId" class="pageFullScreen"> <div style="height: 500px; background-color: #eee;overflow-y: scroll;-webkit-overflow-scrolling: touch;"></div> <inputList type="test" @inputListClick="inputListClick" FullScreenId="testFullScreenId" v-model="inputVal" @inputListFocus="focus" @inputListBlur="blur"></inputList> <br /> <button @click="sub">获取input值</button> <br /> <inputList type="test" @inputListClick="inputListClick" FullScreenId="testFullScreenId" v-model="inputVal" @inputListFocus="focus" @inputListBlur="blur"></inputList> </div> </template> <script> import inputList from '../../components/input' // input export default { components: { inputList }, data() { return { imagesUrl: { // 排版图片使用懒加载 }, inputVal: '' } }, created() { }, mounted() { }, methods: { focus(e) { console.log(e) }, blur(e) { console.log(e) }, inputListClick(e) { console.log(e) }, sub() { alert(this.inputVal) console.log(this.inputVal) } } } </script>
子组件
<style> .inputList {} </style> <template> <!-- 父组件使用v-model发送input事件就可以接收到了 --> <div class="inputList"> <input :type="type" @click="inputListClick($event)" @input="inputListInput($event)" @focus="inputListFocus($event)" @blur="inputListBlur($event)"> </div> </template> <script> export default { name: 'inputList', props: { type: { // 文本框类型 type: String, default: 'text' }, FullScreenId: { // 文本框被键盘遮住 type: String, default: '' } }, data() { return { imagesUrl: { // 排版图片使用懒加载 }, pageHeightOne: '', // 页面高度 pageHeightTow: '' } }, created() { }, mounted() { // window.onresize监听页面高度的变化 window.onresize = () => { return (() => { // window.scroll(0, 0) // 滚到顶部 document.getElementById(this.FullScreenId).scrollTop = document.getElementById(this.FullScreenId).scrollHeight })() } }, methods: { // 键盘输入 inputListInput(e) { if (typeof e.target.value === 'string') { if (/[\u4e00-\u9fa5]/.test(e.target.value)) { e.target.value = '' } else { // console.log('合格') } } else { console.log('数据类型不正确') } this.$emit('input', e.target.value) }, // 获取焦点 inputListFocus(e) { // console.log(e) this.$emit('inputListFocus', 'focus') }, // 失去焦点 inputListBlur(e) { // console.log(e) this.$emit('inputListBlur', 'blur') }, // 点击 inputListClick(e) { this.$emit('inputListClick', 'click') } } } </script>
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年04月20日
2024年04月20日
- 谭咏麟《雾之恋》[Flac][865M]
- 张学友.1991-每天爱你多一些演唱会912CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 许志安.1999-真心真意许志安99演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 许冠杰.1990-许冠杰香港情怀90演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 徐小凤:1989年《新曲与精逊PolyGram宝丽金(T113-01银圈)[WAV整轨]
- RalphTowner拉尔夫·汤纳《AtFirstLight初光》2023[Hi-Res96kHz_24bitFLAC]
- StockfischRecords老虎鱼《TheBassfaceSwingTrioplaysGershwin贝斯脸摇摆三重奏向格什温致敬》
- 李克勤.2008-你的克勤演奏厅3CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 黄凯芹.2002-Long.Time.No.See演唱会3CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 谭咏麟李克勤.2004-左麟右李04开心演唱会3CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 群星《原唱流行经典名曲》5CD[WAV分轨][2.9G]
- 纵贯线《全线通车》[APE/FLAC][365M]
- 乌兰托娅《八月草儿飞HQⅡ》头版限量编号[低速原抓WAV+CUE][585M]
- 达人艺典娜仁其木格《家园》MQA头版限量编号24K金碟[低速原抓WAV+CUE]
- 达人艺典-《琴歌终极版》[MQA头版限量编号24K金碟][低速原抓WAV+CUE]