หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

react-zmage

React-Zmage เป็นตัวควบคุมการปรับขนาดภาพที่อิงตามปฏิกิริยา ภาพที่ห่อด้วยแท็ก ZMAGE สามารถปรับขนาดได้ คุณสามารถใช้การควบคุมนี้เพื่อแทนที่แท็ก IMG ดั้งเดิมและรวมฟังก์ชั่นการปรับภาพ

เวอร์ชันตอบสนองจะต้องมากกว่า v16.6.0

การสาธิต

ออนไลน์

https://zmage.caldis.me

ท้องถิ่น 

git clone https://github.com/Caldis/react-zmage
cd react-zmage
npm i
npm run dev

ติดตั้ง 

npm i react-zmage --save

ใช้

1. แนะนำส่วนประกอบ 

 import Zmage from 'react-zmage'

2. แทนที่แท็ก IMG ในหน้าด้วยส่วนประกอบ ZMAGE 

 < img src = "图片源连接" />
? to ?
< Zmage src = "图片源连接" / >
ตอนนี้รูปภาพเหล่านี้สามารถขยายและดูได้!

คุณยังสามารถโทรหารูปภาพผ่านการโทรฟังก์ชั่น 

 // Zmage.browsing 函数接受的参数与 <Zmage/> 组件完全一致
< a onClick = { ( ) => Zmage . browsing ( { src : imagePath } ) } >任意元素</ a >

ใช้ใน typescript 

 import ReactZmage from 'react-zmage' ;

// 在生命周期等方法中使用
public componentDidMount ( ) {
    const zmage = new ReactZmage ( {
        // ...options
    } ) ;
}

// 也支持组件方式使用
public render ( ) : JSX . Element {
    const defaultConfig = {
        src : 'http://zmage.caldis.me/imgSet/childsDream/demo.jpg' ,
        alt : '示例图片' ,
    } ;

    return (
        < ReactZmage
            { ... defaultConfig }
        / >
    ) ;
}

การกำหนดค่าพื้นฐาน

เริ่มต้นตอนนี้ก็เพียงพอแล้วที่คุณเพียงแค่ต้องรู้พารามิเตอร์ต่อไปนี้

สำหรับตัวอย่างออนไลน์ดู https://zmage.caldis.me

  • คุณสมบัติการโทรพื้นฐาน
รายการกำหนดค่า พิมพ์ ค่าเริ่มต้น อธิบาย ตัวอย่าง
src สาย - image url เหมือนกับแอตทริบิวต์ src ของแท็ก img ตัวอย่าง
alt สาย - ข้อความตัวยึดภาพเช่นเดียวกับแอตทริบิวต์ alt ของแท็ก img ตัวอย่าง
set วัตถุ[] - รูปภาพลำดับวัตถุหลายภาพสามารถส่งผ่านใน set เพื่อแสดงภาพหลายภาพในโหมดมุมมองหรือสามารถใช้เพื่อแสดงภาพความละเอียดสูงที่ขยายใหญ่ขึ้น ตัวอย่าง
defaultPage ตัวเลข 0 หาก set ถูกส่งผ่านเพื่อแสดงหลายภาพสามารถใช้เพื่อระบุหน้าเริ่มต้นหลังจากเปิด ตัวอย่าง

การกำหนดค่าขั้นสูง

นอกจากนี้ยังใช้งานง่ายมากโดยไม่ต้องเข้าใจพารามิเตอร์เหล่านี้ แต่ถ้าคุณต้องการการปรับแต่งโดยละเอียดเพิ่มเติมคุณสามารถตรวจสอบเนื้อหาต่อไปนี้เพิ่มเติมได้
  • การกำหนดค่าที่ตั้งไว้ล่วงหน้า (เบต้า)
รายการกำหนดค่า พิมพ์ ค่าเริ่มต้น อธิบาย ตัวอย่าง
preset สาย "อัตโนมัติ" กำหนดค่าฟังก์ชั่นและสไตล์ของอินเทอร์เฟซได้อย่างง่ายดายซึ่งสามารถตั้งค่าเป็น desktop mobile auto ตัวอย่างรายการการกำหนดค่าที่ได้รับผลกระทบ
  • คุณสมบัติควบคุม
รายการกำหนดค่า พิมพ์ ค่าเริ่มต้น อธิบาย ตัวอย่าง
browsing บูลีน ว่างเปล่า ควบคุมว่าจะเข้าสู่โหมดการดู ตัวอย่าง
  • การควบคุมการทำงาน
รายการกำหนดค่า พิมพ์ ค่าเริ่มต้น อธิบาย ตัวอย่าง
controller ตรวจสอบ เดสก์ท็อป | มือถือ ตั้งค่ารายการเฉพาะเป็น false เพื่อซ่อนการควบคุมการทำงานในโหมดมุมมอง ตัวอย่าง
hotKey ตรวจสอบ เดสก์ท็อป | มือถือ ตั้งค่ารายการเฉพาะเป็น false เพื่อปิดการใช้งานปุ่มลัดในโหมดมุมมอง ตัวอย่าง
animate ตรวจสอบ เดสก์ท็อป | มือถือ ผ่านพารามิเตอร์เฉพาะเพื่อระบุภาพเคลื่อนไหวเปิดหน้า (การเรียกดูภาพเคลื่อนไหวไม่สามารถกำหนดค่าได้ในปัจจุบัน) ค่าตัวเลือก ตัวอย่าง
  • รูปแบบการเชื่อมต่อ
