快应用悬浮广告组件

<template>
    <div class="float-banner"
        onclick="handleClickImage"
        style="{{`width:${width}px;height:${height}px;left:${right!==0&&left===0?'auto':left+'px'};top:${top}px;right:${right}px;`}}">
        <image src="{{imaegUrl}}"></image>
    </div>
</template>
<script>
export default {
    data(){
        return{

        }
    },
    props:{
        width:{
            type:[Number,String],
            default:200
        },
        height:{
            type:[Number,String],
            default:200
        },
        top:{
            type:[Number,String],
            default:800
        },
        left:{
            type:[Number,String],
            default:0
        },
        right:{
            type:[Number,String],
            default:0
        },
        imaegUrl:{
            type:String,
            default:`http://img0.imgtn.bdimg.com/it/u=1655311007,1040851429&fm=26&gp=0.jpg`
        }
    },
    handleClickImage(){
        this.$emit('look')
    }
}
</script>
<style lang="less" scoped>
.float-banner{
    position: fixed;
    image{
        width:100%;
        height:100%;
    }
}
</style>



posted @ 2020-03-17 17:57  guanqinghua  阅读(42)  评论(0编辑  收藏  举报