"广告组件"组件:<ad> —— 快应用组件库H-UI

最新推荐文章于 2022-05-09 14:45:30 发布

快应用H-UI

最新推荐文章于 2022-05-09 14:45:30 发布

阅读量416

点赞数

分类专栏：高阶组件

本文链接：https://blog.csdn.net/weixin_41324043/article/details/105309835

版权

高阶组件专栏收录该内容

20 篇文章 0 订阅

订阅专栏

-w538

<import name="ad" src="../Common/ui/h-ui/advance/c_ad"></import>
<template>
        <div class="container">
            <ad data="{{data}}"></ad>
        </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            data:
                [{
                    uri: "/About",
                    title: "广告一的标题",
                    pic: "https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/picture2.png",
                    footword: "8图",
                    footsource: "H-UI"
                },
                {
                    uri: "/About",
                    title: "广告二的标题",
                    pic: "https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/picture3.png",
                    footword: "3图",
                    footsource: "H-UI"
                },
                {
                    uri: "/About",
                    title: "广告三的标题",
                    pic: "https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/picture4.png",
                    footword: "3图",
                    footsource: "H-UI"
                }]
        }
    }
</script>

-w537

<import name="ad" src="../Common/ui/h-ui/advance/c_ad"></import>
<template>
        <div class="container">
            <ad data="{{data}}" width="300" height="200"></ad>
        </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            data:
                [{
                    uri: "/About",
                    title: "广告一的标题",
                    pic: "https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/picture2.png",
                    footword: "8图",
                    footsource: "H-UI"
                },
                {
                    uri: "/About",
                    title: "广告二的标题",
                    pic: "https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/picture3.png",
                    footword: "3图",
                    footsource: "H-UI"
                },
                {
                    uri: "/About",
                    title: "广告三的标题",
                    pic: "https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/picture4.png",
                    footword: "3图",
                    footsource: "H-UI"
                }]
        }
    }
</script>

-w539
-w541
-w537

<import name="ad" src="../Common/ui/h-ui/advance/c_ad"></import>
<template>
        <div class="container-full">
            <ad data="{{data}}" full-width="true" full-height="true"></ad>
        </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            data:
                [{
                    uri: "/About",
                    title: "广告一的标题",
                    pic: "https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/picture2.png",
                    footword: "8图",
                    footsource: "H-UI"
                },
                {
                    uri: "/About",
                    title: "广告二的标题",
                    pic: "https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/picture3.png",
                    footword: "3图",
                    footsource: "H-UI"
                },
                {
                    uri: "/About",
                    title: "广告三的标题",
                    pic: "https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/picture4.png",
                    footword: "3图",
                    footsource: "H-UI"
                }]
        }
    }
</script>

-w537

<import name="ad" src="../Common/ui/h-ui/advance/c_ad"></import>
<template>
        <div class="container">
            <ad data="{{data}}" indicator-selected-color="#ff0000"></ad>
        </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            data:
                [{
                    uri: "/About",
                    title: "广告一的标题",
                    pic: "https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/picture2.png",
                    footword: "8图",
                    footsource: "H-UI"
                },
                {
                    uri: "/About",
                    title: "广告二的标题",
                    pic: "https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/picture3.png",
                    footword: "3图",
                    footsource: "H-UI"
                },
                {
                    uri: "/About",
                    title: "广告三的标题",
                    pic: "https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/picture4.png",
                    footword: "3图",
                    footsource: "H-UI"
                }]
        }
    }
</script>

-w537

<import name="ad" src="../Common/ui/h-ui/advance/c_ad"></import>
<template>
        <div class="container">
            <ad data="{{data}}" autoplay="false"></ad>
        </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            data:
                [{
                    uri: "/About",
                    title: "广告一的标题",
                    pic: "https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/picture2.png",
                    footword: "8图",
                    footsource: "H-UI"
                },
                {
                    uri: "/About",
                    title: "广告二的标题",
                    pic: "https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/picture3.png",
                    footword: "3图",
                    footsource: "H-UI"
                },
                {
                    uri: "/About",
                    title: "广告三的标题",
                    pic: "https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/picture4.png",
                    footword: "3图",
                    footsource: "H-UI"
                }]
        }
    }
</script>

-w537

<import name="ad" src="../Common/ui/h-ui/advance/c_ad"></import>
<template>
        <div class="container">
            <ad data="{{data}}" loop="false"></ad>
        </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            data:
                [{
                    uri: "/About",
                    title: "广告一的标题",
                    pic: "https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/picture2.png",
                    footword: "8图",
                    footsource: "H-UI"
                },
                {
                    uri: "/About",
                    title: "广告二的标题",
                    pic: "https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/picture3.png",
                    footword: "3图",
                    footsource: "H-UI"
                },
                {
                    uri: "/About",
                    title: "广告三的标题",
                    pic: "https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/picture4.png",
                    footword: "3图",
                    footsource: "H-UI"
                }]
        }
    }
</script>

-w537

<import name="ad" src="../Common/ui/h-ui/advance/c_ad"></import>
<template>
        <div class="container">
            <ad data="{{data}}" vertical="true"></ad>
        </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            data:
                [{
                    uri: "/About",
                    title: "广告一的标题",
                    pic: "https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/picture2.png",
                    footword: "8图",
                    footsource: "H-UI"
                },
                {
                    uri: "/About",
                    title: "广告二的标题",
                    pic: "https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/picture3.png",
                    footword: "3图",
                    footsource: "H-UI"
                },
                {
                    uri: "/About",
                    title: "广告三的标题",
                    pic: "https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/picture4.png",
                    footword: "3图",
                    footsource: "H-UI"
                }]
        }
    }
</script>

-w536

<import name="ad" src="../Common/ui/h-ui/advance/c_ad"></import>
<template>
        <div class="container">
            <ad data="{{data}}" indicator="false"></ad>
        </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            data:
                [{
                    uri: "/About",
                    title: "广告一的标题",
                    pic: "https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/picture2.png",
                    footword: "8图",
                    footsource: "H-UI"
                },
                {
                    uri: "/About",
                    title: "广告二的标题",
                    pic: "https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/picture3.png",
                    footword: "3图",
                    footsource: "H-UI"
                },
                {
                    uri: "/About",
                    title: "广告三的标题",
                    pic: "https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/picture4.png",
                    footword: "3图",
                    footsource: "H-UI"
                }]
        }
    }
</script>

扫码体验

-w256

快应用H-UI

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
"广告组件"组件:<ad> —— 快应用组件库H-UI

广告组件<import name="ad" src="../Common/ui/h-ui/advance/c_ad"></import><template> <div class="container"> <ad data="{{list}}"></ad> <...
复制链接

扫一扫