快应用悬浮广告组件

末蓝、 2023-07-16 03:37 3阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，3人围观）

还没有评论，来说两句吧...

相关阅读

相关快应用悬浮广告组件

<template> <div class="float-banner" onclick="handleClickImage"

末蓝、/ 2023年07月16日 03:37/ 0 赞/ 4 阅读

相关快应用信息流列表组件

recommend组件 <import name="com-large" src="./list/large.ux"></import> <import na

淡淡的烟草味﹌/ 2023年07月16日 03:36/ 0 赞/ 32 阅读

相关快应用图文信息流列表组件

<template> <div class="msgList-wrap"> <div if="{ {type==1}}" class="ms

以你之姓@/ 2023年07月16日 03:36/ 0 赞/ 25 阅读

相关快应用商城类列表组件

<template> <div class="shopList-wrap { {(type==3 || type==4 || type == 5) && '

绝地灬酷狼/ 2023年07月16日 03:36/ 0 赞/ 11 阅读

相关快应用全屏广告组件

<template> <div class="banner-page" onclick="handleClose"> <div

╰半橙微兮°/ 2023年07月16日 03:36/ 0 赞/ 18 阅读

相关快应用轮播组件

<template> <div class="carousel-item"> <swiper indicator="false"

╰+哭是因爲堅強的太久メ/ 2023年07月16日 02:32/ 0 赞/ 33 阅读

相关快应用购物列表组件

<template> <div class="product-list"> <div class="list-name" if="{

淩亂°似流年/ 2023年07月16日 02:32/ 0 赞/ 27 阅读

相关 JS+CSS 实现悬浮滚动广告

效果图思路代码效果图： ![这里写图片描述][20160728100844900] 思路：布局一个绝对布局的di

川长思鸟来/ 2022年09月24日 07:25/ 0 赞/ 260 阅读

相关用js完成悬浮广告的完整版

原理就不多说了，跟上篇是一样的，这是这个又加了一个方向而已，下面是代码供大家参考 <!DOCTYPE html> <HTML> <head>

柔情只为你懂/ 2022年08月03日 11:58/ 0 赞/ 186 阅读

相关微信小程序-组件悬浮

字节跳动校招内推码: C4BDSMC 投递链接: https://job.toutiao.com/s/J691fRK 内推交流QQ群：104917572

男娘i/ 2022年05月18日 05:49/ 0 赞/ 423 阅读