七、Vue组件库：Element、Swiper（轮播专用组件）
一、vue的Element组件库
官网：https://element.eleme.cn/#/zh-CN
1.1安装
推荐安装方法：
首先要进入项目目录
cnpm i element-ui -S或
npm i element-ui -S
1.1.2 CDN安装
直接引入无需安装：
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
1.2引入所有
官方：https://element.eleme.cn/2.13/#/zh-CN/component/quickstart
在src/main.js里引入
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';Vue.use(ElementUI);new Vue({el: '#app',render: h => h(App)
});
二、按需引入
第1步，安装 babel-plugin-component：
cnpm install babel-plugin-component -D
第2步，配置src/.babelrc文件
【1】配置部分
{"presets": [["env", {"modules": false,"targets": {"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]}}],"stage-2"],"plugins": ["transform-vue-jsx", "transform-runtime",[//【1】配置部分"component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]//配置结尾]
}
第3步，引入部分组件，比如 Button 和 Select
那么需要在 main.js 中写入以下内容（全局引入）：
【1】引入所需组件
【2】使用对应组件（以下2个）
import Vue from 'vue';
import { Button, Select } from 'element-ui'; //【1】引入所需组件
import App from './App.vue';Vue.use(Button) //【2】使用对应组件（以下2个）
Vue.use(Select) /* 或写为* Vue.component(Button.name, Button); * Vue.component(Select.name, Select);*/new Vue({el: '#app',render: h => h(App)
});
完整组件列表和引入方式详见：
（完整组件列表以 components.json 为准）
https://element.eleme.cn/2.13/#/zh-CN/component/quickstart
第4步，全局配置（可选步骤）
在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）。按照引入 Element 的方式，具体操作如下：
完整引入 Element：
import Vue from 'vue';
import Element from 'element-ui';
Vue.use(Element, { size: 'small', zIndex: 3000 });
按需引入 Element：
import Vue from 'vue';
import { Button } from 'element-ui';Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
Vue.use(Button);
按照以上设置，项目中所有拥有 size 属性的组件的默认尺寸均为 ‘small’，弹框的初始 z-index 为 3000。
第5步，开始使用
至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以编写代码了。
官方使用文档： https://element.eleme.cn/2.13/#/zh-CN/component/button
在文档中找到button组件使用方法，把想要的样式复制到想要的地方即可
src/parent.vue
【1】使用Element的组件
<template><div class="parent"><h1>路由实例parent</h1><!-- 【1】使用Element的组件 --><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button><hr/><el-button plain>朴素按钮</el-button><el-button type="primary" plain>主要按钮</el-button><el-button type="success" plain>成功按钮</el-button><el-button type="info" plain>信息按钮</el-button><el-button type="warning" plain>警告按钮</el-button><el-button type="danger" plain>危险按钮</el-button></div>
</template><script>export default{name:'parent',components:{},data(){return{list:[] }},filters:{},directives:{},}
</script><style scoped>
</style>效果：
2.2 走马灯（轮播）图片展示组件使用示例
src/main.js
【1】以下2个为引入走马灯必须组件
【2】以下2个为使用走马灯组件
import Vue from 'vue'
import App from './App'
import router from '@/router.js'//先引入自定义路由
import {Button,Select,Carousel,//【1】以下2个为引入走马灯必须组件CarouselItem,} from 'element-ui';Vue.use(Button)
Vue.use(Select)
Vue.use(Carousel)//【2】以下2个为使用走马灯必须组件
Vue.use(CarouselItem)Vue.config.productionTip = falsenew Vue({el: '#app',template: '<App/>',router,//把路由投到vue实例components: {App}
})
src/components/parent.vue
【0】定义一些图片
【1】使用Element的走马灯组件
【2】控制走马灯图片样式
<template><div class="parent"><h1>路由实例parent</h1><hr/><!-- 【1】使用Element的走马灯组件 --><el-carousel height="550px"><el-carousel-item v-for="(img,index) in imgs" :key="index"><img :src="img" /> <!-- 循环图片 --></el-carousel-item></el-carousel></div>
</template><script>export default{name:'parent',components:{},data(){return{imgs:[//【0】定义一些图片"http://www.wallcoo.com/nature/2010_Landscape_1920_Desktop_11/wallpapers/1600x1200/Moose%20Pond%20and%20Mount%20Pleasant%20in%20Autumn%2C%20Maine.jpg","https://cli.clewm.net/file/2015/01/20/81b71bc509d09368d4602a4b5b05d093.jpg","https://hbimg.huabanimg.com/a84ec58661bc95efb974e2eebea2b3fd880a8fb12870a-ksYmbV_fw658",]}},filters:{},directives:{},}
</script><style scoped>/* 【2】控制走马灯图片样式 */.el-carousel__item h3 {color: #475669;font-size: 14px;opacity: 0.75;line-height: 150px;margin: 0;}.el-carousel__item:nth-child(2n) {background-color: #99a9bf;}.el-carousel__item:nth-child(2n+1) {background-color: #d3dce6;}img {width:100%;}
</style>效果：
三、Swiper（轮播专用组件）
官网：https://www.swiper.com.cn
Vue中使用：https://github.com/surmon-china/vue-awesome-swiper
官方API文档：https://www.swiper.com.cn/api/index.html
1.1 概述
- Swiper常用于移动端网站的内容触摸滑动
- Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
- Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
- Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！
1.2 安装Swiper
CDN
<link rel="stylesheet" href="path/to/swiper/dist/css/swiper.css"/>
<script type="text/javascript" src="path/to/swiper.js"></script>
<script type="text/javascript" src="path/to/vue.min.js"></script>
<script type="text/javascript" src="path/to/dist/vue-awesome-swiper.js"></script>
<script type="text/javascript">Vue.use(window.VueAwesomeSwiper)
</script>
NPM
首先要进入项目目录。
cnpm install vue-awesome-swiper --save
或
npm install vue-awesome-swiper --save
1.3 引入
1.3.1全局引入 （mount with global）
src/main.js
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'// require styles
import 'swiper/dist/css/swiper.css'Vue.use(VueAwesomeSwiper, /* { default global options } */)
1.3.2组件内安装（局部引入）（mount with component）
src/components/parent.vue
// require styles
import 'swiper/dist/css/swiper.css'import { swiper, swiperSlide } from 'vue-awesome-swiper'export default {components: {swiper,swiperSlide}
}
1.3.3 ssr安装（mount with ssr）
// If used in nuxt.js/ssr, you should keep it only in browser build environment
if (process.browser) {const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr')Vue.use(VueAwesomeSwiper)
}
1.4 定义插件相关参数（custom swiper plugin）
src/main.js
import Swiper from 'swiper'
Swiper.use({name: 'pluginName',params: {pluginSwitch: false,},on: {init() {if (!this.params.pluginSwitch) returnconsole.log('init')},// swiper callback...}
})
1.5 使用swiper
参数配置相关详见官方API文档：https://www.swiper.com.cn/api/index.html
src/main.js
import Vue from 'vue'
import App from './App'
import router from '@/router.js'//先引入自定义路由
//[1]引入swiper
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'Vue.use(VueAwesomeSwiper)//[2]使用swiperVue.use(Carousel)//以下2个为使用走马灯必须组件
Vue.use(CarouselItem)Vue.config.productionTip = falsenew Vue({el: '#app',template: '<App/>',router,//把路由投到vue实例components: {App}
})parent.vue
【0】-【3】
<template><div class="parent"><h1>路由实例parent</h1><hr/><!-- 【1】使用swiper的轮播组件 --><swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback"><!-- slides --><swiper-slide v-for="(img,i) in imgs" :key="i"><img :src="img"/></swiper-slide><!-- Optional controls --><div class="swiper-pagination" slot="pagination"></div><!--分页器。如果放置在swiper-container外面，需要自定义样式。--><!-- <div class="swiper-button-prev" slot="button-prev"></div><div class="swiper-button-next" slot="button-next"></div><div class="swiper-scrollbar" slot="scrollbar"></div> --></swiper></div>
</template><script>export default{name:'parent',components:{},data(){return{//【2】配置轮播相关参数都写在此对象内部swiperOption: {pagination: {el: '.swiper-pagination',},},imgs:[//【0】定义一些图片"https://hbimg.huabanimg.com/a84ec58661bc95efb974e2eebea2b3fd880a8fb12870a-ksYmbV_fw658","https://cli.clewm.net/file/2015/01/20/81b71bc509d09368d4602a4b5b05d093.jpg","https://hbimg.huabanimg.com/a84ec58661bc95efb974e2eebea2b3fd880a8fb12870a-ksYmbV_fw658",]}},filters:{},directives:{},}
</script><style scoped>/* 【3】控制轮播图样式 */
.swiper-container{--swiper-theme-color: #ff6600;--swiper-pagination-color: #00ff33;/* 两种都可以 */}
img {width:800px;
}
</style>效果：
七、Vue组件库：Element、Swiper（轮播专用组件）相关推荐
- 微信小程序---swiper轮播图组件
微信小程序-swiper轮播图组件 在components中新建文件夹swiper components/swiper/swiper.wxml <!--components/swiper/swi ...
- 在vue项目中 使用swiper轮播图的关于 在ios中图片白边闪屏踩坑记录
场景描述: 近日,接到一个需求,改善APP首页的布局,需要在顶部添加一个可滚动的栏目导航,以切换栏目然后切换栏目内容类似于唯品会目前的切换效果.如下图 问题描述: 在切换顶部栏目的时候,下面内容页的b ...
- Vue —— mockjs 模拟数据、轮播图插件 Swiper
mockjs 的使用 项目安装 mockjs : cnpm install mockjs 使用步骤 (1)在项目 src 下创建 mock 文件夹. (2)mock 文件夹准备相应的 JSON 数据文 ...
- 七、微信小程序-快速回顾 ( swiper 轮播图、scroll-view 可滚动视图区域 )
文章目录 一.swiper 轮播图 1.1. swiper 基本使用 1.2. 调整轮播图和图片的大小 二.scroll-view 可滚动视图区域 一.swiper 轮播图 轮播图是项目中最常见的功能 ...
- 微信小程序vue轮播图_微信小程序使用swiper组件实现类3D轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单. ...
- Vue实现仿音乐播放器6-实现新歌速递与swiper轮播图切换
前言 前面在首页已经完成今日推荐以及访问百度API获取数据,现在继续来完善home主页. 效果 新歌速递 swiper实现轮播图 实现 实现新歌速递 在components下新建新歌速递组件News_ ...
- Vue项目中获取数据后使用swiper轮播，无法轮播且 autoplay 和 loop 失效问题！
Vue项目中获取数据后使用swiper轮播,无法轮播且 autoplay 和 loop 失效问题! 问题表现:轮播组件显示第一张图,可拖动但无法切换到下一张图.但是F12控制台切换屏幕后能正常轮播但无 ...
- vue开发一个实用美观的轮播图组件
网上有不少vue开发的轮播图资源,相信读者也看过不少,这里笔者开发了一个轮播图组件,简单美观实用. 先上示例图: 常见的轮播图都是占满屏幕的形式,像上图所示的轮播图虽然经常见到,但是在一些常见的轮播组 ...
- 在vue中使用swiper轮播图（亲测有效）
在vue中使用swiper轮播图(亲测有效) 1.新建vue项目 2.装swiper的包 3.使用swiper 网上搜了一大堆在vue中如何使用swiper,结果搜出来一堆垃圾,也不知道从哪里复制的, ...
最新文章
- PHPWAMP集成环境Zend组件的相关介绍，环境默认的PHP运行模式
- SAP MIGO 报错-在例程WERT_SIMULIEREN字段NEUER_PREIS中字段溢出-
- python操作Elasticsearch7.17.0
- Specified VM install not found: type Standard VM, name jdk1.7
- Xilinx FPGA PLL 资源与INTEL FPGA PLL资源locked信号的不同
- mysql 5.7.11 授权_mysql 5.7.11 安装配置教程
- Android设计模式之——观察者模式
- 二次元带音乐404源码
- 输出dag的所有拓扑排序序列_算法学习笔记(53): 拓扑排序
- vs中bitmap等图标文件你在哪？
- 阶分差数 matlab,matlab中aicbic确定阶数的太小
- 20200707：动态规划专题之不同路径
- editplus3编辑器颜色修改
- 【运维心得】只有百度能打开，其他页面打不开怎么办？
- java高校选课系统博客,学生选课系统
- 自定义小程序中的showToast
- ffmpeg与x264编码指南
- 【微信小程序】圆环进度条
- PDF 签章图片不显示问题
- 自动化测试的PO模式