使用组件

$ npm i --save @tovoo/image

注意：本组件依赖 viewerjs 库！！！

// vite.main.ts
// 需单独引入 viewerjs 库样式
import 'viewerjs/dist/viewer.min.css';

注册

参考 Ant Design Vue 注册使用方法

如果你使用的 Vite，你可以使用 unplugin-vue-components 来进行按需加载，需要向 plugins 添加以下方法 可实现自动加载组件及对应

import { Image } from '@tovoo/image';
import '@tovoo/image/es/image/style/css'; //vite只能用 @tovoo/image/es 而非 @tovoo/image/lib

或者

向 plugins 添加以下方法 可实现自动加载组件及对应样式

// vite.config.ts
import { defineConfig } from 'vite';
import Components from 'unplugin-vue-components/vite';

import { TovooResolver } from '@tovoo/image/resolver';

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      Components({
        resolvers: [
          TovooResolver(),
        ],
      }),
    ],
  };
});

使用

<!--App.vue-->
<template>
  <TImage
    :preview="true"
    :width="300"
    :height="300"
    :preview-option="{
        toolbar: {
          prev: false,
        },
      }"
    src="https://i03piccdn.sogoucdn.com/1601eb55855f9ad9"
    alt="666"
  />
</template>

全局设置预览参数

// vite.main.ts
import { setPreviewOption } from '@tovoo/image/utils';

// 详细参数见viewerjs文档 https://github.com/fengyuanchen/viewerjs#options
setPreviewOption({
  button: false,
  toolbar: {
    prev: true,
  },
});

属性说明如下：

| 属性 | 说明 | 类型 | 默认值 | | :----- | :----- | :----- | :----- | | preview | 是否开启预览 | boolean | false | | mask | hover时是否显示阴影 | boolean | true | | preview-text | 预览文字（开启mask时显示） | string | 预览 | | width | 图片宽度 | string, number | 300 | | height | 图片高度 | string, number | 300 | | preview-option | 预览参数（优先级高于全局设置），详细参数见viewerjs文档 https://github.com/fengyuanchen/viewerjs#options | object | |