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

WeUI 的轻量级 js 封装

function show({list,title="",yes,no,type=0,noTxt='取消', shadeClose=false}={}){
   
    let newNode = window.document.createElement("div"); 
    newNode.id=Number(Math.random().toString().substr(3,length) + Date.now()).toString(36);
    let items='';
    list.forEach((element,index) => {
        items+='<div class="weui-actionsheet__cell" data-index="'+index+'">'+element.text+'</div>';
    });

    let ioshtml=` <div class="weui-mask weui-animate-fade-in" ></div><div class="weui-actionsheet weui-actionsheet_toggle weui-animate-slide-up"  ><div class="weui-actionsheet__title"><p class="weui-actionsheet__title-text">${title}</p></div><div class="weui-actionsheet__menu">${items}</div><div class="weui-actionsheet__action"><div class="weui-actionsheet__cell">${noTxt}</div></div></div>`;
    let android=`<div class="weui-mask"></div><div class="weui-actionsheet"><div class="weui-actionsheet__menu">${items}</div></div>`;
    let innerHtml=``;
    if(type==0){

        //根据浏览器类型变化样式
        var ua = window.navigator.userAgent.toLowerCase();
        if(ua.match(/iphone/i) == 'iphone'){
            innerHtml=ioshtml;
        }else{
            newNode.className="weui-skin_android";
             innerHtml=android;
        }
    }else if(type==1){
        //指定安卓样式
        newNode.className="weui-skin_android";
        innerHtml=android;
    }else{
        //指定苹果类型
        innerHtml=ioshtml;
        
    }
    
   
    newNode.innerHTML = innerHtml;    
    window.document.getElementsByTagName('body')[0].appendChild(newNode);

    //移除
    let remove=function(){
        let doc= window.document.getElementById(newNode.id);
        
        if(doc){
            let up= doc.getElementsByClassName('weui-animate-slide-up');
            let len=up.length;
            if(up.length>0){
                up[0].setAttribute('class','weui-actionsheet weui-actionsheet_toggle weui-animate-slide-down');
            }
            
           
            doc.getElementsByClassName('weui-mask')[0].setAttribute('class','weui-animate-fade-out');
            if(len==0){
                window.document.getElementsByTagName('body')[0].removeChild(doc);
            }else{
                setTimeout(function(){ window.document.getElementsByTagName('body')[0].removeChild(doc);},300);
            }
        }
    }
    
    let baseDiv=window.document.getElementById(newNode.id);

    //注册事件
    let docItems= baseDiv.getElementsByClassName('weui-actionsheet__menu')[0].getElementsByClassName('weui-actionsheet__cell');
    for(let i=0;i<docItems.length;i++){
        docItems[i].addEventListener('click',el=>{
             //回调
            if(yes!=undefined){
                yes(list[ el.currentTarget.dataset.index]);
            }
            //移动弹框
            remove();
        },false);
    }

    
    
    //ios会出现此元素，android不会出现取消这个
    let el=baseDiv.getElementsByClassName('weui-actionsheet__action');
    if(el.length>0){
        el[0].getElementsByClassName('weui-actionsheet__cell')[0].addEventListener('click',function(){
            remove(); 
            if(no!=undefined)
            no();
        },false);
    }

    if(shadeClose==true){
        baseDiv.getElementsByClassName('weui-mask')[0].addEventListener('click',()=>{
            remove();
            if(no!=undefined)
            no();
        },false);
    }
    
   
    let onClose=function(){
        if(baseDiv)
        window.document.getElementsByTagName('body')[0].removeChild(baseDiv);
    }
    return {onClose};
}

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

export {
    install,
    show
};