Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Type of $viewer property #340

Open
panknows opened this issue Aug 14, 2024 · 1 comment
Open

Type of $viewer property #340

panknows opened this issue Aug 14, 2024 · 1 comment

Comments

@panknows
Copy link

panknows commented Aug 14, 2024

I have the following component code

<template>
  <div ref="rootEl" v-viewer="options">
    <slot />
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import Viewer from "viewerjs";

const rootEl = ref<
  | null
  | (HTMLDivElement & {
      $viewer: InstanceType<typeof Viewer>;
    })
>(null);
const viewerInstance = computed(() => {
  return rootEl.value ? rootEl.value.$viewer : null;
});

const options: Viewer.Options = {
  className: "v-viewer-wrapper",
  title: false,
  navbar: false,
  transition: false,
  toolbar: {
    download: {
      show: 4,
      size: "large",
      click: () => {
        const viewer = viewerInstance.value;
        const a = document.createElement("a");
        a.href = viewer?.image.src;
        a.target = "_blank";
        a.download = viewer?.image.alt;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      },
    },
  },
};
</script>

And I have ts error when I try read properties of Viewer instance $viewer of the html node
Vue: Property image does not exist on type

image

How can I resolve this issue?

@mirari
Copy link
Owner

mirari commented Aug 14, 2024

It seems that viewerjs did not add this prop in the declaration file.
If you ignore this error, the code should execute normally, right?
You might need to manually force assert this image object.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants