时间控件+弹窗demo

src/common/PickTime.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="toast-wrap">
-    <p v-show="val" :class="['tab',{'check':val != '请选择'}]" @click="showPicker">{{val}}</p>
+    <p v-show="val" :class="['ptab',{'check':val != '请选择'}]" @click="showPicker">{{val}}</p>
     <p v-show="val != '请选择'" class="tip">点击可修改</p>
-    <div class="content" v-show="show">
+    <div class="content pc" v-show="show">
       <van-picker
         :columns="columns"
         :visible-item-count='3'
@@ -44,9 +44,21 @@
         show:false
       }
     },
-    props:['item'],
+    props:['item','outBoxClass'],
     methods: {
       showPicker(){
+        const winH = $(window).height();
+        // outBoxClass 外层盒子的类名，用以获取高度
+        const HH = $("."+this.outBoxClass).height();
+        const pH = $('.ptab').offset().top;//时间组件距离顶部的高度
+        const btH = winH - pH;console.log("可视区高度：",winH,"时间距顶部的高度：",pH,"差值:",winH-pH) //距离底部的距离
+        // 如果底部距离小于弹窗的高度227px + 44，就显示在上方，否则显示下方
+        // ios和华为底部会有浏览器自带的箭头，故多减30
+        if(btH < 271){
+          $('.pc').css('bottom','.88rem'); 
+        }else{
+          $('.pc').css('top','.88rem')
+        }
         this.show = true;
         this.$emit('forbidS'); //禁止滚动
       },
@@ -58,7 +70,8 @@
         this.show = false;
         const newData = Object.assign({},this.item,{value:this.val,valueP:this.val});
         this.$emit("updata",newData);
-        this.$emit('resetS'); //恢复滚动
+        const pH = $('.ptab').offset().top;//恢复滚动的位置
+        this.$emit('resetS',pH); //恢复滚动
       },
     }
   };
