ustbhuangyi / picker Goto Github PK

 Cannot assign to read only property '__esModule' of #<Object>

//UIPickerView 筛选器组件scss源码
@function h($height,$vh:rem) {
  @return $height/20 +$vh; //常数20是根据当前引入的normalize.css 里的 font: 20px / 1.5
}

.picker {
  display: none;
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-align: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  .picker-mask {
    position: absolute;
    z-index: 500;
    width: 100%;
    height: 100%;
    transition: all .5s;
    -webkit-transition: all .5s;
    background: transparent;
    opacity: 0;
    &.show {
      background: rgba(0, 0, 0, 0.6);
      opacity: 1;
    }
  }
  .picker-panel {
    position: absolute;
    z-index: 600;
    bottom: -100%;
    width: 100%;
    background: #fff;
    transition: all .6s;
    -webkit-transition: all 0.6s;
    &.show {
      bottom:0;
      transform: translateY(0);
      -webkit-transform: translateY(0);
    }
    .picker-choose {
      position: relative;
      height: h(45);
      color: #878787;
      font-size: h(14);
      background-color: #f8f8f8;
      &::after {
        position: absolute;
        content: '';
        width: 100%;
        height: 1px;
        left: 0;
        bottom: 0;
        background-color: #ccc;
        transform: scaleY(.5);
        transform-origin: bottom left;
      }
      .picker-title {
        line-height: h(50);
        font-size: h(19);
        text-align: center;
        color: #333;
        display: none;
      }
      .cancel {
        position: absolute;
        padding: h(10);
        font-size: h(17);
      }
      .confirm {
        position: absolute;
        padding: h(10);
        font-size: h(17);
        right: 0;
        color: #2D72F1;
      }
      .cancel {
        left: 0;
        color: #2D72F1;
      }
    }
    .picker-content {
      position: relative;
      .mask-bottom {
        position: absolute;
        z-index: 10;
        width: 100%;
        height: h(68);
        pointer-events: none;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
      }
      .mask-top {
        position: absolute;
        z-index: 10;
        width: 100%;
        height: h(68);
        pointer-events: none;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        top: 0;
        background: -webkit-gradient(linear, left bottom, left top, from(hsla(0, 0%, 100%, 0.4)), to(hsla(0, 0%, 100%, 0.8)));
        background: -o-linear-gradient(bottom, hsla(0, 0%, 100%, 0.4), hsla(0, 0%, 100%, 0.8));
        &:after {
          content: " ";
          display: block;
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
          border-top: 1px solid #ccc;
          -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
        }
      }
      .mask-bottom {
        bottom: 0;
        background: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, 0.4)), to(hsla(0, 0%, 100%, 0.8)));
        background: -o-linear-gradient(top, hsla(0, 0%, 100%, 0.4), hsla(0, 0%, 100%, 0.8));
        &:before {
          content: " ";
          display: block;
          position: absolute;
          left: 0;
          width: 100%;
          top: 0;
          border-top: 1px solid #ccc;
          -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
        }
      }
    }
    .wheel-wrapper {
      display: -ms-flexbox;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      padding: 0 h(10);
      .wheel {
        -ms-flex: 1 1 1 e-9px;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        -webkit-flex-basis: 1 e-9px;
        flex-basis: 1 e-9px;
        width: 1%;
        height: h(172);
        overflow: hidden;
        font-size: h(21);
        .wheel-scroll {
          margin-top: h(68);
          line-height: h(36);
          .wheel-item {
            height: h(36);
            overflow: hidden;
            white-space: nowrap;
            color: #333;
          }
        }
      }
    }
  }
  .picker-footer {
    height: h(20);
  }
}

希望加入三元运算

例:   <input type="text" id="job" readonly>）

//        JS 获取方法
//        var job = [{text: '国家公务员', value: 1}, {text: '编辑策划', value: 2}, {text: '专业技术', value: 3}, {text: '公司职员', value: 4}, {text: '企业管理', value: 5}, {text: '服务人员', value: 6}, {text: '现役军人', value: 7}, {text: '在读学生', value: 8}, {text: '自由职业', value: 9}, {text: '其他', value: 10}];
//
//        var picker0El = document.getElementById('job');
//        var tag =picker0El.tagName.toLowerCase();
//        var picker0 = new Picker({data: [job]});
//        picker0.on('picker.select', function (selectedVal, selectedIndex) {
//              //判断当前ID元素的tagName，写入对应数据；
//              tag=='input'? picker0El.setAttribute("value",job[selectedIndex[0]].text): nameEl.innerText = job[selectedIndex[0]].text;
//        });
//
//        picker0El.addEventListener('click', function () {
//              picker0.show();//显示UIPickerView 筛选器组件
//        });

//      JQ 获取方法
        $('#job').on('click', function () {
            const $this = $(this);
            const $tag=$this.prop('tagName').toLowerCase();
            const job = [{text: '国家公务员', value: 1}, {text: '编辑策划', value: 2}, {text: '专业技术', value: 3}, {text: '公司职员', value: 4}, {text: '企业管理', value: 5}, {text: '服务人员', value: 6}, {text: '现役军人', value: 7}, {text: '在读学生', value: 8}, {text: '自由职业', value: 9}, {text: '其他', value: 10}];
            const picker0 = new Picker({data: [job]});
            picker0.show();
            picker0.on('picker.select', function (selectedVal, selectedIndex) {
                $tag=='input'?$this.val(job[selectedIndex[0]].text): $this.text(job[selectedIndex[0]].text);
            });
        })


强烈建议：城市联动选择器的调用方法： PickerCity(id);
就是把亲的 "..\picker-master\docs\city\index.js" 用一个函数封装起来，然后调用。
----------------------------------------------------------------
        function PickerCity(id) {
            var idName = id == undefined ? 'city' : id;
            var nameEl = document.getElementById(idName);
            var tag =nameEl.tagName.toLowerCase();
        ……
         picker.on('picker.select', function (selectedVal, selectedIndex) {
             var text1 = first[selectedIndex[0]].text;
             var text2 = second[selectedIndex[1]].text;
             var text3 = third[selectedIndex[2]] ? third[selectedIndex[2]].text : '';
             /*判断当前ID元素的tagName，写入对应数据；*/
             tag=='input'? nameEl.setAttribute("value",text1 + ' ' + text2 + ' ' + text3): nameEl.innerText = text1 + ' ' + text2 + ' ' + text3;
         });
        ……
        
        }
----------------------------------------------------------------

        1. PickerCity() 是调用城市筛选器的函数，默认调用的元素ID为“city”，可以不带ID。
        例： <input type="text" id="city" readonly>
               PickerCity();

        2. 如果默认ID不是“city”，需带参元素ID。
        例： <input type="text" id="currentCity" readonly>
               PickerCity('currentCity');