vue常用插件（一）
一、swiper
1）swiper官方文档
https://www.swiper.com.cn/api/index.htmlhttps://swiperjs.com/demos
2）安装
npm i swiper@4.1.5 --save
npm i vue-awesome-swiper --save
3）使用
<template>
<div class="showswipers">
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</swiper-slide>
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
</swiper-slide>
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
</swiper-slide>
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-4.jpg" />
</swiper-slide>
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-5.jpg" />
</swiper-slide>
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-6.jpg" />
</swiper-slide>
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-7.jpg" />
</swiper-slide>
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-8.jpg" />
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</div>
</template>
<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
components: {
Swiper,
SwiperSlide
},
data() {
return {
swiperOption: {
loop: true,
// autoplay: {
// delay: 3000,
// stopOnLastSlide: false,
// disableOnInteraction: false
// },
// 显示分页
pagination: {
el: ".swiper-pagination",
clickable: true //允许分页点击跳转
},
// 设置点击箭头
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
// cover flow是类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式。coverflow效果参数，可选值：
// rotate 50 slide做3d旋转时Y轴的旋转角度
// stretch 0 每个slide之间的拉伸值，越大slide靠得越紧。5.3.6 后可使用%百分比
// depth 100 slide的位置深度。值越大z轴距离越远，看起来越小。
// modifier 1 depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。
// slideShadows true 是否开启slide阴影
coverflowEffect: {
rotate: 50,
stretch: 10,
depth: 100,
modifier: 1,
slideShadows: true
},
effect: "coverflow",
grabCursor: "true",
centeredSlides: "true",
slidesPerView: "auto",
lazyLoading: true
},
};
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
}
};
</script>
4）页面
二、echarts
1）官网链接
https://echarts.apache.org/examples/zh/index.html
2）安装
npm i echarts --save
3）使用
<template>
<div class="echart">
<!--柱状图+折线图-->
<div class="horizontalB">
<div id="myMaxbar" :style="{width: '100%', height: '300px'}"></div>
</div>
<!--饼状图-->
<div class="pie">
<div id="pie1">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main1" style="float:left;width:100%;height: 300px"></div>
</div>
</div>
<!--中国地图-->
<div class="echarts">
<div :style="{height:'400px',width:'100%'}" ref="myEchart"></div>
</div>
</div>
</template>
<script>
let echarts = require("echarts/lib/echarts");
// 引入饼状图组件
require("echarts/lib/chart/pie");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
import "../../node_modules/echarts/map/js/china";
export default {
data() {
return {
chart: null
};
},
mounted() {
this.chinaConfigure();
this.drawLine();
this.initData();
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
drawLine() {
// 基于准备好的dom，初始化echarts实例
let myMaxbar = this.$echarts.init(document.getElementById("myMaxbar"));
// 绘制图表
myMaxbar.setOption({
color: ["#0EA9A1", "#95CE5C"],
//提示框组件配置
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
},
textStyle: {
fontSize: 12,
color: "#fff"
},
padding: 10
},
// 图例组件
legend: {
show: true,
top: "0",
left: "5%",
selectedMode: true,
data: [
{
name: "销售额",
textStyle: {
color: "#0EA9A1"
}
},
{
name: "销售件数",
textStyle: {
color: "#95CE5C"
}
}
]
},
//定义折线图距离左边多少右边多少的距离
grid: {
left: "2%",
right: "5%",
bottom: "16%",
containLabel: true //区域是否包含坐标轴的刻度标签
},
xAxis: [
//定义x轴
{
type: "category", //设置x轴的类型
data: [
"茅台",
"五粮液",
"剑南春",
"郎酒",
"洋河蓝色经典",
"水井坊",
"泸州老窖",
"汾酒",
"翰格",
"茅台",
"洋河蓝色经典",
"剑南春",
"郎酒",
"洋河蓝色经典",
"水井坊",
"泸州老窖",
"汾酒",
"翰格",
"尊尼获加金牌",
"剑南春",
"郎酒"
],
nameTextStyle: {
fontSize: 14
},
axisLabel: {
//坐标轴刻度的相关设置
interval: 0, //设置成 0 强制显示所有标签。
rotate: -45, //标签旋转的角度
margin: 15
// textStyle:{
// color:'#fff',
// }
}
}
],
yAxis: [
// 定义y轴
{
nameTextStyle: {
color: "#666666",
fontSize: 14
},
show: true,
type: "value",
// axisLabel: { // 坐标轴刻度标签的相关设置
// textStyle: {
// color: "#fff",
// },
// },
axisLine: {
// 坐标轴轴线相关设置
show: false
},
splitLine: {
// 坐标轴在网格区域中的分隔线
lineStyle: {
//x轴网格样式设置
color: "#12403F"
}
}
}
],
series: [
//系列列表。每个系列通过 type 决定自己的图表类型
{
name: "销售额",
type: "bar", // 设置为柱状图
barWidth: 14,
//柱状图设置数值
label: {
normal: {
show: true,
position: "top"
}
},
data: [
150,
232,
201,
154,
190,
330,
410,
190,
330,
410,
150,
232,
201,
154,
190,
330,
410,
190,
230,
200,
180
]
},
{
name: "销售件数",
type: "line", // 设置为折线图
symbol: "circle",
symbolSize: [10, 10],
data: [
120,
132,
101,
134,
90,
230,
210,
190,
330,
410,
120,
132,
101,
134,
90,
230,
210,
190,
230,
200,
180
]
}
]
});
},
initData() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("main1"));
// 绘制图表
myChart.setOption({
title: {
text: "某站点用户访问来源", //主标题
subtext: "纯属虚构", //副标题
x: "center" //x轴方向对齐方式
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: "vertical",
bottom: "bottom",
data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
},
series: [
{
name: "访问来源",
type: "pie",
radius: "55%",
center: ["50%", "60%"],
data: [
{ value: 335, name: "直接访问" },
{ value: 310, name: "邮件营销" },
{ value: 234, name: "联盟广告" },
{ value: 135, name: "视频广告" },
{ value: 1548, name: "搜索引擎" }
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
});
},
chinaConfigure() {
const myChart = echarts.init(this.$refs.myEchart); // 这里是为了获得容器所在位置
window.onresize = myChart.resize;
myChart.setOption({
// 进行相关配置
// backgroundColor: '#02AFDB',
tooltip: {}, // 鼠标移到图里面的浮动提示框
dataRange: {
show: false,
min: 0,
max: 1000,
text: ['High', 'Low'],
realtime: true,
calculable: true,
color: ['orangered', 'yellow', 'lightskyblue'],
},
geo: {
// 这个是重点配置区
map: 'china', // 表示中国地图
roam: false, // 一定要关闭拖拽
label: {
normal: {
show: true, // 是否显示对应地名
textStyle: {
color: 'rgba(0,0,0,0.4)',
},
},
},
itemStyle: {
normal: {
borderColor: 'rgba(0, 0, 0, 0.2)',
},
emphasis: {
areaColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
},
series: [
{
type: 'scatter',
coordinateSystem: 'geo', // 对应上方配置
},
{
name: '省份', // 浮动框的标题
type: 'map',
geoIndex: 0,
data: [
{ name: '南海诸岛', value: 0 },
{ name: '北京', value: 1000 },
{ name: '天津', value: 200 },
{ name: '上海', value: 231 },
{ name: '重庆', value: 345 },
{ name: '河北', value: 23 },
{ name: '河南', value: 5 },
{ name: '云南', value: 12 },
{ name: '辽宁', value: 567 },
{ name: '黑龙江', value: 34 },
{ name: '湖南', value: 621 },
{ name: '安徽', value: 2 },
{ name: '山东', value: 212 },
{ name: '*', value: 108 },
{ name: '江苏', value: 121 },
{ name: '浙江', value: 235 },
{ name: '江西', value: 721 },
{ name: '湖北', value: 231 },
{ name: '广西', value: 231 },
{ name: '甘肃', value: 876 },
{ name: '山西', value: 91 },
{ name: '内蒙古', value: 231 },
{ name: '陕西', value: 9 },
{ name: '吉林', value: 877 },
{ name: '福建', value: 231 },
{ name: '贵州', value: 231 },
{ name: '广东', value: 231 },
{ name: '青海', value: 231 },
{ name: '*', value: 231 },
{ name: '四川', value: 231 },
{ name: '宁夏', value: 0 },
{ name: '海南', value: 0 },
{ name: '*', value: 0 },
{ name: '香港', value: 0 },
{ name: '澳门', value: 0 },
],
},
],
});
},
}
};
</script>
<style>
.echarts{
margin-top: 300px;
}
</style>
4）页面
三、图片懒加载
图片懒加载就是鼠标滑动到哪里，图片加载到哪里。总的来说，一般页面打开，会同时加载页面所有的图片，如果页面的图片请求太多会造成很卡很慢的现象，为了避免这一现象，利用懒加载图片的方法，提高性能
1）安装配置
npm install vue-lazyload --save
//在main.js引入
Vue.use(VueLazyload)
// 也可以配置一些选项, 建议使用这种配置方式，配置一些参数
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})
参数配置：
| key | description | default | options |
|---|---|---|---|
preLoad |
预压高度比例 | 1.3 |
Number |
error |
src of the image upon load fail | 'data-src' |
String |
loading |
src of the image while loading | 'data-src' |
String |
attempt |
尝试计数 | 3 |
Number |
listenEvents |
想要监听的事件 | ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'] |
Desired Listen Events |
adapter |
动态修改元素属性 | { } |
Element Adapter |
filter |
动态修改图片地址路径 | { } |
Image listener filter |
lazyComponent |
lazyload 组件 | false |
Lazy Component |
dispatchEvent |
触发dom事件 | false |
Boolean |
throttleWait |
throttle wait | 200 |
Number |
observer |
use IntersectionObserver | false |
Boolean |
observerOptions |
IntersectionObserver options | { rootMargin: ‘0px’, threshold: 0.1 } | IntersectionObserve |
silent |
do not print debug info | true |
Boolean |
2）使用
<template>
<div>
<!-- vue-lazyload -->
<img v-lazy="img1" />
<img v-lazy="img1" />
<img v-lazy="img1" />
<img v-lazy="img1" />
<img v-lazy="img1" />
<img v-lazy="img1" />
<img v-lazy="img1" />
<img v-lazy="img1" />
<img v-lazy="img1" />
</div>
</template>
<script>
export default {
data() {
return {
img1: "https://swiperjs.com/demos/images/nature-1.jpg"
};
}
};
</script>
<style>
img{
width: 300px;
height: 300px;
display: block;
/* margin-top: 30px; */
margin:30px auto;
}
</style>