快应用悬浮广告组件

最新推荐文章于 2023-12-01 16:14:32 发布

管火火火

最新推荐文章于 2023-12-01 16:14:32 发布

阅读量739

点赞数

分类专栏：快应用

本文链接：https://blog.youkuaiyun.com/weixin_38373875/article/details/104927498

版权

快应用专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了快应用中的悬浮广告组件，包括其工作原理、实现方式以及如何在实际项目中进行集成和优化。通过实例演示，展示了如何创建和配置悬浮广告，同时讨论了如何处理点击事件和适配不同设备，确保用户体验和广告效果的平衡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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