使用组件
$ 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 |