@@ -68,7 +81,8 @@
   .toast-wrap{
     margin-bottom: .2rem;
     position: relative;
-    .tab{
+    z-index: 116;
+    .ptab{
       width:100%;
       height: .8rem;
       line-height: .8rem;
@@ -78,21 +92,23 @@
       color:#7C828E;
     }
     .content{
+      box-sizing: border-box;
       padding-top: 25px;
       width: 100%;
       height: 227px;
       background: #fff;
       z-index: 999;
       position: absolute;
-      top:.88rem;
+      // top:.88rem;
       left: 50%;
       transform: translateX(-50%);
       box-sizing: border-box;
-      border-radius: .2rem;
+      border-radius: .1rem;
       z-index: 1000;
       font-size: .3rem;
       overflow-y: hidden;
       box-shadow: 0 .12rem .24rem 0 rgba(79,129,255,0.40);
+      // box-shadow:0 .15rem .35rem 0 rgba(179,196,236,0.3);
       .confBtn{
         height: 44px;
         line-height: 44px;

src/components/AddContent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="symp-wrap addper btscroll">
+  <div class="addc-wrap addper btscroll">
     <div class="content">
         <div class="choose">
         <ul class="addPart">
@@ -35,6 +35,14 @@
                 @updata="updataData($event,index,item)"
               ></MultiLineInput>
             </template>
+            <!-- 时间控件 -->
+            <PickTime v-if="item.controlType==9"
+              :item="item"
+              :key="item.id"
+              outBoxClass="addc-wrap"
+              @forbidS="destyScroll" 
+              @resetS="resetScroll"
+              @updata="updataData($event,idx,item)"/>
           </li>
         </ul>
         <div class="result" v-if="allStr">
@@ -62,6 +70,7 @@ import Radio from '../common/Radio.vue';
 import CheckBox from '../common/CheckBox.vue';
 import {imageUrlPrefix,getAllStr,setScroll} from '@utils/tools.js';
 import BScroll from 'better-scroll';
+import PickTime from '../common/PickTime.vue';
 export default {
   name: 'AddContent',
   props: ['allMoudles','preName'],
@@ -86,6 +95,18 @@ export default {
     })
   },
   methods: {
+    // 点击时间控件时 先销毁再重新建立
+      destyScroll(){
+        this.scroll.destroy();
+      },
+      resetScroll(){
+        setTimeout(() => {
+          let scroll = setScroll(BScroll,true,'.addper')
+          this.scroll = scroll
+          scroll.on('scroll', this.onScroll);
+          scroll.scrollTo(0,scrollH+'px');
+        }, 400);
+      },
     onScroll(data) {
       this.$store.commit('setScroll', data)
       document.activeElement.scrollIntoViewIfNeeded(true);        
@@ -137,7 +158,8 @@ export default {
     MultiLineInput,
     Input,
     Radio,
-    CheckBox
+    CheckBox,
+    PickTime
   }
 }
 </script>
@@ -146,7 +168,7 @@ export default {
 .questionImg {
   width: 100%;
 }
-.symp-wrap {
+.addc-wrap {
   font-size: 0.3rem;
   overflow: hidden;
   .content {

src/components/Detail.vue

@@ -40,7 +40,8 @@
               @updata="updataData" 
               @forbidS="forbid" 
               @resetS="regain" 
-              :item="item"/>
+              :item="item"
+              outBoxClass="detail-wrap"/>
     </div>
   </div>
 </template>
@@ -80,8 +81,8 @@ import {patt,trimDots,imageUrlPrefix} from '@utils/tools.js'
       forbid(){
         this.$emit('destyS')
       },
-      regain(){//恢复滚动
-        this.$emit('resetS')
+      regain(HH){//恢复滚动
+        this.$emit('resetS',HH)
       },
       updataData(data,item){
         const origMapping = this.datas.questionMapping;

src/components/DetailBox.vue

@@ -11,7 +11,7 @@
                   @check="changeCheck($event)"
                   @checkReq="changeFins($event)"
                   @destyS="destyScroll"
-                  @resetS="resetScroll"/>
+                  @resetS="resetScroll($event)"/>
         </div>
         <!-- <div class="foot" @click="complete">完成</div> -->
       </div>
@@ -19,7 +19,7 @@
         <span class="icon" @click="close">
           <img src="../images/small-close.png">
         </span>
-        <span class="name">{{(privateData.description ||privateData.name)+'详情'}}</span>
+        <span class="name" @click="showPicker">{{(privateData.description ||privateData.name)+'详情'}}</span>
         <span @click="handleClear" :class="{'check':checkF}">清空</span>
         <i>{{tips}}</i>
       </div>
@@ -30,6 +30,7 @@
           :show="showToast"
           @comfirn="comfirnDel" 
           @cancel="cancelDel"/>
+    <Picker :show="showPic" />
   </portal>
 </template>
 <script type="text/javascript">
@@ -80,11 +81,12 @@
       destyScroll(){
         this.scroll.destroy();
       },
-      resetScroll(){
+      resetScroll(scrollH){
         setTimeout(() => {
           let scroll = setScroll(BScroll,true,'.viewPrew')
           this.scroll = scroll
-          scroll.on('scroll', this.onScroll)
+          scroll.on('scroll', this.onScroll);
+          scroll.scrollTo(0,scrollH+'px');
         }, 400);
       },
       onScroll(data) {
@@ -155,6 +157,9 @@
         }
         
       },
+      showPicker(){
+        this.showPic = true;
+      },
       hidePic(){
         this.showPic = false;
       },

src/components/DiagTreat.vue

@@ -45,6 +45,14 @@
               @updata="updataData($event,it.id,i,index)"
             ></MultiLineInput>
         </template>
+        <!-- 时间控件 -->
+        <PickTime v-if="it.controlType==9"
+            :item="it"
+            :key="it.id"
+            outBoxClass="treat-wrap"
+            @forbidS="destyScroll" 
+            @resetS="resetScroll"
+            @updata="updataData($event,it.id,i)"/>
       </div>
       <div class="result" v-if="getText()">
         <p class="title">{{datas.name}}</p>
@@ -73,6 +81,7 @@
   import CheckBox from '../common/CheckBox.vue';
   import BScroll from 'better-scroll';
   import MultiLineInput from '../common/MultiLineInput.vue';
+  import PickTime from '../common/PickTime.vue';
   export default {
     name:'DiagTreat',
     data(){
@@ -99,6 +108,18 @@
       })
     },
     methods:{
+      // 点击时间控件时 先销毁再重新建立
+      destyScroll(){
+        this.scroll.destroy();
+      },
+      resetScroll(scrollH){
+        setTimeout(() => {
+          let scroll = setScroll(BScroll,true,'.treatper')
+          this.scroll = scroll
+          scroll.on('scroll', this.onScroll);
+          scroll.scrollTo(0,scrollH+'px');
+        }, 400);
+      },
       onScroll(data) {
         this.$store.commit('setScroll', data);
         document.activeElement.scrollIntoViewIfNeeded(true);
@@ -168,7 +189,8 @@
       ComTextArea,
       Radio,
       CheckBox,
-      MultiLineInput
+      MultiLineInput,
+      PickTime
     },
     computed:{
       getItem(){

src/components/Others.vue

@@ -40,6 +40,14 @@
               @updata="updataData($event,it.id,i,index)"
             ></MultiLineInput>
         </template>
+        <!-- 时间控件 -->
+        <PickTime v-if="it.controlType==9"
+            :item="it"
+            :key="it.id"
+            outBoxClass="other-wrap"
+            @forbidS="destyScroll" 
+            @resetS="resetScroll($event)"
+            @updata="updataData($event,it.id,i)"/>
       </div>
       <div class="result" v-if="getText()">
         <p class="title">{{datas.name}}</p>
@@ -68,6 +76,7 @@
   import CheckBox from '../common/CheckBox.vue';
   import MultiLineInput from '../common/MultiLineInput.vue';
   import BScroll from 'better-scroll';
+  import PickTime from '../common/PickTime.vue';
   export default {
     name:'Others',
     data(){
@@ -93,6 +102,18 @@
       })
     },
     methods:{
+      // 点击时间控件时 先销毁再重新建立
+      destyScroll(){
+        this.scroll.destroy();
+      },
+      resetScroll(scrollH){
+        setTimeout(() => {
+          let scroll = setScroll(BScroll,true,'.otherper')
+          this.scroll = scroll
+          scroll.on('scroll', this.onScroll);
+          scroll.scrollTo(0,scrollH+'px'); //解决选择完时间后滚动从头开始的问题
+        }, 400);
+      },
       onScroll(data) {
         this.$store.commit('setScroll', data)
         document.activeElement.scrollIntoViewIfNeeded(true);
@@ -164,7 +185,8 @@
       ComTextArea,
       Radio,
       CheckBox,
-      MultiLineInput
+      MultiLineInput,
+      PickTime
     },
     computed:{
       getItem(){