Vue 2.0 기반 모 바 일 팝 업 창(Alert,Confirm,Toast)구성 요 소 를 자세히 설명 합 니 다.

wc-messagebox
vue 2.0 을 기반 으로 개발 한 플러그 인경고,확인,토스트,프롬프트 포함iOS 네 이 티 브 UI 모방(스타일 출처:MUI)약간의 생각
처음에 기 존의 팝 업 창 구성 요 소 를 사용 하려 고 했 는데 한 바퀴 를 찾 아 보 니 적당 한 프로젝트 가 발견 되 지 않 았 기 때문에 스스로 하 나 를 개 발 했 습 니 다.Alert,Comfirm,Toast,Prompt 네 가 지 를 포함 하고 단독으로 도입 할 수 있 습 니 다.
Vue 의 구성 요소 개발 은 실제 적 으로 비교적 간단 하고 관심 이 있 는 것 은 소스 코드 의 실현 을 볼 수 있 으 며 절차 가 뚜렷 하 다.
스타일 에 관 한 문 제 는 MUI(매력 족 이 개발 한)에서 직접 가 져 온 것 으로 iOS 의 효 과 를 모방 한 것 입 니 다.
효과 도

그림 은 움 직 이 는...움 직 이지 않 으 면 돼 요.
Install

npm i wc-messagebox --save

Quick Start

import {Alert, Confirm, Toast} from 'wc-messagebox'
import 'wc-messagebox/style.css'

Vue.use(Alert, options)
Vue.use(Confirm, options)
Vue.use(Toast, options)

Usage

this.$alert(text, options)
options = {
  title: '', //      
  btn: {
    text: '',
    style: {
      'backgroun-color': 'red',
      'font-size': '20px',
      'color': 'blue'
    }
  }
}

this.$confirm(text, options)
options = {
  title: '', //      
  yes: {
    text: '  ',
    style: {}
  },
  no: {
    text: '  ',
    style: {}
  }
}
this.$toast(text, options);
options = {
  position: 'bottom' // 'bottom' | 'center',
  duration: '1500'
}

기타
Alert,Confirm 은 체인 호출 을 지원 하기 위해 Promise 를 되 돌려 줍 니 다.

this.$confirm(text).then(success).catch(fail)

항목 주소
항목 주소
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.