vue-bluJavascript - Vue - 插件（swiper、vue-preview）

swiper

swiper是一個支持滑動效果的js插件，它也支持在vue中使用，主要用於移動端的觸摸滑動操做。Swiper中文網。

安裝和導入插件

npm i vue-awesome-swiper - S
//在main.js中導入swiper
import Vue from "vue" 
import VueAwesomeSwiper from 'vue-awesome-swiper'
import "swiper/dist/css/swiper.min.css"
Vue.use(VueAwesomeSwiper)
//在須要使用swiper的組件中導入具體的組件
import { swiper, swiperSlide } from "vue-awesome-swiper"

swiper的html結構

<template>
    <swiper :options="swiperOption" ref="mySwiper"> //swipe標籤會生成兩個div，類名爲：swiper-container和swiper-wrapper
        <swiper-slide class="slider1 slides">slider1</swiper-slide> //swiper-slide標籤會生成一個div，.類名爲：swiper-slide
        <swiper-slide class="slider2 slides">slider2</swiper-slide>
        <swiper-slide class="slider3 slides">slider3</swiper-slide>
    </swiper>
</template>

swiper-container包含swiper-wrapper，swiper-wrapper包含了可滑動的項swiper-slide。

vue配置

如下data中的swiperOption包含的配置項在swiper網站上的API能夠查詢，如下是基本配置

import {swiper,swiperSlider} from "vue-awesome-swiper"

export default {
    data:function() {
        return {
            swiperOption:{
                autoplay: 3000,
                direction: "horizontal",//默認橫向滑動，可取值veritical
                setWrapperSize: true, //true時，自動計算slide元素的寬的總和並應用到祖先元素上
                autoHeight: true, //true時，自動計算slide元素的高的總和並應用到祖先元素上                
                paginationClickable: true,
                notNextTick: true,
                mousewheelControl : true,            
                observeParents: true //隨着瀏覽器大小而自動改變自身大小                
            }
        }
    },
    components:{
        swiper:swiper,
        swiperSlider:swiperSlider
    }
}

css

.slider1{
    background: red;
}

.slider2{
    background: rgb(0, 12, 179);
}

.slider3{
    background: rgb(0, 116, 170);
}

.swiper-slide{
    color:#fff;
    font-size:20px;
    font-weight: bolder;
    line-height: 300px;
    height:300px;
}

按鈕配置（上一張下一張）

將如下兩個按鈕標籤放入swiper-container中

<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div> 

在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滑動導航欄

<template>
    <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide>
            <a href="#">1體育</a>
        </swiper-slide>
        <swiper-slide>
            <a href="#">2音樂</a>
        </swiper-slide>
        <swiper-slide>
            <a href="#">3讀書</a>
        </swiper-slide>
        <swiper-slide>
            <a href="#">4市場</a>
        </swiper-slide>
        <swiper-slide>
            <a href="#">5租房</a>
        </swiper-slide>
        <swiper-slide>
            <a href="#">6財經</a>
        </swiper-slide>
        <swiper-slide>
            <a href="#">7慈善</a>
        </swiper-slide>
        <swiper-slide>
            <a href="#">8金融</a>
        </swiper-slide>
        <swiper-slide>
            <a href="#">9汽車</a>
        </swiper-slide>
        <swiper-slide>
            <a href="#">10明星</a>
        </swiper-slide>
        <swiper-slide>
            <a href="#">11熱線</a>
        </swiper-slide>
        <swiper-slide>
            <a href="#">12數碼</a>
        </swiper-slide>
        <swiper-slide>
            <a href="#">13軍事</a>
        </swiper-slide>
        <swiper-slide>
            <a href="#">14地理</a>
        </swiper-slide>
    </swiper>
</template>

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項來設置背景色

<swiper-slide v-for="item in linkName" :key="item.id">
    <a href="#" @click="getImgs(item.id,true)">{{item.linkName}}</a> 
</swiper-slide>

在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中取數據，自動循環填充

<vue-preview :slides="slide1" class="imgPrev"></vue-preview>

組件對象內部

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);

調用

<modal title="提示" :is-show="isShow" :show-header="true" @close="isShow=false" :on-ok="getLogin" ok-text="肯定"  :show-cancel="false">
    <h4></h4>
    <p>
       登陸成功
    </p>
</modal>
<button @click="toggle">登陸</button>

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 - 學習總目錄