参考: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. LC 881. Boats to Save People

    The i-th person has weight people[i], and each boat can carry a maximum weight of limit. Each boat c ...

  2. js内存空间及this关键词详解

    http://mp.weixin.qq.com/s/FYFepXmkzzDYNLKhpovYFA

  3. 6and7.Pod控制器应用进阶

    Pod控制器应用进阶:imagepullpolicy: 镜像获取策略 Always,Never,IfNoPresent 暴露端口: portslabels 标签可以后期添加修改. ========== ...

  4. ASP.NET的IIS映射

    ASP.NET默认扩展名为.aspx,可是我们看到许多网站的扩展名很特别,比如校内的do.个性之余还可以实现简单的伪静态(即把后缀改为html) 不过相对URLRewriter来说,是有点简陋(只能改 ...

  5. JAVA 基础编程练习题7 【程序 7 处理字符串】

    7 [程序 7 处理字符串] 题目:输入一行字符,分别统计出其中英文字母.空格.数字和其它字符的个数. 程序分析:利用 while 语句,条件为输入的字符不为'\n'. package cskaoya ...

  6. 星际争霸,FF反作弊对战平台

    星际一 [FF]反作弊对战平台让作弊行为无所遁形,只为星际玩家服务的反作弊对战平台目前能检查星际霸主以及其他星际争霸ZUOBI软件支持星际113版本 支持XP WIN7 WIN8 MAC 游戏外挂带来 ...

  7. 【破解APP抓包限制】Xposed+JustTrustMe关闭SSL证书验证!

    转载:https://www.jianshu.com/p/310d930dd62f 1 前言 这篇文章主要想解决的问题是,在对安卓手机APP抓包时,出现的HTTPS报文通过MITM代理后证书不被信任的 ...

  8. UE4 RHI(2)

    在上篇简单说明RHI的作用后, 我们在引擎中探索一下RHI的种种细节与实现. 在解决方案资源管理器中搜索RHI, 会有这些文件: (1)对应不同运行平台的PlatformDynamicRHI.cpp( ...

  9. Linux文件权限实践

    用户测试准备: groupadd incahome ##一个家庭(dongdaxia的家) useradd dongdaxia -g incahome ##让家庭主人dongdaxia属于incaho ...

  10. [python] 初识 PyQt5

    昨天想着用 Python 写个展示的 demo,之前打算熟悉一下 PyQt ,正好边学边做,学以致用. 主要的流程是在 cmd 下运行 .exe 并读取输出结果,运到的困难是如何实时回传数据以及修改图 ...