yzad

npm install yzad
or
npm install yzad --save
or
yarn add yzad

vue3 使用

<template>
    <AdContainer class="demo-container" v-bind="prop" />
    <div class="ad-acticles-container" v-if="adArticlesProp">
        <div class="acticles-main-container">
            <AdArticlesContainer v-bind="adArticlesProp" />
        </div>
    </div>
</template>

<script setup>
    
    import { ref } from 'vue'
    import { AdContainer, AdArticlesContainer } from 'yzad' // 引入模块
    import 'yzad/yzad.css' // 引入样式

    const adArticlesProp = ref(null)
    
    const fingerprintid = 'test' // 用户指纹id 建议使用 FingerprintJS 生成指纹 或使用已登录用户的ID或UID
    const prop = {

        // ----------
        // 必填参数
        // ----------

        adid: '0001', // 位置ID, 使用广告位中的 uuid 或 adid
        provider: 'h5', // 服务商,投放平台（广告位提供方）例如域名: xx.xxx.xx 也可以是其他中文等字符
        fingerprintid: fingerprintid // 用户指纹id

        // ----------
        // 可选参数及事件
        // ----------
    
        // 自定义拦截点击事件
        , customClicks: true
        // 点击事件
        , onCustomClicks(e, next) {
            // 自定义处理点击事件
            const { type = '', uuid = '', token = '', signature = '', links = [] } = e.detail
            
            // 处理完后, 可以将事件处理还给默认处理器
            next({/**传递给默认处理器的参数 */})
        }

        // 加载成功
        , onSuccess({ adid, provider, fingerprintid, count }) {
            console.log(`载入成功, 位置ID:${adid}, 服务商:${provider}, 用户指纹:${fingerprintid}, 广告条数:${count}`)
        }
        // 加载失败
        , onError(e) { console.log('onError', e.message) }
        // 可见状态
        , onVisible({ active = false, timestamp = Date.now() }) {
            console.log(`可见状态: ${active}, 当前时间: ${timestamp}`)
        }
        // 离开状态
        , onLeave({ start = 0, end = 0, stay = 0 }) {
            console.log(`离开(可视区), 进入时间${start}, 当前时间${end}, 驻足停留:${stay}`)
        }
        // 进入状态
        , onEnter({ start = Date.now(), end = null, stay = null }) {
            console.log(`进入(可视区), 进入时间${start}, 当前时间${end}, 驻足停留:${stay}`)
        }
        // 自定义内容展示, (存在可查看阅读的内容)
        , onArticles({ uuid, token, signature }) {
            // 例如使用默认提供的 AdArticlesContainer 组件展示文章内容
            adArticlesProp.value = { uuid, token, signature }
        }
    }
</script>

<style scoped></style>