iakit

iakit

종속성 미니 구성 요소 라이브러리는 경고, 토스트,로드, 액션 시트와 같이 더 자주 사용되는 구성 요소 만 캡슐화합니다. H5 활성 페이지와 같은 간단한 모바일 프로젝트는 이러한 구성 요소를 사용하기 위해 크고 완전한 UI 라이브러리 및 프레임 워크를 소개 할 필요가 없습니다.

iakit.alert

iakit.loading

iAkit.actionsheet

iakit.ast

용법

모듈 식 방식으로 소개 된 원사/NPM을 사용하여 설치합니다

 $ yarn add iakit

 import * as iakit from 'iakit'
import 'iakit/dist/style.css'

iakit . alert ( '提示' , '测试测试测试测试' )
iakit . loading . show ( )
iakit . actionsheet ( { /* 你的选项 */ } )
iakit . toast . showTop ( '测试测试测试' )

CDN 사용과 같은 파일을 직접 가져올 수도 있습니다.

 < link rel =" stylesheet " href =" https://unpkg.com/[email protected]/dist/style.css " >
< script src =" https://unpkg.com/[email protected]/dist/index.js " > </ script >

< script >
  iakit . alert ( '提示' , '测试测试测试测试' )
  iakit . loading . show ( )
  iakit . actionsheet ( { /* 你的选项 */ } )
  iakit . toast . showTop ( '测试测试测试' )
</ script > 

API

iakit.alert(title, content, buttons)

• 제목 : string , 선택 사항
• 내용 : string , 필수
• 버튼 : array | function , 선택적 (버튼 구조 : {text : string, onclick : function})

 import * as iakit from 'iakit'

// demo 1.
iakit . alert ( '注册失败' , '该邮箱已经被注册，如果有您有任何疑问请咨询客服。' )

// demo 2.
iakit . alert (
  '注册失败' ,
  '该邮箱已经被注册，如果有您有任何疑问请咨询客服。' ,
  [
    { text : '取消' , onClick : ( ) => { } } ,
    { text : '确定' , onClick : ( ) => { } }
  ]
) 

사용자 정의 옵션

• z-index : 페이지에 다른 요소가 있고 계층 구조가 비교적 높으면이 매개 변수를 사용하여 경고 레벨을 조정할 수 있습니다.
• btnText : 기본 버튼 사본은 "OK"이며이 매개 변수를 통해 수정할 수 있습니다.

 iakit . alert . config ( {
  zIndex : 9999 , // alert 的 z-index
  btnText : 'ok' // 默认按钮的文案
} )

iakit.toast.showTop(content, time, callback)

• 내용 : string 필요합니다
• 시간 : number 는 몇 밀리 초, 선택 사항, 기본값은 1500입니다.
• 콜백 : function 사라지는 콜백, 선택 사항을 토스트합니다

 import * as iakit from 'iakit'

// demo 1.
iakit . toast . showTop ( '注册成功' )

// demo 2.
iakit . toast . showCenter ( '注册成功' , 5000 )

// demo 3.
iakit . toast . showBottom ( '注册成功' , ( ) => {
  // do something you want
} )

iakit.loading.show()

 import * as iakit from 'iakit'

iakit . loading . show ( )

setTimeout ( ( ) => {
  iakit . oading . hide ( )
} , 3000 )

iakit.actionsheet(options)

옵션 :

• 제목 : string , 선택 사항
• 옵션 : array 로 작동 할 수있는 옵션, 필수 (옵션 구조 : {텍스트 : 문자열, 비활성화 : 부울, onclick : function})
• DestructiveIndex : number 위험 옵션의 색인, 선택 사항

 import * as iakit from 'iakit'

iakit . actionsheet ( {
  options : [
    {
      text : '我再想想' ,
      disable : false ,
      onClick : ( i , text ) => { }
    } ,
    {
      text : '去它的(disabled)' ,
      disable : true
    } ,
    {
      text : '就这样吧' ,
      onClick : ( i , text ) => {
      }
    }
  ] ,
  destructiveIndex : 2 ,
  title : '确认要分手吗？' ,
  onClick ( i , text ) {
    // 点击了没有指定 onClick 函数的选项时，执行这个函数
  } ,
  onCancel ( ) {
    // 取消了
  }
} ) 

특허

MIT