iakit

iAkit

ไลบรารีส่วนประกอบขนาดเล็กที่ปราศจากการพึ่งพาจะห่อหุ้มส่วนประกอบที่ใช้บ่อยกว่าเช่นการแจ้งเตือนขนมปังปิ้ง, โหลด, แอ็คชั่นชีท โครงการมือถือที่เรียบง่ายเช่น H5 Active Pages ไม่จำเป็นต้องแนะนำห้องสมุดและเฟรมเวิร์ก UI ขนาดใหญ่และสมบูรณ์เพื่อใช้ส่วนประกอบเหล่านี้

iAkit.alert

iAkit.loading

iakit.actionsheet

iAkit.toast

การใช้งาน

ติดตั้งโดยใช้เส้นด้าย/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 : การคัดลอกปุ่มเริ่มต้นคือ "ตกลง" ซึ่งสามารถแก้ไขได้ผ่านพารามิเตอร์นี้

 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: ฟังก์ชั่น})
• 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 ( ) {
    // 取消了
  }
} ) 

ใบอนุญาต

มิกซ์