@tovoo/image
TypeScript icon, indicating that this package has built-in type declarations

0.0.4 • Public • Published

使用组件

$ 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

Package Sidebar

Install

npm i @tovoo/image

Weekly Downloads

8

Version

0.0.4

License

none

Unpacked Size

183 kB

Total Files

257

Last publish

Collaborators

  • tangtutu