vue-bluJavascript - Vue - 插件(swiper、vue-preview)
swiper
swiper是一个支持滑动效果的js插件,它也支持在vue中使用,主要用于移动端的触摸滑动操作。Swiper中文网。
安装和导入插件
//在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结构
<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可以查询,以下是基本配置
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
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-next" slot="button-next"></div>
在swiperOption中配置
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
更改按钮的背景图片
background: url("/src/img/left.png") !important;
}
.swiper-button-next{
background: url("/src/img/right.png") !important;
}
swiper滑动导航栏
<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>
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
}
};
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项来设置背景色
<a href="#" @click="getImgs(item.id,true)">{{item.linkName}}</a>
</swiper-slide>
在vue的methods的某个方法中为被点击的slide增加className
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
根据条件移除参数指定的类名
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;
}
}
选中时的背景色
background: brown;
}
.nav-active a {
color: #fff !important;
}
vue-preview
这个插件是一个照片浏览器,参考Vue preview plugin
安装
Vue.use(VuePreview)
如果需要特殊配置vue-preview,可以如下注册vue-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中取数据,自动循环填充
组件对象内部
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
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 模态框
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);
调用
更多参考:sweetalert2
vue-blu
import Vue from "vue";
import VueBlu from "vue-blu";
import "vue-blu/dist/css/vue-blu.min.css";
Vue.use(VueBlu);
调用
<h4></h4>
<p>
登录成功
</p>
</modal>
<button @click="toggle">登录</button>
data: function () {
return {
isShow: false
}
},
methods: {
toggle() {
//验证登录后
this.isShow = true;
},
getLogin: function () {
//点击模态框的ok按钮手动转向
this.$router.push("/circlefriend/");
}
}
}
background-color:red !important;
}
更多参考:vue-blu,API配置是写入modal标签里,而$modal全局对象的配置则是在调用this.$modal对象的方法里配置
npm i vue-blu -S
vue-bluJavascript - Vue - 插件(swiper、vue-preview)的更多相关文章
- vue中使用时间插件、vue使用laydate
<input id="time1" readonly="readonly" placeholder="这里选择时间" v-model= ...
- chrome调试vue.js的插件:vue.js devtools
1.什么是vue.js devtools? vue.js devtools是chrome的一款插件,用来调试vue的一款神器. 2.为什么下载vue.js devtools? 由于vue是数据驱动的, ...
- 黄聪:如何正确在Vue框架里使用Swiper
实例: 错误(无法显示出分页器按钮,此功能不适用与for循环出来的图片,只有当该页面图片固定几张时能正常用) 第一步: 安装 npm i swiper (vue插件自带) 第二步: 在当前页面里引入 ...
- vue轮播插件vue-awesome-swiper
https://surmon-china.github.io/vue-awesome-swiper/ 第一步安装 npm install vue-awesome-swiper --save 第二部在m ...
- vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件
vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...
- VSCODE开发VUE.JS前端插件
VUE前端插件.转载自:https://www.cnblogs.com/karthuslorin/p/8577224.html vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscod ...
- vscode中vue代码颜色插件
vue提示插件[Vscode] 编者寄语:vscode的确是前端开发中很好的工具,安装颜色插件,从视觉上是美的享受.曾经的我遇到了vscode代码全是灰色,黑色的困惑,后来整理找到方法,整 ...
- Vue 自定义一个插件的用法、小案例及在项目中的应用
1.开发插件 install有两个参数,第一个是Vue构造器,第二个参数是一个可选的选项对象 MyPlugin.install = function (Vue, options) { // 1 ...
- sublime的Vue语法高亮插件安装
1.准备语法高亮插件vue-syntax-highlight. 下载地址: https://github.com/vuejs/vue-syntax-highlight 下载页面并下载: 解开压缩包vu ...
- vue Baidu Map --- vue百度地图插件
vue Baidu Map 官网:https://dafrok.github.io/vue-baidu-map/#/zh/start/installation javascript 官网:http:/ ...
随机推荐
- linux下系统时间和时钟时间
linux中有关系统时间.时钟时间的命令: 1显示系统时间的命令 ># date 2显示时钟时间的命令 ># clock或hwclock 3系统时间与互联网同步的命令 ># ntpd ...
- springboot多个service互相调用的事务处理(十三)
在一个service的方法A中,调用另一个service的方法B,方法A和方法B均存在数据库插入操作,需要添加如下配置: @Transactional(rollbackFor = Exception. ...
- odoo中Controller
一:Controller 一般通过继承的形式来创建controller类,继承自odoo.http.Controller. 以route装饰器来装饰定义的方法,提供url路由访问路径: class M ...
- 第十三天 -- 如何用U盘重装系统Win10以及如何用VMware12安装Win10
U盘制作启动盘 1.在电脑上插入U盘,关闭安全软件杀毒工具,然后打开装机吧U盘启动盘制作工具 2.选择刚插入的U盘,勾选上,点击一键制作启动U盘,制作前U盘数据必须转移备份: 3.选择格式化U盘,记得 ...
- element UI+vue关于日期范围选择的操作,picker-options属性的使用
一般 <el-date-picker />使用会出现起始日期和结束日期,结束日期不能早与起始日期,选择了其实日期后,结束日期大于起始日期的不可选,置灰,同理先选结束日期后再选起始日期,那么 ...
- 使用java AWT做一个增加按钮的简单菜单窗体
package com.ysq.Swing; import java.awt.BorderLayout; import java.awt.Container; import java.awt.Flow ...
- 裸奔mysql
centos 7 下裸奔mysql # vim /etc/my.cnf在[mysqld]的段中加上一句:skip-grant-tables例如:[mysqld]datadir=/var/lib/mys ...
- vue实现单点登录的N种方式
最近项目停工了,RageFrame的学习暂时告一段落,这一篇给大家分享下有关单点登录的相关知识,并提供一些demo给大家参考,希望对想了解的朋友有一些帮助. 话不多说,先上原理(借鉴地址:https: ...
- Cookie、Session、JWT在koa中的应用及实现原理
目录 Cookie 重要属性 实现原理 cookie签名实现原理 注意事项 Session 实现原理 JWT 使用方式 组成 实际应用 实现原理 前端存储方式 cookie session local ...
- 基于RT1052 Aworks 内存扩容记录(一)
本文主要是通过迁移的思维,记录本人初次使用周立功的Aworks框架进行BSP开发 1. 首先阅读原理图 内存容量由32M扩容至64M. 2. 再则比较两颗芯片的参数 通过比较32M和64M SDRAM ...