vue3.0 + ts 使用viewerjs 图片放大预览插件

前端时间vue3.0正式发布了，于是就尝试把原有项目重构一下，结合typescript重构项目，总体上还是很容易上手的，就是在集成一些老的插件方面遇到一些问题，比如viewerjs，想和一些新手的兄弟们一起分享一下经验；

首先，安装viewerjs

npm install viewerjs --save

viewerjs已经集成好了ts的类型定义文件，我们不需要单独安装，只是在使用时候需要注意

一、全局引入

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';
Viewer.setDefaults({
  navbar: true,
  title: true,
  toolbar: {
    prev: true,
    next: true,
  },
});
const Vue = createApp(App);
Vue.use(router);
Vue.use(() => Viewer); //这样引入是为了兼容ts规定的类型，不用箭头函数方式会报错Argument of type 'typeof Viewer' is not assignable to parameter of type 'Plugin_2'.Property 'install' is missing in type 'typeof Viewer' but required in type '{ install: PluginInstallFunction; }'
Vue.mount('#app');

然而引入不报错了，却不能使用，这里如果那位大神解决了，烦劳告诉我一下解决办法；
索性我们还是局部引入吧，毕竟也不是每个组件都能用到，于是放弃了在main.ts中使用；

二、局部引入，这次成功了

按照vue2的引入方式，结果凉凉了

<template>
  <div class="home images" id="viewerjs">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
    <img alt="Vue logo" src="../assets/logo.png" />
    <img alt="Vue logo" src="../assets/logo.png" />
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';
export default defineComponent({
  name: 'Home',
  components: {
    HelloWorld,
  },
  setup() {
    onMounted(() => {
      const aaaa = document.getElementById('viewerjs')
      new Viewer(~~aaaa~~, { // ts类型报错 Argument of type 'HTMLElement | null' is not assignable to parameter of type 'HTMLElement'.Type 'null' is not assignable to type 'HTMLElement'
        navbar: true,
        title: true,
        toolbar: {
          prev: true,
          next: true,
        },
      });
    });
  },
});
</script>

这个错误解释就是，Viewer需要传入的类型是HTMLElement，而aaa被推断的类型的一个'HTMLElement | null'的联合类型，所以不正确，那么实际上我们知道aaa就是一个HTMLElement类型所以可以使用类型断言的方式，强制让ts知道aaa的类型，于是解决了；

 const aaa = <HTMLElement>document.getElementById('viewerjs')
 //或者
 const aaa = document.getElementById('viewerjs') as HTMLElement
 

上述两者都可以二选一，然后完美解决，附上全部代码；

<template>
  <div class="home images" id="viewerjs">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
    <img alt="Vue logo" src="../assets/logo.png" />
    <img alt="Vue logo" src="../assets/logo.png" />
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';
export default defineComponent({
  name: 'Home',
  components: {
    HelloWorld,
  },
  setup() {
    onMounted(() => {
      new Viewer(document.getElementById('viewerjs') as HTMLElement, {
        navbar: true,
        title: true,
        toolbar: {
          prev: true,
          next: true,
        },
      });
    });
  },
});
</script>

微信截图_20201110153916.png