ImgContrast 图片对比

人体示例：

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

显示代码

狗狗示例：

<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>

显示代码

绿屏电影拍摄示例1：

<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>

显示代码

绿屏电影拍摄示例2：

<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 属性

参数	说明	类型	可选值	默认值
frontImg	前面图片	String	--	/imgcontrast/1.jpg
backImg	前面图片	String	--	/imgcontrast/2.jpg
direction	滑块方向	String	horizontal,vertical	horizontal
color	滑杆颜色	String	--	#3eaf7c