在swiperOption中配置

navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
}

更改按钮的背景图片

.swiper-button-prev{
    background: url("/src/img/left.png") !important;
}
.swiper-button-next{
    background: url("/src/img/right.png") !important;
}

swiper滑动导航栏

import { swiper, swiperSlide } from "vue-awesome-swiper";

export default {
  data: function() {
    return {
      swiperOption: {
        slidesPerView: 7, //一次滑动一组，一组7个slide
        autoplay: 3000,
        direction: "horizontal", 
        setWrapperSize: true, 
        autoHeight: true,     //true时，自动计算slide元素的宽的总和并应用到祖先元素上
        paginationClickable: true, //true时，自动计算slide元素的高的总和并应用到祖先元素上
        observeParents: true 
      }
    };
  },
  components: {
    swiper,
    swiperSlide
  }
};

.swiper-container {
    background: rgb(231, 231, 231);

    .swiper-wrapper {
        border-top: 1px solid #e1e1e1;
        border-bottom: 1px solid #e1e1e1;

        .swiper-slide {
            padding-top: 10px;
            padding-bottom: 10px;
            text-align: center;

            a {
                color: rgb(58, 58, 58);
                font-size: 1.3em;
            }
        }
    }
}

导航栏点击变色

导航栏是滑动一次，移动一组，无法为被选中的项设置背景色，但可以通过获取swiper对象的属性得到它的各个slide项来设置背景色

    {{item.linkName}} 

在vue的methods的某个方法中为被点击的slide增加className

if (click) {
    var aa = self.$refs.mySwiper.swiper.slides; //mySwiper得到swiper所在的组件，swiper得到swiper插件
    for (var i = 0; i < aa.length; i++) {
        console.log(aa[i]);
        self.removeClass(aa[i], "nav-active");
    }
    self.$refs.mySwiper.swiper.clickedSlide.className =
        "nav-active swiper-slide swiper-slide-next";
}

removeClass

根据条件移除参数指定的类名

removeClass: function(obj, classname) {
    if (obj.className != "") {
    var arrClassName = obj.className.split(" ");
    var _index = arrIndexOf(arrClassName, classname);
    //如果有需要移除的class
    if (_index != -1) {
        arrClassName.splice(_index, 1); //删除存在的class值
        obj.className = arrClassName.join(" "); //将数组以空格连接成字符串放到元素的class属性里
    }
    }
    function arrIndexOf(arr, v) {
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] == v) {
        return i;
        }
    }
    return -1;
    }
}

选中时的背景色

.nav-active {
  background: brown;
}

.nav-active a {
  color: #fff !important;
}

vue-preview

这个插件是一个照片浏览器，参考Vue preview plugin

安装

在main.js引入

import VuePreview from 'vue-preview'
Vue.use(VuePreview)

如果需要特殊配置vue-preview，可以如下注册vue-preview

Vue.use(preview, {
  mainClass: 'pswp--minimal--dark',
  barsSize: {top: 0, bottom: 0},
  captionEl: false,
  fullscreenEl: false,
  shareEl: false,
  bgOpacity: 0.85,
  tapToClose: true,
  tapToToggleControls: false
})

数据

以下数据的各项属性是vue-preview需要用到的

[
      {
            "id":1,
             "src": "/src/img/1_big.jpg", 大图
            "msrc": "/src/img/1_small.jpg", 小图
            "alt": "",
            "title": ""        
      },
      {
            "id":2,
            "src": "/src/img/2_big.jpg",
            "msrc": "/src/img/2_small.jpg",
            "alt": "",
            "title": ""        
      }
]

配置

在组件中只需要如下插入图片查看器的html标签，不需要使用v-for，它会自动到组件对象里的data里的slide1中取数据，自动循环填充

组件对象内部

export default {
  data: function() {
    return {      
      slide1: [ ]
    };
  },
  methods: {
    getImgs: function() {
      var self = this;
      self.$ajax
        .get("http://localhost:3000/src/json/shareImgInfo.json")
        .then(response => {
          var tt = response.data.filter((item, index) => {    
            if (item.sourceID == self.sourceID) {        
                item.w = 500; //需要设置图片在放大后的宽高，每张图片的宽高尺寸都是一样的
                item.h = 400;
                return item;
            }
          });
          self.slide1 = tt;
        })
        .catch(error => {
          Toast("数据加载失败"+error);
        });
    }
  },
  created: function() {
    this.getImgs();
  }
};

css

图片查看器生成的代码层次是：div.imgPrev>div.my-gallery>figure>a>img

.imgPrev .my-gallery figure{
      width:25%;
      margin:0;
      display: inline-block !important; 
 }
.imgPrev .my-gallery figure a{
      display: block;
      width:100%;
}
.imgPrev .my-gallery figure a img{
      width:100%;
      vertical-align: middle;
}

可以直接把w和h属性放到json数据里,这样可以做到放大不同宽高尺寸的图片

[
    {
        "id": 1,
        "src": "/src/img/1_big.jpg",
        "msrc": "/src/img/1_small.jpg",
        "alt": "",
        "title": "",
        "w": 600,
        "h": 460
    },
    {
        "id": 2,
        "src": "/src/img/2_big.jpg",
        "msrc": "/src/img/2_small.jpg",
        "alt": "",
        "title": "",
        "w": 800,
        "h": 210
    }
]

sweetalert2 模态框

npm i sweetalert2--save - dev

import swal from 'sweetalert2';
import "sweetalert2/dist/sweetalert2.min.css";
const swalPlugin = {};

swalPlugin.install = function (Vue) {
    swal.setDefaults({
        confirmButtonClass: 'btn btn-primary',
        cancelButtonClass: 'btn btn-default',
        buttonsStyling: true,
        showCloseButton: true
    });
    Vue.prototype.$swal= swal;
};

Vue.use(swalPlugin);

调用

this.$swal('hello vue')

更多参考：sweetalert2

vue-blu

npm i vue-blu -S

//npm包
import Vue from "vue";
import VueBlu from "vue-blu";
import "vue-blu/dist/css/vue-blu.min.css";

Vue.use(VueBlu);

调用

    

    

       登录成功     

登录

export default {
    data: function () {
        return {
            isShow: false
        }
    },
    methods: {
        toggle() {
            //验证登录后
            this.isShow = true;
        },
        getLogin: function () {
            //点击模态框的ok按钮手动转向
            this.$router.push("/circlefriend/");
        }
    }
}

//按钮颜色

.is-primary{
    background-color:red !important;
}

更多参考：vue-blu，API配置是写入modal标签里，而$modal全局对象的配置则是在调用this.$modal对象的方法里配置

npm i vue-blu -S

Javascript - 学习总目录