41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import type { Directive, DirectiveBinding } from 'vue';
|
|
import { useImagePreview } from '../utils/imagePreview';
|
|
|
|
const { previewSingleImage } = useImagePreview();
|
|
|
|
export const previewDirective: Directive = {
|
|
mounted(el: HTMLElement, binding: DirectiveBinding) {
|
|
const imgEl = el.tagName === 'IMG' ? el : el.querySelector('img');
|
|
if (!imgEl) return;
|
|
|
|
const urlList = binding.value?.urlList || [];
|
|
const disabled = binding.value?.disabled || false;
|
|
|
|
if (!disabled) {
|
|
imgEl.style.cursor = 'pointer';
|
|
imgEl.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
const src = (imgEl as HTMLImageElement).src;
|
|
if (urlList.length > 0) {
|
|
const { showImagePreview } = useImagePreview();
|
|
const index = urlList.indexOf(src);
|
|
showImagePreview({
|
|
urlList,
|
|
initialIndex: index >= 0 ? index : 0,
|
|
});
|
|
} else {
|
|
previewSingleImage(src);
|
|
}
|
|
});
|
|
}
|
|
},
|
|
|
|
unmounted(el: HTMLElement) {
|
|
const imgEl = el.tagName === 'IMG' ? el : el.querySelector('img');
|
|
if (!imgEl) return;
|
|
imgEl.removeEventListener('click', () => {});
|
|
},
|
|
};
|
|
|
|
export default previewDirective;
|