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 - 学习总目录

vue-bluJavascript - Vue - 插件(swiper、vue-preview)的更多相关文章

  1. vue中使用时间插件、vue使用laydate

    <input id="time1" readonly="readonly" placeholder="这里选择时间" v-model= ...

  2. chrome调试vue.js的插件:vue.js devtools

    1.什么是vue.js devtools? vue.js devtools是chrome的一款插件,用来调试vue的一款神器. 2.为什么下载vue.js devtools? 由于vue是数据驱动的, ...

  3. 黄聪:如何正确在Vue框架里使用Swiper

    实例: 错误(无法显示出分页器按钮,此功能不适用与for循环出来的图片,只有当该页面图片固定几张时能正常用) 第一步: 安装  npm i swiper (vue插件自带) 第二步: 在当前页面里引入 ...

  4. vue轮播插件vue-awesome-swiper

    https://surmon-china.github.io/vue-awesome-swiper/ 第一步安装 npm install vue-awesome-swiper --save 第二部在m ...

  5. vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

    vue引入swiper  vue使用swiper  vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...

  6. VSCODE开发VUE.JS前端插件

    VUE前端插件.转载自:https://www.cnblogs.com/karthuslorin/p/8577224.html vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscod ...

  7. vscode中vue代码颜色插件

    vue提示插件[Vscode]       编者寄语:vscode的确是前端开发中很好的工具,安装颜色插件,从视觉上是美的享受.曾经的我遇到了vscode代码全是灰色,黑色的困惑,后来整理找到方法,整 ...

  8. Vue 自定义一个插件的用法、小案例及在项目中的应用

    1.开发插件 install有两个参数,第一个是Vue构造器,第二个参数是一个可选的选项对象   MyPlugin.install = function (Vue, options) {   // 1 ...

  9. sublime的Vue语法高亮插件安装

    1.准备语法高亮插件vue-syntax-highlight. 下载地址: https://github.com/vuejs/vue-syntax-highlight 下载页面并下载: 解开压缩包vu ...

  10. vue Baidu Map --- vue百度地图插件

    vue Baidu Map 官网:https://dafrok.github.io/vue-baidu-map/#/zh/start/installation javascript 官网:http:/ ...

随机推荐

  1. linux下系统时间和时钟时间

    linux中有关系统时间.时钟时间的命令: 1显示系统时间的命令 ># date 2显示时钟时间的命令 ># clock或hwclock 3系统时间与互联网同步的命令 ># ntpd ...

  2. springboot多个service互相调用的事务处理(十三)

    在一个service的方法A中,调用另一个service的方法B,方法A和方法B均存在数据库插入操作,需要添加如下配置: @Transactional(rollbackFor = Exception. ...

  3. odoo中Controller

    一:Controller 一般通过继承的形式来创建controller类,继承自odoo.http.Controller. 以route装饰器来装饰定义的方法,提供url路由访问路径: class M ...

  4. 第十三天 -- 如何用U盘重装系统Win10以及如何用VMware12安装Win10

    U盘制作启动盘 1.在电脑上插入U盘,关闭安全软件杀毒工具,然后打开装机吧U盘启动盘制作工具 2.选择刚插入的U盘,勾选上,点击一键制作启动U盘,制作前U盘数据必须转移备份: 3.选择格式化U盘,记得 ...

  5. element UI+vue关于日期范围选择的操作,picker-options属性的使用

    一般 <el-date-picker />使用会出现起始日期和结束日期,结束日期不能早与起始日期,选择了其实日期后,结束日期大于起始日期的不可选,置灰,同理先选结束日期后再选起始日期,那么 ...

  6. 使用java AWT做一个增加按钮的简单菜单窗体

    package com.ysq.Swing; import java.awt.BorderLayout; import java.awt.Container; import java.awt.Flow ...

  7. 裸奔mysql

    centos 7 下裸奔mysql # vim /etc/my.cnf在[mysqld]的段中加上一句:skip-grant-tables例如:[mysqld]datadir=/var/lib/mys ...

  8. vue实现单点登录的N种方式

    最近项目停工了,RageFrame的学习暂时告一段落,这一篇给大家分享下有关单点登录的相关知识,并提供一些demo给大家参考,希望对想了解的朋友有一些帮助. 话不多说,先上原理(借鉴地址:https: ...

  9. Cookie、Session、JWT在koa中的应用及实现原理

    目录 Cookie 重要属性 实现原理 cookie签名实现原理 注意事项 Session 实现原理 JWT 使用方式 组成 实际应用 实现原理 前端存储方式 cookie session local ...

  10. 基于RT1052 Aworks 内存扩容记录(一)

    本文主要是通过迁移的思维,记录本人初次使用周立功的Aworks框架进行BSP开发 1. 首先阅读原理图 内存容量由32M扩容至64M. 2. 再则比较两颗芯片的参数 通过比较32M和64M SDRAM ...