msg alert

메시지 경고

간단한 버블 메시지 프롬프트 라이브러리, 단 3kb

Element-ui Message 컴포넌트 모방. 이 컴포넌트를 특히 좋아하지만 Vue.js에만 적용할 수 있기 때문에 네이티브 js를 사용하여 모방했습니다. 100% 동일하다고는 할 수 없지만 반드시 필요합니다. 90% 이상 유사해야 합니다. 최적화할 여지가 있으면 PR을 환영합니다.

설치하다

npm을 사용하세요:

npm install msg-alert --save

CDN 사용:

 < script src =" https://cdn.jsdelivr.net/npm/msg-alert " > </ script > 

사용방법

웨어하우스의 public/index.html을 참고하세요.

ESModule 모듈

 import message from 'msg-alert'
// 使用方法如下浏览器使用示例

CommonJS 모듈

 const message = require ( 'msg-alert' )
// 使用方法如下浏览器使用示例

브라우저에서 사용

 < script src =" https://cdn.jsdelivr.net/npm/msg-alert " > </ script >
< script >
  // 默认 等价 message({type:'info',text:'这是一个段落'})
  message ( '这是一个段落' )
  message . info ( '这是一个段落' )
  // 成功 等价 message({type:'success',text:'success'})
  message . success ( 'success' )
  // 警告 等价 message({type:'warn',text:'warn'})
  message . warn ( 'warn' )
  // 错误 等价 message({type:'error',text:'error'})
  message . error ( 'error' )
</ script > 

옵션 API

message.zIndex

유형: Number

기본값: 1

메시지 표시 수준(전역)

message.destroyAll

유형: Function

모든 메시지를 파기합니다

유형

유형: String

기본값: info

메시지 표시 유형

텍스트

유형: String

기본값: ''

메시지 표시 내용

z인덱스

유형: Number

기본값: 1

메시지 표시 수준(현재 팝업됨)

오프셋

유형: Number

기본값: 20

창 상단의 메시지 오프셋

지속

유형: Number

기본값: 3000

메시지 표시 기간, 절대 닫히지 않으려면 0으로 설정 (단위: 밀리초)

맞춤 클래스

유형: String

기본값: ''

메시지의 클래스 이름 사용자 정의

HTML

유형: Boolean

기본값: false

text 속성을 HTML 조각으로 처리할지 여부 (xss와 같은 처리를 미리 준비하시기 바랍니다)

표시닫기

유형: Boolean

기본값: false

닫기 버튼 표시 여부

닫기

유형: Function

기본값: -

메시지가 닫히기 전 콜백 함수

추가

유형: String | HTMLElement

기본값: document.body

구성 요소의 루트 요소 링크 설정