参考: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. python之scrapy初探

    1.知识点 """ Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架,我们只需要实现少量的代码,就能够快速的抓取 Scrapy模块: 1.schedul ...

  2. [ML] LIBSVM Data: Classification, Regression, and Multi-label

    数据库下载:LIBSVM Data: Classification, Regression, and Multi-label 一.机器学习模型的参数 模型所需的参数格式,有些为:LabeledPoin ...

  3. 自动化部署 jenkins 插件简介

    一.什么是持续集成? (1)Continuous integration(CI) 持续集成是一种软件开发实践,即团队开发成员经常集成他们的工作,通常每个成员至少集成一次,也就意味着每天可能会发生多次集 ...

  4. Linux0.11学习

    Linux 0.11虽然不是什么“珠穆朗玛峰”,但它肯定还是“华山”或“泰山”.虽然有路但你还是需要最基本的努力和花费一定的代价才能“攀登”上去.1. PC兼容机硬件工作原理(比如8259A,8253 ...

  5. baidu echats简介

    http://note.youdao.com/noteshare?id=ef467acdbe5b84005a1315d77a4475d1

  6. Python multiprocess模块(上)

    multiprocess模块 一. Process模块介绍 1. 直接使用Process模块创建进程 (1)主进程和子进程 (2)if __name__ == "__main__" ...

  7. CentOS Config FTP Server with SSL support

  8. VS开发】如何给console控制台程序更换应用程序图标

    [VS开发]如何给console控制台程序更换应用程序图标 标签:[VS开发] 实际上非常简单,就是增加一个图标资源,在资源视图里,然后修改其ID为IDC_MAINFRAME,然后编译生成即可! 20 ...

  9. 【VS开发】【计算机视觉】OpenCV读写xml文件《C版本》

    一些简单的XML读写操作,记之于笔记以备忘 主要功能: 1. 创建XML 2. 向XML中存储或者是读取Int float型基本数据 3. 通过创建XML元素,存取复杂的结构如:结构体.矩阵 代码如下 ...

  10. nodejs加解密

    加密分类 可逆加密和不可逆加密 不可逆加密: 加密后不可解密,只能通过碰撞密文以极小的概率解密; 可逆加密: 加密后可以解密;包括对称加密与非对称加密; 对称加密双方采用共同密钥; 非对称加密: 这种 ...