preliminary/src/common/Picker.vue

<template>
<portal to="notification-outlet">
        <div class="pickerBox" @touchmove.prevent>
            <div class="picker">
                <van-picker :columns="columnsp"
                    :visible-item-count = "5"
                    :swipe-duration = "time"
                    :item-height ="36"
                    @change="changeTemp" />
                <!-- <div class="selected">
                </div> -->
            </div>
          <div class="realSure sure" @click="onConfirm">
            确定
          </div>
        </div>
</portal>
</template>
<script>
export default {
    name:"Picker",
    props: {
      symptomResult:{default:function() {
        return {}
        }},
      defaultIndex:{default:0},
      num:{default:0},
      defaultVal:{default:""},
      columns:{
        default:function() {
          return ['37.0°C', '37.1°C', '37.2°C','37.3°C', '37.4°C', '37.5°C', '37.6°C', '37.7°C', '37.8°C', '37.9°C', '38.0°C',
            '38.1°C', '38.2°C', '38.3°C', '38.4°C', '38.5°C', '38.6C', '38.7°C', '38.8°C', '38.9°C',
            '39.0°C', '39.1°C', '39.2°C', '39.3°C', '39.4°C', '39.5°C', '39.6°C', '39.7°C', '39.8°C',
            '39.9°C', '40.0°C', '40.1°C', '40.2°C', '40.3°C', '40.4°C', '40.5°C', '40.6°C', '40.7°C',
            '40.8°C', '40.9°C', '41.0°C', '41.1°C', '41.2°C', '41.3°C', '41.4°C', '41.5°C', '41.6°C',
            '41.7°C', '41.8°C', '41.9°C', '42.0°C'];
        }
      },
      columnsp:{
        default:function() {
          return ['37.0°C', '37.1°C', '37.2°C','37.3°C', '37.4°C', '37.5°C', '37.6°C', '37.7°C', '37.8°C', '37.9°C', '38.0°C',
            '38.1°C', '38.2°C', '38.3°C', '38.4°C', '38.5°C', '38.6C', '38.7°C', '38.8°C', '38.9°C',
            '39.0°C', '39.1°C', '39.2°C', '39.3°C', '39.4°C', '39.5°C', '39.6°C', '39.7°C', '39.8°C',
            '39.9°C', '40.0°C', '40.1°C', '40.2°C', '40.3°C', '40.4°C', '40.5°C', '40.6°C', '40.7°C',
            '40.8°C', '40.9°C', '41.0°C', '41.1°C', '41.2°C', '41.3°C', '41.4°C', '41.5°C', '41.6°C',
            '41.7°C', '41.8°C', '41.9°C', '42.0°C'];
        }
      }
      },
    data() {
        return {
            time: 100,
            selectIndex: 0,
            selectValue: '',
            selectValuep: '',
        }
    },
    mounted(){
      this.selectValue=this.defaultVal||this.columns[0];
      this.selectValuep=this.defaultVal||this.columnsp[0];
    },
    methods: {
        changeTemp(picker, value, index) {
            this.selectIndex = index;
            this.selectValuep = typeof(value)==="string"?value:value.join("");
            this.selectValue = typeof(value)==="string"?this.columns[index]:value.join("");
        },
        onConfirm() {
            let number = this.num;
            const value = this.selectValue;
            const valuep = this.selectValuep;
            if(+this.symptomResult.flag===1){   //为时间控件
              const orgChoose = this.$store.state.symptom.choose;
              orgChoose[0].special = value;
              orgChoose[0].specialP = valuep;
              this.$store.commit('setChoose', { choose: orgChoose, type: 1 });
            }
            this.$emit('confirm','', {val:value,valp:valuep,flag:this.symptomResult.flag}, ++number)

        },

    }
}
</script>
<style lang="less" scoped>
  @import "../less/base.less";
.pickerBox{
    position: fixed;
    width: 100%;
    height: 5.3rem;
    border-radius: 10px 10px 0 0;
    background: #fff;
    overflow-y: hidden;
    z-index: 99;
    bottom: 0;
    left: 0;
    box-shadow: 0 0 30px -10px rgba(104, 124, 189, 0.25);
    padding-top: 0.28rem;
}
.picker {
    position: relative;
    height: 180px;
}
/deep/.van-picker {
    position: relative;
    overflow-y: hidden;
}
.conBtn{
    height: 44px;
    line-height: 44px;
    background: #5B99EB;
    color: #fff;

    font-size: 16px;
    text-align: center;
    position: absolute;
    bottom: 0rem;
    width: 100%;
}
.selected {
    position: absolute;
    width: 100%;
    height: 36px;
    background: #5B99EB;
    top: 0;
    opacity: .1;
}
.confirm{
    color: #fff;
}
.sure{
  position: absolute;
  bottom: 0;
}
/deep/.van-picker-column__item {
    text-align: center;
    font-size: 14px;
    /*background: #F3F4F6;*/
}
/deep/.van-picker-column__item--selected{
    /*background: #F3F4F6;*/
    font-size: .3rem;
    color: #colors[theme];
}
/deep/van-picker__columns {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    cursor: grab;
}
/deep/.van-picker__mask {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-image: -webkit-linear-gradient(top, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4)), -webkit-linear-gradient(bottom, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4));
    background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4)), linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4));
    background-repeat: no-repeat;
    background-position: top, bottom;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    pointer-events: none;
}
/deep/.van-picker__frame{
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 3;
    width: 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    pointer-events: none;
}
/deep/[class*='van-hairline']::after {
    position: absolute;
    background: #5B99EB;
    opacity: .1;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    border: 0 solid #ebedf0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
}
</style>