uniapp 간단한 팝 지정 어셈블리

많은 아니라 축적 된 모든 시간이 혼합 된 안드로이드 앞에서 배운 글, 후자는 점차적으로 기록합니다.

오랜만의 최근 기록, 새로운 uniapp 프로젝트 때문이다. 최근에이 일을합니다.

같은 지혜를 내장 팝 그룹을 읽고, 나는 (간단한 버전)의 전체 세트를 가지고

오늘, 관심 다이 하트 실제로 천 플러그 : http://ext.dcloud.net.cn/plugin?id=672

매우 간단한 구성 요소 기반, 우리는 그것을 살펴

첫째, 쓰기 레이아웃

텍스트 컨테이너의 큰 그림

< 뷰 클래스 = "콘텐츠" > 
        < 뷰 V 쇼 = "isshow" : 스타일 = "{배경 : 컬러}" V-바인딩 : 클래스 = "[activeClass, 애니메이터]" > 
            < 뷰 클래스 = "그림" > < 이미지 클래스 = "아이콘" 모드 = "aspectFit" : SRC = "아이콘" > </ 이미지 > </ 뷰 > 
            < 텍스트 클래스 = "텍스트" : 스타일 = "{색상 : colortext}" >{{내용}} </ 텍스트 > 
        </ 보기 >
    </ 뷰 >

CSS를하지 Tieshanglai은 현기증을 참조하십시오. 당신은보고 다운로드 할 수 있습니다.

두, JS

이 폭탄 윈도우의 종류를 결정하는 데 사용됩니다, 일부 속성을 정의, 어떤 내용의 일부를 표시

수출 기본 { 
        데이터 () { 
            반환 { 
                아이콘 : '', // 아이콘 
                내용 : '', // 콘텐츠 
                색상 : '', // 배경 색상 
                colorText : '', // 텍스트 색상 
                coloricon : '', // 컬러 아이콘 
                isshow : false로 , // 여부 
                activeClass 'mpopup', // 클래스 
                애니메이터 : 'fade_Down' // 애니메이션 클래스 
            } 
        } 
        // 속성을
        소품 : {
             // 어떤 팝의 유형 
            유형 : { 
                유형 : 문자열, 
                : 값 '성공' 
            ,} 
            // 내용 팝업 
            {: 스팬 
                유형 : 문자열, 
                값을 : '이 건배는' 
            } 
            // 경우 쇼 
            쇼 : { 
                유형 : 문자열, 
                값 : '' 
            } 
        } 
        : 계산 { 
            newshow () { 
                반환  은이 하며 .Show 
            } 
        }, 
        {: 시계
            // 입력 값의 속성 변화 모니터링 
            newshow (발) {
                 IF ( '에 해당하는'브로 == ) {
                     이 본 .Open (); // 팝업 표시 
                } 다른 {
                     이 본 .close (); //이 팝업 숨겨 
                } 
            } 
        } 
        의 onLoad () {} 
        방법 { 
            초기화 : 함수 () {
                 이 본 .content = 이 본 .span;
                 // 성공 형 
                IF ( 이 본 .types == '성공'의) {
                     이 .icon = '../../static/images/success.png' ;
                    이 .color = '#의 F0F9EB' ;
                    이 .colortext = '#의 67C23A' ;
                    이 .coloricon = '#의 67C23A' ; 
                } 
                // 警告类型
                경우 ( 이 .types == '경고' ) {
                     이 .icon = '../../static/images/warn.png를' ;
                    이 .color = '# FDF6EC' ;
                    이 .colortext = '#의 E6A23C' ;
                    .coloricon = '#의 E6A23C' ; 
                } 
                // 信息类型
                경우 ( 이 == '정보'.types {)
                     이 .icon = '../../static/images/info.png를' ;
                    이 .color = '#의 EDF2FC' ;
                    이 .colortext = "# 909399 ' ;
                    이 .coloricon = "# 909399 ' ; 
                } 
                // 错误类型
                경우 ( 이 == 'ERR'.types {)
                     이 .icon를 = '../../static/images/err.png' ;
                    .color = '#의 FEF0F0' ;
                    이 .colortext = '#의 F56C6C' ;
                    이 .coloricon = '#의 F56C6C' ; 
                } 
            } 
            오픈 : 함수 () {
                 이 .animator = 'fade_Down'; // 进入动画
                이 .init ();
                이 .isshow = 진정한 ; 
            } 
            닫기 : 함수 () {
                 이 .animator = 'fade_Top'; // 退出动画
            
            } 
        } 
    }

음, 사용하는 방법을 살펴 보자

셋째, 사용

인터페이스 또는 구성 요소의 서두를 사용할 필요가 도입 될 수있다

우리가 제어 할 JS를 사용할 필요가 세 가지 특성이 있으며, 각각의 할당은 너무 복잡

그래서이 방법을 썼다, 각 호출은 같다

내보내기 기본 {
     / * 
    * 설정 팝업 상자 
    * 유형 : 유형 범위 : 두 번째 내용 : 몇 초간의 실종 
    * / 
    setPopup : 기능 (_this, 유형, 범위, SECOND,) {
         IF (_this.ispop = "true로!" ) { 
            _this. 타입 = 유형; 
            _this.span = 폭; 
            _this.ispop = "true로" ; 
            의 setTimeout (() => { 
                _this.ispop = "false로" ; 
            } SECOND) 
        } 
    } 
}

소개 된 두 JS

'@ / 정적 /의 JS / popup.js'에서 수입 팝업;

'../../components/popup/popup.vue'에서 수입 mpopup;

수출 기본 { 
    데이터 () { 
        반환 { 
            ispop : "" // 팝업의 여부 
            유형 : "ERR", // 팝업 유형의 
            범위 : "이 건배"입니다 // 내용 팝업 
            poptime : 2000 
        }; 
    }, 
    구성 요소 : { 
        mpopup 
    }, 
    에 onLoad () {}, 
    메소드 : { 
        POP : 함수 () { 
            Popup.setPopup는 ( 은이 "성공", "안녕하세요, 안녕하세요" 은이 .poptime); 
        }, 
        포프 : 기능 () {
            Popup.setPopup ( 이 "ERR」, 「안녕哈喽" 이 .poptime); 
        } 
        poppp : 함수 () { 
            Popup.setPopup ( 이 , "喽哈안녕하세요", "경고" 이 .poptime)를; 
        }, 
        popppp : 함수 () { 
            Popup.setPopup ( 이 , "정보", "안녕하세요,哈喽" 이 .poptime); 
        } 
    } 
};

레이아웃 :

    < 도면 > 
        < 뷰 클래스 = "BTN" > 
            < 버튼 @click = "팝 ()" >成功</ 버튼 > 
            < 버튼 @click = "POPP ()" >失败</ 버튼 > 
            < 버튼 @click = "poppp () " >警告</ 버튼 > 
            < 버튼 @click ="popppp () " >信息</ 버튼 > 
        </ 뷰 > 
        <mpopup : 쇼 = "ispop": 종류 = "타입" : 스팬 = "스팬" > </ mpopup >     
    </ 뷰 >

이 OK

그 때 아이디어는 오는 구성 요소를 듣기에 속성 값을 변경하려면 공 창을 제어하는 속성을 사용하여 변경할 수 있습니다.

클래스와 시작 및 종료 애니메이션 팝업을 제어하는

GitHub의 주소 : https://github.com/steffenx/uniapp_popup