รายการกำหนดค่า พิมพ์ ค่าเริ่มต้น อธิบาย ตัวอย่าง
backdrop สาย "#FFFFFF" ควบคุมสีพื้นหลังหลังจากภาพขยาย ตัวอย่าง
zIndex ตัวเลข 1,000 ควบคุม z-index ของภาชนะภายนอกเพื่อป้องกันไม่ให้ถูกบดบังด้วยองค์ประกอบอื่น ๆ ตัวอย่าง
radius ตัวเลข เดสก์ท็อป | มือถือ ควบคุมมุมโค้งมนของภาพในโหมดมุมมอง ตัวอย่าง
edge ตัวเลข เดสก์ท็อป | มือถือ ควบคุมระยะห่างจากขอบของหน้าจอในโหมดมุมมอง ตัวอย่าง
  • วงจรชีวิต
รายการกำหนดค่า พิมพ์ ค่าเริ่มต้น อธิบาย ตัวอย่าง
onBrowsing func (การเรียกดู) => {} วิธี Lifecycle ที่เรียกว่าเมื่อแสดง/ซ่อนจะส่งคืนสถานะการแสดงผล ตัวอย่าง
onZooming func (ซูม) => {} วิธีวงจรชีวิตที่เรียกว่าเมื่อซูมเข้า/ออกจะถูกส่งกลับไปยังสถานะซูม ตัวอย่าง
onSwitching func (เพจ) => {} วิธี Lifecycle ที่เรียกว่าเมื่อเปลี่ยนรูปภาพจะส่งคืนหมายเลขหน้า ตัวอย่าง
onRotating func (deg) => {} วิธีวงจรชีวิตที่เรียกว่าเมื่อหมุนภาพจะกลับมุม ตัวอย่าง

src

 "http://zmage.caldis.me/imgSet/childsDream/demo.jpg"

alt

 "图片的占位文字，作为图片的标题, 请尽量保持简短"

set

 // 如果设置了 Set, 则进入查看模式后第一张图片将会是 set 的首图, 而不是 src
// 如果你需要在查看模式中呈现高精度图片, 可以将其设置为 set 的首图, 或使用 defaultPage 指定
set = { [
    {
        // 图片 Url
        src : "http://zmage.caldis.me/imgSet/childsDream/1.jpg" ,
        // 图片占位文字
        alt : "图片的占位文字，作为图片的标题, 请尽量保持简短" ,
        // 图片样式
        style : { borderRadius : 30 } ,
        // 图片类名
        className : 'testClassName'
    } ,
    {
        // 另一个图片 Url
        src : "http://zmage.caldis.me/imgSet/childsDream/2.jpg" ,
        // 另一段图片占位文字
        alt : "图片的占位文字，作为图片的标题, 请尽量保持简短" ,
    }
] }

defaultPage

set: [
    {
        // 图片 Url
        src : "http://zmage.caldis.me/imgSet/childsDream/1.jpg" ,
        // 图片占位文字
        alt : "图片的占位文字，尽量保持简短，描述图片作用" ,
    }
]

browsing

 browsing = { this . state . contrlledZmageState }

controller

 controller = { {
    // 关闭按钮
    close : true ,
    // 缩放按钮
    zoom : true ,
    // 下载按钮
    download : true ,
    // 旋转按钮
    rotate : true ,
    // 翻页按钮
    flip : true ,
    // 多页指示
    pagination : true ,
} }

hotKey

 hotKey = { {
    // 关闭（ESC）
    close : true ,
    // 缩放（空格）
    zoom : true ,
    // 翻页（左右）
    flip : true ,
} }

animate

 animate = { {
    flip : 'fade' ,
} }

backdrop

 backdrop = "linear-gradient(90deg, rgba(0,212,255,1) 0%, rgba(26,94,215,1) 100%)"

zIndex

 zIndex = { 19260817 }

radius

 radius = { 5 }

edge

 edge = { 20 }

onBrowsing

 onBrowsing = { state => {
    console . info ( "Browsing State: " , state )
} }

onZooming

 onZooming = { state => {
    console . info ( "Zooming State: " , state )
} }

onSwitching

 onSwitching = { page => {
    console . info ( "Switching page: " , page )
} }

onRotating

 onRotating = { deg => {
    console . info ( "Rotating State: " , deg , "deg" )
} }

มีส่วนช่วย

เรายินดีที่จะเปิดตัว PR เพื่อช่วยเราปรับปรุงรหัส หากคุณพบปัญหาใด ๆ เรายังยินดีที่จะเปิดตัวปัญหาเพื่อให้ข้อเสนอแนะเกี่ยวกับความคิดเห็นของคุณ

อ้าง

- [ไอคอนวัสดุ] (https://material.io/tools/icons/)

ใบรับรอง

React-Zmage ขึ้นอยู่กับ MIT ที่ได้รับอนุญาต

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด