参考: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. redis数据类型及订阅操作

    Redis数据类型详解 Redis键/值介绍 Redis key值是二进制安全的,这意味着可以用任何二进制序列作为key值,从形如“foo”的简单字符串到一个JPG文件的内容都可以.空字符串也是有效k ...

  2. 在业务控制方法中写入模型变量收集参数,且使用@InitBind来解决字符串转日期类型

    1)  在默认情况下,springmvc不能将String类型转成java.util.Date类型,所有我们只能在Action 中自定义类型转换器 <form action="${pa ...

  3. UmUtils得到友盟的渠道号

    import android.content.Context; import android.content.pm.ApplicationInfo; import android.content.pm ...

  4. openstack基于卷快照恢复卷

    openstack基于卷快照恢复卷 基于P版本,对卷基于快照进行恢复的源码分析 1.特性描述 在pike版本中,openstack官网增加了一个新特性,Cinder volume revert to ...

  5. [Python]统计1个元素在列表中的出现次数

    使用列表自带的count方法: list.count(element) 示例:  列表a,有4个元素,其中值1出现3次 In []: a=[,,,] In []: a Out[]: [, , , ] ...

  6. 几句简单的python代码完成周公解梦功能

    <周公解梦>是靠人的梦来卜吉凶的一本于民间流传的解梦书籍,共有七类梦境的解述.这是非常传统的中国文化体系的一部分,但是如何用代码来获取并搜索周公解梦的数据呢?一般情况下,要通过爬虫获取数据 ...

  7. 九十四:CMS系统之cms后台登录限制

    装饰器,验证当前session中是否存在定义的user_id,没有就重定向到登录页 from flask import session, redirect, url_forfrom functools ...

  8. JAVA 基础编程练习题4 【程序 4 分解质因数】

    4 [程序 4 分解质因数] 题目:将一个正整数分解质因数.例如:输入 90,打印出 90=2*3*3*5. 程序分析:对 n 进行分解质因数,应先找到一个最小的质数 k,然后按下述步骤完成: (1) ...

  9. d3实现折线图

    如果觉得作者写的对你有用,可以打赏作者哦!owo  多少不限,支持而已. 实现折线图不得不说的是d3的线段生成器: 假设data=[1,2,5,7,5,8,2,6]var line = d3.svg. ...

  10. 【VS开发】使用VS2010创建MFC ActiveX工程项目

    1.ActiveX的基本概念 ActiveX控件可以看作是一个极小的服务器应用程序,它不能独立运行,必须嵌入到某个容器程序中,与该容器一起运行.这个容器包括WEB网页,应用程序窗体等... Activ ...