A simple image pop-up for keeping image previewing in same ratio

Overview

vue-mobile-image-uncover

The simplest solution for putting varius ratio images, which you don't want to break your layout.

Live Demo

(WIP)

Usage

import { UncoverList, UncoverImage } from 'vue-mobile-image-uncover';

export default {
  ...
  components: {
    UncoverList,
    UncoverImage,
  },
  ...
}

Example

// UncoverList: the relative wrapper, which positioning the image during the animating
<UncoverList>
  <template slot-scope="{ togglePopup }">

    // UncoverImage: set a fixed height for the image in various ratio
    <UncoverImage
      image-url="http://example.com/example.png"
      height="220"
      @pop-image="togglePopup"
    />
  </template>
</UncoverList>
Owner
guAnsunyata
time-traveling spaghetti
guAnsunyata
光年以外 54 Jul 12, 2021
A simple straightforward customizable mobile-friendly image cropper for Vue 2.0.

vue-croppa A simple straightforward customizable mobile-friendly image cropper for Vue 2.0. Features Straightforward: What you see is what you get Hig

Chris Zhan 946 Jul 18, 2021
Mobile-friendly picture file input Vue.js component with image preview, drag and drop, EXIF orientation, and more

vue-picture-input Mobile-friendly picture file input Vue.js component with image preview, drag and drop, EXIF orientation, and more. Installation npm

Alessio Maffeis 864 Jun 4, 2021
The advanced vue cropper library that gives you opportunity to create your own croppers suited for any website design

Documentation / Examples / Sandbox WARNING! If you still use the beta version (< 1.0.0) read the migration guide. ?? HEADS UP! You're currently lookin

null 366 Jul 24, 2021
Toast UI Image Editor for Vue

Vue wrapper for TOAST UI Image Editor This is Vue component wrapping TOAST UI Image Editor. ?? Table of Contents Collect statistics on the use of open

NHN 183 Jul 20, 2021
a vue plugin for image to crop and upload

Vue-Core-Image-Upload a vue plugin for image upload and crop ( Support ?? IE10+) 查看文档 English Document if you use vue.js(<=2.0), you should go here.Or

Vanthink-UED 1.3k Jul 21, 2021
💇‍♀️ A simple and elegant mobile image crop upload component for Vue 2.x | 简洁易用的 vue 移动端图片裁剪上传组件

vue-slim-cropper English | 简体中文 ?? Example Demo Demo Source Code ?? QuickStart Install yarn add vue-slim-cropper # OR npm i -S vue-slim-cropper Import

Komo 34 Jun 21, 2021
Vue wrapper for croppie

#BlackLivesMatter! https://blacklivesmatter.com/ Black Lives Matter Movement Resources VueCroppie VueCroppie is a Vue 2 wrapper for Croppie a beautifu

Joff Tiquez 239 Jul 21, 2021
A simple picture clipping plugin for vue

需要使用外层容器包裹并设置宽高 使用 注意: 需要关掉本地的mock服务, 不然图片转化会报错 组件内使用 import { VueCropper } from 'vue-cropper' components: { VueCropper, }, main.js里面使用 import Vu

goodboy 2.9k Jul 21, 2021
A mobile image cropping upload plugin for Vue----vue的移动端头像裁剪插件

vue-quick-cropper A mobile image cropping upload plugin for Vue. (styles like WeChat, single finger moving two-finger zoom)--vue的移动端图片裁剪上传插件(样式仿照微信,可单

null 36 Feb 24, 2021
A dead-simple gravatar component for VueJS

A dead-simple gravatar component for VueJS

Jiří Chára 109 Apr 4, 2021
A simple drawer component based on Vue.js

Ch-Drawer A simple drawer component based on Vue.js and used on Web docs here Install npm install ch-drawer

Johnny'Boogie'Ness 4 May 3, 2020
A simple tool for cropping images from an URL, your clipboard, or your disk.

It was made as an alternative to Avatar Cropper to better suit my UI tastes and adapt the tool to my needs.

Enzo Innocenzi 14 Jul 19, 2021