Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

vue-float-preview

This component ONLY supports mouse operations!

A Floating Previewer for Vue.js.

https://www.iwyvi.com/vue-float-preview/

Install

yarn

yarn add vue-float-preview

npm

npm install --save vue-float-preview

Quick Start

import Vue from 'vue';
import VueFloatPreview from 'vue-float-preview';

Vue.use(VueFloatPreview, OPTIONS);
<template>
  <float-preview src="IMAGE_SRC"></float-preview>
</template>

For more information, please refer to Examples.

Document

Attributes

Attribute Description Type Accepted Values Default
src src of the image string - -
thumbSrc src of the thumbnail string - -
disabled whether functions of the component is disabled boolean - false
scale whether scale of image when hovering is enabled boolean - true
thumbSize whether thumbnail fill the block contain / auto contain
show-delay the delay before showing the previewer number - 150
hide-delay the delay before hiding the previewer number - 100
offset-x the X-axis offset of the previewer (should always be positive) number - 40
offset-y the Y-axis offset of the previewer number - -40
content-style CSS style of content object - -
max-width maximum width of the previewer number - -
max-height maximum height of the previewer number - -
width width of the previewer number - -
height height of the previewer number - -
icon-theme theme of icons string light / dark light

Slots

Name Description Optional
default base content (will replace default image block) Y
preview content in previewer (will replace default image block in previewer) Y

Events

Event Name Description Parameters
onPreviewShow triggers when previewer shows -
onPreviewHide triggers when previewer hides -

Global Options

Vue.use(VueFloatPreview, {
  showDelay: 300,
  iconTheme: 'dark'
})

Available options: scale, thumbSize, showDelay, hideDelay, offsetX, offsetY, contentStyle, maxWidth, maxHeight, width, height, iconTheme.

Refers to the document of Attributes.

Development

Setup

Please use yarn to install dependencies.

git clone git@github.com:IwYvI/vue-float-preview.git

# install dependencies
yarn

Build

yarn dist

Start development server

yarn dev

LICENSE

MIT