vue-weui-expand/src/components/multipicker/multipicker.js

WeUI 的轻量级 js 封装

import {_Substitute} from '../comm/comm.js'
function show({data,setValue=[],yes,no,shadeClose=true}={}){
    let pickteitem=0;
    let options=[]
    pickteitem= data.length;
    for(let i=0;i<pickteitem;i++){
        options=[...options,
            {
                init_location: 102, 
                pull_location_y: 0, 
                styleObject:"transform:translate3d(0px, 102px, 0px);transition:all 0s ease 0s;" 
            }
          ];
    }

     //默认值
    
    for(let i=0;i<setValue.length;i++){
        if(i>data.length-1){
            break;
        }
        let tp=102;
        for(let n=0; n<data[i].length;n++){
            if(setValue[i]==data[i][n].value){
               options[i].styleObject='transform:translate3d(0px, '+tp+'px, 0px);transition:all 0.3s ease 0s';
               options[i].init_location=tp;//记录最后的位置，也是下一次的起始位置
                break;
            }else{
                tp-=34;
            }
        }
    }

    let tpl_itemBaseHtml=`
        <div class="weui-picker__group" data-index="{index}"> 
            <div class="weui-picker__mask" ></div> 
            <div class="weui-picker__indicator"></div> 
            <div class="weui-picker__content" style="{styleObject}">{items}</div> 
        </div>
    `;

    let tpl_itemHtml='<div class="weui-picker__item" >{text}</div>';
    let r_itemHtml='';


    for(let i=0; i<pickteitem;i++){
        let itemsHtml='';
        if(data[i]!=undefined){
            data[i].forEach(el=>{
                itemsHtml+=_Substitute(tpl_itemHtml,{text:el.text});
            });
        }

        let html=_Substitute(tpl_itemBaseHtml,{styleObject:options[i].styleObject,items:itemsHtml,index:i});
        r_itemHtml+=html;

    }

    var innerHtml=`
        <div class="weui-mask weui-animate-fade-in" ></div> 
        <div class="weui-picker weui-animate-slide-up"> 
            <div class="weui-picker__hd"> 
                <a  data-action="cancel" class="weui-picker__action" >取消</a> 
                <a  data-action="select" class="weui-picker__action" >确定</a> 
                </div> 
                <div class="weui-picker__bd">
                    ${r_itemHtml}
                </div> 
        </div>
    `;

    let newNode = window.document.createElement("div"); 
    newNode.id=Number(Math.random().toString().substr(3,length) + Date.now()).toString(36);
    newNode.innerHTML = innerHtml; 
    window.document.getElementsByTagName('body')[0].appendChild(newNode);


    //动态生成document后，给相关的document注册事件
    let group= newNode.getElementsByClassName('weui-picker__group');
    for(let i=0;i<group.length;i++){
        group[i].addEventListener('touchstart',()=>{
            let index=event.currentTarget.dataset.index;
            options[index].pull_location_y=event.touches[0].clientY;
        },false);


        group[i].addEventListener('touchmove',()=>{
            let index=event.currentTarget.dataset.index;
            let tp=event.touches[0].clientY-options[index].pull_location_y+options[index].init_location;
            //下/上拉动的时候，超出列表范围，最多空白34px
            if(tp>136){
              tp=136;
            }
            
            let len= data[index].length;
            if(len>4){
              if(tp<-((len-4+1)*34)){
               tp=-((len-4+1)*34);
              }
            }else{
                if(tp<102-((len)*34)){
                tp=102-((len)*34);
              }
            }
           options[index].styleObject='transform:translate3d(0px, '+tp+'px, 0px);transition:all 0s ease 0s';
           newNode.getElementsByClassName('weui-picker__content')[index].style=options[index].styleObject;

        },false);

        group[i].addEventListener('touchend',()=>{
            let index=event.currentTarget.dataset.index;
            let tp=event.changedTouches[0].clientY-options[index].pull_location_y+options[index].init_location;
            //下/上拉超同列表范围不得超过34px
            if(tp>102){
              tp=102;
            }
     
            let len=  data[index].length;
            if(len>4){
              if(tp<-((len-4)*34)){
               tp=-((len-4)*34);
              }
            }else{
                 if(tp<102-((len-1)*34)){
                  tp=102-((len-1)*34);
    
                 }
            }
          
            //处理必须选中一项
            if(tp%34!=0)
            {
                if(tp%34>17)
                {
                    tp=(parseInt(tp/34+1))*34;
                }else{
                     tp=parseInt(tp/34)*34;
                }
            }
    
    
            //动画
             options[index].styleObject='transform:translate3d(0px, '+tp+'px, 0px);transition:all 0.3s ease 0s';
             newNode.getElementsByClassName('weui-picker__group')[index].getElementsByClassName('weui-picker__content')[0].style=options[index].styleObject;
             options[index].init_location=tp;//记录最后的位置，也是下一次的起始位置
            

        },false);
    }

    let remove=function(){
            let up= newNode.getElementsByClassName('weui-animate-fade-in');
            if(up.length>0){
                up[0].setAttribute('class','weui-mask weui-animate-fade-out');
            }
        
            let down= newNode.getElementsByClassName('weui-animate-slide-up');
            if(down.length>0){
                down[0].setAttribute('class','weui-picker weui-animate-slide-down');
            }
        
            setTimeout(function(){ window.document.getElementsByTagName('body')[0].removeChild(newNode);},300);
    }

    //回调事件注册
    newNode.getElementsByClassName('weui-picker__action')[0].addEventListener('click',()=>{
        remove();
        if(no!=undefined)no();
    },false);
    newNode.getElementsByClassName('weui-mask')[0].addEventListener('click',()=>{
        if(shadeClose){
            remove();
            if(no!=undefined)no();
        }
      
    },false);



    newNode.getElementsByClassName('weui-picker__action')[1].addEventListener('click',()=>{
        let items=[];
        if(data.length>0){
           options.forEach((el,index)=>{
             if(index<data.length){
               let elindex= Math.abs((options[index].init_location-102))/34;
               let item= data[index][elindex];
               items=[...items,item];
             }
         });
        }

        remove();
        if(yes!=undefined)yes(items);
    },false);
   
}

function install(Vue){
    Vue.prototype.multiopicker={show};
}

export {show,install}