ImgEffect

Accordion effect：

• Office white-collar

• 无际大海

• 在希望的田野上

• 都市夜景灯光

• 城市街道

• 葡萄

• 夜景大桥

<lee-img-effect :config="config"></lee-img-effect>

<script>
    export default {
        data() {
              return {
                config:[
                {
                  imgurl:'https://picsum.photos/id/3/650/300',
                  tit:'Office white-collar'
                },{
                  imgurl:'https://picsum.photos/id/23/650/300',
                  tit:'金属刀叉'
                },{
                  imgurl:'https://picsum.photos/id/33/650/300',
                  tit:'在希望的田野上'
                },{
                  imgurl:'https://picsum.photos/id/43/650/300',
                  tit:'都市夜景灯光'
                },{
                  imgurl:'https://picsum.photos/id/53/650/300',
                  tit:'蓝蓝的天空'
                },{
                  imgurl:'https://picsum.photos/id/63/650/300',
                  tit:'来一杯咖啡呗'
                },{
                  imgurl:'https://picsum.photos/id/73/650/300',
                  tit:'面包的清香'
                }
                ]
              }
          }
    }
</script>

显示代码

Fade in and out effect：

水珠

<lee-img-effect :config="config" effect="change"></lee-img-effect>

<script>
    export default {
        data() {
              return {
                config:[
                {
                  imgurl:'https://picsum.photos/id/3/650/300',
                  tit:'Office white-collar'
                },{
                  imgurl:'https://picsum.photos/id/23/650/300',
                  tit:'金属刀叉'
                },{
                  imgurl:'https://picsum.photos/id/33/650/300',
                  tit:'在希望的田野上'
                },{
                  imgurl:'https://picsum.photos/id/43/650/300',
                  tit:'都市夜景灯光'
                },{
                  imgurl:'https://picsum.photos/id/53/650/300',
                  tit:'蓝蓝的天空'
                },{
                  imgurl:'https://picsum.photos/id/63/650/300',
                  tit:'来一杯咖啡呗'
                },{
                  imgurl:'https://picsum.photos/id/73/650/300',
                  tit:'面包的清香'
                }
                ]
              }
          }
    }
</script>

显示代码

Left and right slider effect：

• 美丽的花朵
• 碧绿的草地
• 森林深处
• 古董车
• 风吹草动
• 一叶孤舟
• 汽车

<lee-img-effect :config="config" effect="slideleft"></lee-img-effect>

<script>
    export default {
        data() {
              return {
                config:[
                {
                  imgurl:'https://picsum.photos/id/3/650/300',
                  tit:'Office white-collar'
                },{
                  imgurl:'https://picsum.photos/id/23/650/300',
                  tit:'金属刀叉'
                },{
                  imgurl:'https://picsum.photos/id/33/650/300',
                  tit:'在希望的田野上'
                },{
                  imgurl:'https://picsum.photos/id/43/650/300',
                  tit:'都市夜景灯光'
                },{
                  imgurl:'https://picsum.photos/id/53/650/300',
                  tit:'蓝蓝的天空'
                },{
                  imgurl:'https://picsum.photos/id/63/650/300',
                  tit:'来一杯咖啡呗'
                },{
                  imgurl:'https://picsum.photos/id/73/650/300',
                  tit:'面包的清香'
                }
                ]
              }
          }
    }
</script>

显示代码

Nine squares Effect：

• 桥梁

  

• 大自然山川

  

• 旋转

  

• 秋风扫落叶

  

• 城堡

  

• 木板蔓藤

  

• 会议室

  

• 漂亮花朵

  

• 自行车

  

<lee-img-effect :config="config" effect="ninegrid"></lee-img-effect>

<script>
    export default {
        data() {
              return {
                config:[
                {
                  imgurl:'https://picsum.photos/id/3/650/300',
                  tit:'Office white-collar'
                },{
                  imgurl:'https://picsum.photos/id/23/650/300',
                  tit:'金属刀叉'
                },{
                  imgurl:'https://picsum.photos/id/33/650/300',
                  tit:'在希望的田野上'
                },{
                  imgurl:'https://picsum.photos/id/43/650/300',
                  tit:'都市夜景灯光'
                },{
                  imgurl:'https://picsum.photos/id/53/650/300',
                  tit:'蓝蓝的天空'
                },{
                  imgurl:'https://picsum.photos/id/63/650/300',
                  tit:'来一杯咖啡呗'
                },{
                  imgurl:'https://picsum.photos/id/73/650/300',
                  tit:'面包的清香'
                }
                ]
              }
          }
    }
</script>

显示代码

ImgEffect Attribute

Parameter	Description	Type	Optional Value	Default Value
config	Img info	Object	--	--
effect	effect	String	accordion,slideleft,change,ninegrid	accordion
height	Img height	String	--	300px