vue中的ElementUI 及轮播插件(Vue-Awesome-Swiper)

一、 ElementUI

1、安装:

npm install element-ui -S

2、引用:
main.js中:

import ElementUI from 'element-ui'
//   现在的版本已经没有theme-default了,只有theme-chalk。
import 'element-ui/lib/theme-chalk/index.css'         // 注意********
Vue.use(ElementUI)

3、直接在组件中用

详细用法可参考:
https://www.cnblogs.com/songdongdong/p/6929037.html

4、elementUI版本升级:

npm uninstall element-ui // 卸载原有版本
npm install element-ui -S // 重新安装
main.js中:(default修改为theme-chalk)

import 'element-ui/lib/theme-chalk/index.css'

//www.greatytc.com/p/4257d342ca05

二、 Vue中的轮播插件(Vue-Awesome-Swiper)

1、安装:

npm install vue-awesome-swiper --save

2、main.js中:

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

3、组件中:

import { swiper, swiperSlide } from 'vue-awesome-swiper'
require('swiper/dist/css/swiper.css')
export default {
  components: {
    swiper,
    swiperSlide
  },
 data () {
    return {
      swiperOption: {
        notNextTick: true,
        // 循环
        loop: true,
        // 设定初始化时slide的索引
        initialSlide: 0,
        // 自动播放
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: true
        },
        // 滑动速度
        speed: 800
        ......
        // 可自己修改、添加
  }
}
<body>
  <swiper :options="swiperOption" ref="mySwiper">
    <!-- slides -->
    <swiper-slide>I'm Slide 1</swiper-slide>
    <swiper-slide>I'm Slide 2</swiper-slide>
     ...
    <div class="swiper-pagination"  slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
  </swiper>
</body>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容