快应用悬浮广告组件

<template>
    <div class="float-banner"
        onclick="handleClickImage"
        style="{{`${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:{
        {
            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{
        100%;
        height:100%;
    }
}
</style>



原文地址:https://www.cnblogs.com/guanhuohuo/p/12526145.html