iakit

Iaktit

Perpustakaan komponen mini bebas ketergantungan hanya merangkum komponen yang lebih sering digunakan, seperti peringatan, roti panggang, pemuatan, Actionheet. Proyek seluler sederhana seperti H5 Active Pages tidak harus memperkenalkan pustaka dan kerangka kerja UI yang besar dan lengkap untuk menggunakan komponen -komponen ini.

iaktit.alert

iakit.Loading

iakit.actionsheet

iaktit.toast

Penggunaan

Diinstal menggunakan benang/npm, diperkenalkan secara modular

 $ yarn add iakit

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

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

Anda juga dapat secara langsung mengimpor file, seperti menggunakan 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)

• Judul: string , opsional
• Konten: string , wajib
• Tombol: array | function , opsional (struktur tombol: {text: string, onClick: function})

 import * as iakit from 'iakit'

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

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

Opsi khusus

• z-index : Ketika ada elemen lain di halaman, dan hierarki relatif tinggi, Anda dapat menggunakan parameter ini untuk menyesuaikan level peringatan.
• btnText : Salinan tombol default adalah "OK", yang dapat dimodifikasi melalui parameter ini

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

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

• Konten: string Diperlukan
• Waktu: number menampilkan berapa milidetik, opsional, default adalah 1500
• Callback: function bersulang panggilan balik yang hilang, opsional

 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)

Opsi:

• Judul: string , opsional
• Opsi: Opsi yang dapat dioperasikan dengan array , Diperlukan (Struktur Opsi: {Teks: String, Nonaktifkan: Boolean, OnClick: Function})
• DestructiveIndex: Indeks Opsi Bahaya number , Opsional

 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 ( ) {
    // 取消了
  }
} ) 

Lisensi

Mit