vue尚品汇-carousel轮播图全局组件

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (254)

Mysql (58)

DedeCms (33)

jQuery (67)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

轮播图

打开边栏(ESC) 关闭边栏(ESC)

vue尚品汇-carousel全局组件

如果项目当中出现类似的功能，且重复利用，封装为全局组件----【不封装也可以】,但要有封装的思想
为了封装全局的轮播图组件:让Floor与listContainer组件中的代码一样，如果一样完全可以独立出来封装为一个全局组件。

<template>
  <div class="swiper-container" ref="mySwiper">
    <div class="swiper-wrapper">
//遍历 一个数组list, 这个list数组里的数据取决于 父元素传过来的数据, 其他没太大改动,还是swiper结构
      <div class="swiper-slide" v-for="(carousel, index) in list" :key="carousel.id">
        <img :src="carousel.imgUrl" />
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>
<script>
import Swiper from 'swiper';  // 引入 swiper
export default {
  name: 'Carousel',
  props: ['list'],  //接受父组件传来的数据
    //这个watch对象会对, Floor组件与首页轮播图组件都能生效, 也因此才能封装全局组价
  watch: {
    list: {
      immediate: true,
      // 在new swiper实例之前, 页面中结构必须已经存在
      handler() {
        this.$nextTick(() => {
          // 当执行这个回调的时候: 保证服务器的数据一定回来了(这时候v-for已经执行完毕了)
          var mySwiper = new Swiper(this.$refs.mySwiper, {
            loop: true, // 循环模式选项
            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
              clickable: true
            },
            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
          })
        })
      } } } }
</script>

赏