vue2-img-compare 最简单功能强大的图片对比组件

Currently, it is a version of vue 2.0. If you need a version of vue 3.0+TS or react, please refer to issues.

Best Picture Comparison Component.

强大而且简洁，vue3.0+TS版本和react版本需求有了再改版吧

Installation

npm i vue2-img-compare -S
yarn add vue2-img-compare -S

Usage

import Vue from 'vue';
import Vue2ImgCompare from 'vue2-img-compare'
import 'vue2-img-compare/index.css'

Vue.use(Vue2ImgCompare)
new Vue().$mount('#app');

<div id="app">
  <vue2-img-compare
      w="820px"
      h="496"
      picL="https://marcincichocki.github.io/vue-image-compare/img/after.jpg"
      picR="https://marcincichocki.github.io/vue-image-compare/img/before.jpg"
      textL="after"
      textR="before"
    />
</div>

If you are not using using es6, instead of importing add

<script src="/vue2-img-compare/index.umd.js"></script>

just before closing body tag.

Props

Name	Type	Description	Required	Default
w	String or Number	"width" can set number or string(vw or % or px)	Yes	undefined
h	String or Number	"height" can set number or string(vw or % or px)	Yes	undefined
picL	String	Path to the image image after change	Yes	undefined
picR	String	Path to the image image before change	Yes	undefined
textL	String	text in after change	No	null
textR	String	text in before change	No	null

Example:

<vue2-img-compare
      w="820px"
      h="496"
      picL="https://marcincichocki.github.io/vue-image-compare/img/after.jpg"
      picR="https://marcincichocki.github.io/vue-image-compare/img/before.jpg"
      textL="after"
      textR="before"
    />

License

MIT