vue-float-preview
v1.5.2
Published
A Floating Previewer for Vue.js.
Downloads
9
Readme
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 [email protected]:IwYvI/vue-float-preview.git
# install dependencies
yarn
Build
yarn dist
Start development server
yarn dev