image-preview-test v1.0.6

图片预览工具

使用

import { NSPreview } from '@nshq/image-preview'

new NSPreview(document.body, {
	images: [],
})

自定义导航

import { NSPreview, NSNavbar } from '@nshq/image-preview'
const navbar = new NSNavbar({
	target: document.querySelector('#navbar'),
	/** 可选- 自定义导航内容和样式 */
	renderNavItem: (index, cur) => {
		const nav = document.createElement('li')
		nav.dataset['nav-index'] = index + ''
		if (index === cur) {
			nav.classList.add('active')
		}
		return nav
	},
})

navbar.on('onNavClick', function (index) {
	console.log(index)
})
new NSPreview(document.body, {
	images: [],
	navbar: navbar,
})

自定义工具栏

import { NSPreview, Toolbar } from '@nshq/image-preview'

function testTool() {
	const tool = document.createElement('div')
	return tool
}
const toolbar = new NSToolbar({
	target: document.querySelector('#toolbar'),
	/** 可选- 自定义导航内容和样式 */
	tools: {
		zoomOut: false,
		rotate: document.querySelector('#rotate'),
		testTool,
	},
})

toolbar.on('testTool', function () {
	console.log('testToolClicked')
})
new NSPreview(document.body, {
	images: [],
	toolbar: toolbar,
})