vue常用插件（一）
2024-05-05 06:52:18
vue常用插件（一）
一、swiper
1）swiper官方文档
https://www.swiper.com.cn/api/index.html
https://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>
vue常用插件（一）相关推荐
- vue 常用插件集合（最全）
UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI ...
- vue常用插件，可自定义选择。vue demo
UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI ...
- chrome vue插件_VS Code 前端常用插件推荐
⊕.vscode安装插件只需要点击图片所示按钮,即可进入拓展,在搜索框中输入插件名点击安装后,等待安装好即可点击重新加载重启vscode使得插件生效. Ξ.当你不需要某个插件时只需要进入扩展,点击对应 ...
- 【Vue】Vue学习笔记——UI组件库和常用插件
文章目录 6. UI组件库和常用插件 6.1 Element-ui 6.2 Vue-router 6.2.1 基本用法 6.2.2 跳转 6.2.3 路由嵌套 6.2.4 路由参数传递 6.3 Axi ...
- sublime Text Vue中常用插件汇总说明
开发vue的常用插件 1.让vue文件高亮: 安装: Vue Syntax Highlight 2.让script里面的es6代码高亮: 安装:ecmascript syntax 安装:vuejs c ...
- sublime text3常用插件+开发vue常用的插件
开发vue的常用插件 1.让vue文件高亮: 安装: Vue Syntax Highlight 2.让script里面的es6代码高亮: 安装:ecmascript syntax 安装:vuejs c ...
- VUE常用UI组件插件及框架-vue前端UI框架收集
UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - ...
- Vue常用的插件集合
element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI ...
- Vue.js常用插件
UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...
- vscode前端常用插件整理（vuejs）
VsCode可以通过安装插件来使编辑器变的更加强大 以下为前端开发工程师常用插件 (1)HTML Snippets 超级实用且初级的 H5代码片段以及提示 (2)HTML CSS Support 让 ...
最新文章
- 七、排序(4)——qsort()
- git pull 报错：Untracked Fles Preventing Merge
- TechWorld2021技术嘉年华，解锁“不一样”的技术盛会
- 配置Apache虚拟机
- Android 系统（115）---死机问题分析
- EL表达式判断条件要写在${}内
- Spring Struts2 整合
- Linux从入门到放弃（1）教学视频推荐以及一些经验分享
- 更新sqlmap1.5.5版本教程（附带下载地址）
- excel替换快捷键_18个Ctrl系列快捷键，简单易上手，且实用
- 微信答题竞赛的小程序
- python换发型_初学Python的一些细节
- c#FileStream文件读写可能会出现乱码
- 知识图谱论文阅读（十三）【2020 arXiv】Attentive Knowledge Graph Embedding for Personalized Recommendation
- React 中的“栈调和”（Stack Reconciler）过程是怎样的？
- java(基础语法)
- 神经性脚臭案例整理（五）
- Linux-Ubuntu 和 安装 genymotion 的一些问题和一些命令
- Oracle出现 ins 35075提示的解决方法
- 62 旋转字符串（Rotate String）