0.0.4 • Published 11 months ago
@tovoo/image v0.0.4
使用组件
$ 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 |
0.0.3-beta.1
11 months ago
0.0.4
11 months ago
0.0.2-beta.1
11 months ago
0.0.1-beta.7
11 months ago
0.0.1-beta.6
11 months ago
0.0.1-beta.8
11 months ago
0.0.1-beta.10
11 months ago
0.0.1
11 months ago
0.0.3
11 months ago
0.0.2
11 months ago
0.0.1-beta.5
11 months ago
0.0.1-beta.4
11 months ago
0.0.1-beta.3
11 months ago
0.0.1-beta.2
11 months ago
0.0.1-beta.1
11 months ago