All Projects → sangcz → vue-picture-viewer

sangcz / vue-picture-viewer

Licence: MIT license
一款基于Vue2x的图片预览插件

Programming Languages

Vue
7211 projects
javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to vue-picture-viewer

Vue Multiple Page
vue + webpack 多页/单页 脚手架
Stars: ✭ 163 (+918.75%)
Mutual labels:  webpack3
webpack-boilerplate
Webpack 4 boilerplate (babel, eslint, prettier, jest, sass, postcss, hmr, browsersync)
Stars: ✭ 33 (+106.25%)
Mutual labels:  webpack3
webpack-mpvue-startup
A template with webpack 3 + mpvue 1 setup for projects startup
Stars: ✭ 13 (-18.75%)
Mutual labels:  webpack3
Sinn
a blog based on of react,webpack3,dva,redux,material-ui,fetch,generator,markdown,nodejs,koa2,mongoose,docker,shell,and async/await 基于react+koa2技术栈的个人开源博客系统
Stars: ✭ 175 (+993.75%)
Mutual labels:  webpack3
Webpack Book
From apprentice to master (CC BY-NC-ND)
Stars: ✭ 2,372 (+14725%)
Mutual labels:  webpack3
webpack-entry-plus
Generate dynamic webpack bundle output names from known or unknown entry files
Stars: ✭ 24 (+50%)
Mutual labels:  webpack3
Workflow Reactjs
My workflow with ReactJS + Webpack 3+
Stars: ✭ 150 (+837.5%)
Mutual labels:  webpack3
path-replace-loader
Path replace loader for webpack
Stars: ✭ 14 (-12.5%)
Mutual labels:  webpack3
eruda-webpack-plugin
A webpack plugin of eruda to help you develop mobile app
Stars: ✭ 56 (+250%)
Mutual labels:  webpack3
OnlyViewer
A material design picture viewer made with JavaFX and JFoenix. / 用JavaFX编写的Material Design风格的电子图片管理系统
Stars: ✭ 23 (+43.75%)
Mutual labels:  picture-viewer
Webpack By Sample
Learn webpack by sample, each of the samples contains a readme.md file that indicates the purpose of the sample plus an step by step guide to reproduce it.
Stars: ✭ 190 (+1087.5%)
Mutual labels:  webpack3
Eth Hot Wallet
Ethereum wallet with erc20 support / web wallet - built using react, web3, eth-lightwallet
Stars: ✭ 205 (+1181.25%)
Mutual labels:  webpack3
electron-react
A simple and compact boilerplate for electron and react (redux, router)
Stars: ✭ 66 (+312.5%)
Mutual labels:  webpack3
React Blog
personal blog design by react
Stars: ✭ 170 (+962.5%)
Mutual labels:  webpack3
react-typescript
React16 + HMR + typescript + webpack + tslint + tests
Stars: ✭ 21 (+31.25%)
Mutual labels:  webpack3
Weex Start Kit
A weex + vue template to build web/Android/iOS project
Stars: ✭ 155 (+868.75%)
Mutual labels:  webpack3
webpack-starter
A basic setup of webpack goodness. Packed with common fronted workflow to help ease development headache. Ready with development and production config. Feel free to fork and enhance. Have an Awesome frontend coding!
Stars: ✭ 22 (+37.5%)
Mutual labels:  webpack3
webpack-multiple-pages
自由代码分割、react/vue共存、支持高清方案、代码自动校验与格式化
Stars: ✭ 64 (+300%)
Mutual labels:  webpack3
mongo-images
Ever wonder how you can create a full stack reactive application that also saves images? Well look no further! We've got Spring Webflux, Reactive Mongo Streams with GridFS, and Angular5!
Stars: ✭ 12 (-25%)
Mutual labels:  webpack3
vue-number-keyboard
vue-number-keyboard是基于VUE实现的数字键盘插件,当前支持整数、小数数字输入、乱序键盘,demo中给出了常用的验证码、金额数字示例。数字键盘的大小包括字体尺寸支持响应式。
Stars: ✭ 51 (+218.75%)
Mutual labels:  webpack3

vue-picture-viewer

vue-picture-viewer is a picture viewer for Vue.js.

component view

Demo

LiveDemo

Install

$ npm install vue-picture-viewer

Import

Import using module

  // in ES6 modules
  import vuePictureViewer from 'vue-picture-viewer'

  // in CommonJS
  const vuePictureViewer = require('vue-picture-viewer')
  
  Vue.use(vuePictureViewer)

Import using script tag

   <script src="../node_modules/vue-picture-viewer/vue-picture-viewer.js"></script>
   
   // as a component reference
   <vue-picture-viewer></vue-picture-viewer>

Usage

Work on Vue instance

   <vue-picture-viewer :imgData="imgData" :switch="true"></vue-picture-viewer>

Options

props

options type Description Default
imgData Array imgUrl and imgName -
switch Boolean Whether to enable thumbnails true

License

MIT

Copyright (c) 2018-present, Joy Sang

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].