ImgEffect 图片效果

手风琴效果：

• 办公室白领

• 无际大海

• 在希望的田野上

• 都市夜景灯光

• 城市街道

• 葡萄

• 夜景大桥

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

<script>
    export default {
        data() {
              return {
                config:[
                {
                  imgurl:'https://picsum.photos/id/3/650/300',
                  tit:'办公室白领'
                },{
                  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>

显示代码

淡入淡出效果：

水珠

<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:'办公室白领'
                },{
                  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>

显示代码

向左切换效果：

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

<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:'办公室白领'
                },{
                  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>

显示代码

九宫格：

• 桥梁

  

• 大自然山川

  

• 旋转

  

• 秋风扫落叶

  

• 城堡

  

• 木板蔓藤

  

• 会议室

  

• 漂亮花朵

  

• 自行车

  

<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:'办公室白领'
                },{
                  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 属性

参数	说明	类型	可选值	默认值
config	图片配置信息	Object	--	--
effect	图片切换效果	String	accordion,slideleft,change,ninegrid	accordion
height	图片高度	String	--	300px