参考:https://github.com/surmon-china/vue-awesome-swiper

npm install vue-awesome-swiper --save

全局引入

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper' // require styles
import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper, /* { default global options } */)

局部:

// require styles
import 'swiper/dist/css/swiper.css' import { swiper, swiperSlide } from 'vue-awesome-swiper' export default {
components: {
swiper,
swiperSlide
}
}

要use

import Swiper from 'swiper'
Swiper.use({
name: 'pluginName',
params: {
pluginSwitch: false,
},
on: {
init() {
if (!this.params.pluginSwitch) return
console.log('init')
},
// swiper callback...
}
})

防止初始化过早。要搞key,vue的key不一样dom就会删除重新渲染

未完。。。

vue封装swiper的更多相关文章

  1. vue封装插件并发布到npm上

    vue封装插件并发布到npm上 项目初始化 首先,要创建项目,封装vue的插件用webpack-simple很合适,vue init webpack-simple 项目名称此命令创建我们的项目的目录, ...

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

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

  3. echars vue 封装全局组件 曲线 柱状图 同v-chars绿色系 配置样式

    Echars vue封装 ,曲线图 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  4. vue封装一些常用组件loading、switch、progress

    vue封装一些常用组件loading.switch.progress github文档https://github.com/zengjielin/vue-component-library loadi ...

  5. 浅析vue封装自定义插件

    在使用vue的过程中,经常会用到Vue.use,但是大部分对它一知半解,不了解在调用的时候具体做了什么,因此,本文简要概述下在vue中,如何封装自定义插件. 在开始之前,先补充一句,其实利用vue封装 ...

  6. Vue 封装axios(四种请求)及相关介绍(十三)

    Vue 封装axios(四种请求)及相关介绍 首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...

  7. 基于Ant Design Vue封装一个表单控件

    开源代码 https://github.com/naturefwvue/nf-vue3-ant 有缺点本来是写在最后的,但是博文写的似乎有点太长了,估计大家没时间往下看,于是就把有缺点写在前面了,不喜 ...

  8. vue封装tab切换

    vue封装tab切换 预览: 第一种 通过父传子标题,子传父事件 子组件 <template> <div class='app'> <div class="ta ...

  9. vue封装公用弹出框方法,实现点击出现操作弹出框

    vue封装公用弹出框方法,实现点击出现操作弹出框 如上图所示,这次要实现一个点击出现操作弹框的效果:并将这个功能封装成一个函数,便于在项目的多个地方使用. 具体思路是: 封装一个组件,组件保护一个插槽 ...

随机推荐

  1. linux下如何基于已有容器创建image并运行?

    1. 通过docker ps命令先找到容器id,示例如下,123456789012就是我们要找的 jello@~$ docker ps CONTAINER ID IMAGE COMMAND CREAT ...

  2. golang中mysql建立连接超时时间timeout 测试

    本文测试连接mysql的超时时间. 这里的"连接"是建立连接的意思. 连接mysql的超时时间是通过参数timeout设置的. 1.建立连接超时测试 下面例子中,设置连接超时时间为 ...

  3. python下载服务器

    大佬们,你们还在为传输文件时利用U盘插拔而苦恼吗,还在为设置文件共享而苦恼吗?别苦恼了,教你一秒实现文件的传输. 首先我们都要有python环境,这个肯定有. 下面就是一秒,在你要传的文件的目录下输入 ...

  4. jeecg随笔

    1.根据数据字典code查找该字典下的元素: SELECT typecode,typename from t_s_type where typegroupid=(select id from t_s_ ...

  5. Django URL调度器

    Django处理请求的流程 Django确定要使用的根URLconf模块.通常,这是ROOT_URLCONF设置的值,但如果传入 HttpRequest对象具有urlconf 属性(由中间件设置),则 ...

  6. delphi数据集查找不定位

    procedure TForm1.Button2Click(Sender: TObject); var R: Variant; begin R := MemTableEh1.Lookup('Name' ...

  7. Java日志体系(六)log4j2

    1.1 简介 log4j2,一个日志的实现框架,是log4j的升级版本,于2014年7月正式亮相.与第一代log4j不同,log4j2完全重写了log4j的日志实现,并不是在原有基础上进行的升级,解决 ...

  8. 【Flink】flink执行jar报错:java.io.IOException: Error opening the Input Split file 或者 java.io.FileNotFoundException

    报错内容 flink执行jar时,报如下错误: org.apache.flink.client.program.ProgramInvocationException: Job failed. (Job ...

  9. maven——将jar安装到本地仓库

    环境变量MAVEN_HOME配置正确后,cmd窗口执行此命令: mvn install:install-file -Dfile=C:\hehe.jar  -DgroupId=com.rockontro ...

  10. SpringBoot简历模板

    项目二:智慧学习-乐勤在线学习网(SpringBoot)◎ 开发模式:团队(8人)                 ◎ 开发周期:4个月◎ 开发环境:JDK1.8.Zookeeper        ◎ ...