react zmage

React-Zmage

React-Zmage-это элемент управления масштабированием изображений на основе реагирования. Изображение, обертанное тегом Zmage, может быть масштабировано. Вы можете использовать этот элемент управления для замены нативного тега IMG и включить функцию масштабирования изображений.

React версия должна быть больше, чем 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	Нить	""	URL изображения, так же, как атрибут src тега img	Пример
alt	Нить	""	Текст заполнителя изображения, так же, как атрибут alt img -тега	Пример
set	Объект[]	[]	Изображения последовательности, несколько объектов изображения могут быть переданы в set , чтобы отобразить несколько изображений в режиме просмотра или можно использовать для отображения увеличенных изображений высокой четкости	Пример
defaultPage	Число	0	Если set передается для отображения нескольких изображений, его можно использовать для указания страницы по умолчанию после открытия	Пример

Расширенная конфигурация

Он также очень прост в использовании без понимания этих параметров, но если вам нужна более подробная настройка, вы можете дополнительно просмотреть следующий контент

• Предустановленная конфигурация (бета)

Элементы конфигурации	тип	значение по умолчанию	описывать	Пример
preset	Нить	"авто"	Легко настроить функции и стили интерфейса, которые можно установить как mobile auto desktop	Пример влияет на элементы конфигурации

• Контролируемые свойства

Элементы конфигурации	тип	значение по умолчанию	описывать	Пример
browsing	Логический	пустой	Управляет, следует ли вводить режим просмотра	Пример

• Функциональный контроль

Элементы конфигурации	тип	значение по умолчанию	описывать	Пример
controller	Проверять	Настольный компьютер | Мобильный	Установите определенный элемент в false , чтобы скрыть элементы управления операцией в режиме просмотра	Пример
hotKey	Проверять	Настольный компьютер | Мобильный	Установите определенный элемент в false , чтобы отключить клавиши ярлыков в режиме просмотра	Пример
animate	Проверять	Настольный компьютер | Мобильный	Пропустите конкретные параметры для указания страницы поворота анимации (анимация просмотра в настоящее время не настраивается) Необязательное значение	Пример

• Интерфейс стиль

Элементы конфигурации	тип	значение по умолчанию	описывать	Пример
backdrop	Нить	"#Ffffff"	Управляйте цветом фона после увеличения изображения	Пример
zIndex	Число	1000	Управлять z-index внешнего контейнера, чтобы он не был скрыт другими элементами	Пример
radius	Число	Настольный компьютер | Мобильный	Управляйте округленными углами изображения в режиме обзора	Пример
edge	Число	Настольный компьютер | Мобильный	Управляет расстоянием от края экрана в режиме просмотра	Пример

• жизненный цикл

Элементы конфигурации	тип	значение по умолчанию	описывать	Пример
onBrowsing	фанк	(просмотр) => {}	Метод жизненного цикла, вызванный при отображении/скрыте, вернет состояние дисплея	Пример
onZooming	фанк	(Zooming) => {}	Метод жизненного цикла, вызванный при увеличении/выходе, будет возвращен в состояние Zoom	Пример
onSwitching	фанк	(Paging) => {}	Метод жизненного цикла, вызванный при переключении изображений, вернет номер страницы	Пример
onRotating	фанк	(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" )
} } 

способствовать

Мы всегда можем запустить пиар, чтобы помочь нам улучшить код. Если вы найдете какие -либо проблемы, мы также можем запустить проблему, чтобы дать отзыв о вашем мнении.

Цитировать

- [Материальные значки] (https://material.io/tools/icons/)

Сертификат

React-Zmage основан на лицензии MIT