当前位置：首页 > VUE

vue实现广告组件

2026-03-08 00:00:10VUE

Vue 广告组件实现方法

基础广告组件实现

创建一个基础的广告组件，可以展示静态或动态广告内容。以下是一个简单的广告组件示例：

<template>
  <div class="ad-container">
    <img v-if="adImage" :src="adImage" alt="Advertisement" />
    <a v-if="adLink" :href="adLink" target="_blank">{{ adText }}</a>
  </div>
</template>

<script>
export default {
  props: {
    adImage: String,
    adLink: String,
    adText: String
  }
}
</script>

<style scoped>
.ad-container {
  border: 1px solid #ddd;
  padding: 10px;
  margin: 10px 0;
  text-align: center;
}
</style>

轮播广告实现

对于需要轮播展示多个广告的场景，可以使用Swiper等库实现：

<template>
  <swiper :options="swiperOptions">
    <swiper-slide v-for="(ad, index) in ads" :key="index">
      <img :src="ad.image" :alt="ad.alt">
      <a :href="ad.link">{{ ad.text }}</a>
    </swiper-slide>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/swiper-bundle.css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      swiperOptions: {
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        loop: true
      },
      ads: [
        { image: '/ad1.jpg', link: '#', text: '广告1', alt: '广告1描述' },
        { image: '/ad2.jpg', link: '#', text: '广告2', alt: '广告2描述' }
      ]
    }
  }
}
</script>

条件性展示广告

根据用户登录状态或其他条件展示不同广告：

<template>
  <div v-if="showAds">
    <ad-component v-for="ad in filteredAds" :key="ad.id" :ad="ad" />
  </div>
</template>

<script>
export default {
  computed: {
    showAds() {
      return !this.$store.state.user.isPremium
    },
    filteredAds() {
      return this.ads.filter(ad => 
        ad.targetAudience.includes(this.$store.state.user.userType)
      )
    }
  }
}
</script>

广告点击统计

添加广告点击统计功能：

<template>
  <a @click="trackClick" :href="ad.link">{{ ad.text }}</a>
</template>

<script>
export default {
  methods: {
    trackClick() {
      this.$http.post('/api/ad/clicks', {
        adId: this.ad.id,
        userId: this.$store.state.user.id,
        timestamp: new Date()
      })
    }
  }
}
</script>

响应式广告

根据屏幕尺寸展示不同广告：

vue实现广告组件

<template>
  <div>
    <img v-if="isMobile" :src="mobileAdImage" alt="Mobile Ad">
    <img v-else :src="desktopAdImage" alt="Desktop Ad">
  </div>
</template>

<script>
export default {
  computed: {
    isMobile() {
      return window.innerWidth < 768
    }
  }
}
</script>