移动端带有输入框的弹出组件
Posted xjy20170907
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端带有输入框的弹出组件相关的知识,希望对你有一定的参考价值。
<template> <div> <div class="wrap"> <div class="con"> <div class="title center">标题</div> <p class="center"> <input v-model="val" placeholder="请输入" type="text" @blur=‘initScroll‘ ref="inputBox"/> </p> </div> <div class="bottom"> <p @click="callback(‘concel‘)">取消</p> <p @click="callback(‘confirm‘)">确定</p> </div> </div> <div class="mask"></div> </div> </template> <script type="text/javascript"> export default { data() { return { val: ‘‘, } }, created(){ document.body.addEventListener(‘touchmove‘, this.bodyScroll, { passive: false }); }, mounted(){ this.$refs.inputBox.focus(); }, methods: { callback(type){ if(type == ‘confirm‘){ // ... } else { // ... } }, hidePop(){ // 触发父组件的隐藏弹框事件 this.$emit(‘togglePop‘); }, initScroll(){ window.scroll(0, 0); }, bodyScroll(event){ event.preventDefault(); }, }, destroyed(){ document.body.removeEventListener(‘touchmove‘, this.bodyScroll, { passive: false }); } } </script> <style lang="css" scoped> .mask{ z-index: 2; position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.5; background: #000; } .center{ text-align: center; } .wrap{ width: 3.45rem; border-radius: .05rem; z-index: 3; position: fixed; background: #fff; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: .2s ease-out; transition: .2s ease-out; } .con{ padding: 0 .15rem .25rem .15rem; } .title{ color: #000; font-size: .2rem; font-weight: 400; margin: .2rem 0 .2rem 0; } .wrap p input{ width: 3.15rem; height: .4rem; border-radius: .05rem; outline: none; border: 0.5px solid #E5E5E5; font-size: .16rem; color: #000; margin-bottom: .1rem; padding-left: .1rem; } .wrap p input::-webkit-input-placeholder{ font-size: .16rem; color: #999; } .txt{ color: #999; font-size: .12rem; line-height: .17rem; } .bottom{ border-top: 0.5px solid #e6e6e6; display: flex; justify-content: center; } .bottom p{ line-height: .44rem; flex: .5; text-align: center; font-size: .17rem; } .bottom p:first-child{ border-right: 0.5px solid #e6e6e6; color: #999; } .bottom p:last-child{ color: #1E9BFF; } .mint-indicator{ z-index: 10000; } input{ -webkit-appearance: none; } </style>
......
以上是关于移动端带有输入框的弹出组件的主要内容,如果未能解决你的问题,请参考以下文章