tagger ดาวน์โหลด - ดาวน์โหลดซอร์สโค้ด tagger

tagger

ทรัพยากรอื่นๆ

0.6.2

ดาวน์โหลด

  _____
 |_   _|___ ___ ___ ___ ___
   | | | .'| . | . | -_|  _|
   |_| |__,|_  |_  |___|_|
           |___|___|   version 0.6.2

Tagger: การพึ่งพาศูนย์, Vanilla JavaScript Tag Editor

การสาธิตออนไลน์

การติดตั้ง

 npm install @jcubic/tagger

หรือ

 yarn add @jcubic/tagger

การใช้งาน

 tagger(document.querySelector('[name="tags"]'), {allow_spaces: false});

อินพุตหลายอินพุตสามารถสร้างขึ้นได้โดยการผ่าน nodelist หรืออาร์เรย์ขององค์ประกอบ (เช่น document.querySelectorAll ()) หากมีเพียงองค์ประกอบเดียวที่มีอยู่ในรายการ Tagger จะส่งคืนอินสแตนซ์ของ Tagger อาร์เรย์ของอินสแตนซ์แท็กจะถูกส่งคืนหากจำนวนองค์ประกอบมากกว่า 1

การใช้งานกับ React

Tagger สามารถใช้กับ ReactJs ได้อย่างง่ายดาย

 import { useRef , useState , useEffect } from 'react'
import tagger from '@jcubic/tagger'

const App = ( ) => {
    const [ tags , setTags ] = useState ( [ ] ) ;
    const inputRef = useRef ( null ) ;

    useEffect ( ( ) => {
        const taggerOptions = {
            allow_spaces : true ,
        } ;
        tagger ( inputRef . current , taggerOptions ) ;
        onChange ( ) ;
    } , [ inputRef ] ) ;

    const onChange = ( ) => {
        setTags ( tags_array ( inputRef . current . value ) ) ;
    } ;

    return (
        < div className = "app" >
            < input type = "text" ref = { inputRef } onChange = { onChange } defaultValue = "charles, louis, michel" />
            < br />
            < ul >
                { tags . map ( ( tag , index ) => < li key = { ` ${ tag } - ${ index } ` } > { tag } </ li > ) }
            </ ul >
        </ div >
    )
}

function tags_array ( str ) {
    return str . split ( / s*,s* / ) . filter ( Boolean ) ;
}

export default App

ดูการสาธิตในการดำเนินการเกี่ยวกับ CodePen

API

วิธีการ:

add_tag(string): boolean
remove_tag(string): booelan
complete(string): void

ตัวเลือก:

WRAP (ค่าเริ่มต้นที่ผิดพลาด) อนุญาตให้แท็กห่อลงบนบรรทัดใหม่แทนการเลื่อนล้นล้น
allow_duplicates (ค่าเริ่มต้นเท็จ)
ALLED_SPACES (ค่าเริ่มต้นจริง)
add_on_blur (ค่าเริ่มต้นเท็จ)
เสร็จสิ้น {list: string[] | function(): Promise(string[])|string[], delay: miliseconds, min_length: number}
ฟังก์ชัน ลิงค์ function(name): string|false ควรส่งคืนสิ่งที่ควรอยู่ในแอตทริบิวต์ HREF หรือเท็จ
number TAG_LIMIT (ค่าเริ่มต้น -1) หมายเลขขีด จำกัด ของแท็กเมื่อตั้งค่าเป็น -1 ไม่มีขีด จำกัด
string ตัวยึดตำแหน่ง (ค่าเริ่มต้น UNSET) หากตั้งค่าในตัวเลือกหรือบนอินพุตเริ่มต้นค่าตัวยึดตำแหน่งนี้จะแสดงในอินพุตรายการแท็ก
ฟังก์ชั่น ตัวกรอง function(name): string ควรส่งคืนชื่อแท็กหลังจากใช้ตัวกรองใด ๆ (เช่น String.touppercase ()), สตริงเปล่าเพื่อกรองแท็กและป้องกันการสร้าง