ImgContrast

Human：

<lee-img-contrast></lee-img-contrast>

显示代码

Dog：

<lee-img-contrast :frontImg="frontDog"  :backImg="backDog"></lee-img-contrast>

<script>
    export default {
        data() {
              return {
              frontDog:'/imgcontrast/dog-before.jpg',
              backDog:'/imgcontrast/dog-after.jpg',
              }
          }
    }
</script>

显示代码

Green screen film one：

<lee-img-contrast :frontImg="frontImg"  :backImg="backImg"  direction="vertical"  color="#fc0"></lee-img-contrast>

<script>
    export default {
        data() {
              return {
              frontImg:'/imgcontrast/before.jpg',
              backImg:'/imgcontrast/after.jpg',
              }
          }
    }
</script>

显示代码

Green screen film two：

<lee-img-contrast :frontImg="frontImg"  :backImg="backImg" color="#f56c6c"></lee-img-contrast>

<script>
    export default {
        data() {
              return {
              frontImg:'/imgcontrast/VFX2-before.jpg',
              backImg:'/imgcontrast/VFX2-after.jpg',
              }
          }
    }
</script>

显示代码

ImgContrast Attribute

Parameter	Description	Type	Optional Value	Default Value
frontImg	front Img	String	--	/imgcontrast/1.jpg
backImg	back Img	String	--	/imgcontrast/2.jpg
direction	Slide direction	String	horizontal,vertical	horizontal
color	SlideBar color	String	--	#3eaf7c