zoukankan      html  css  js  c++  java
  • vue项目中引入第三方框架

    element-ui

      npm install element-ui -- save;

      main.js中

        import Element from 'element-ui';

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

        Vue.use(Element);

    swiper

      npm install vue-awesome-swiper --save

      main.js中

        import VueAwesomeSwiper from 'vue-awesome-swiper';

        import 'swiper/dist/css/swiper.css';
        Vue.use(VueAwesomeSwiper);
      
      页面中用法  
        <swiper :options="swiperOption" ref="mySwiper">
          <swiper-slide>
            <img src="../../assets/home/home_banner_1.png"/>
          </swiper-slide>
          <swiper-slide>
            <img src="../../assets/home/home_banner_2.png"/>
          </swiper-slide>
          <!-- Optional controls -->
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
     
        
         data中: 
          swiperOption: {
            loop: true,
            speed: 1000,
            autoplay: {
              delay: 2000,
              autoplayDisableOnInteraction: false
            },
            pagination: {
              el: '.swiper-pagination'
            }
          }
     
        computed: {
          swiper() {
            return this.$refs.mySwiper.swiper
          }
        }
      
      
  • 相关阅读:
    WPF的布局--DockPanel
    WPF的布局--StackPanel
    C#中的不可空类型转为可空类型
    linux下安装nodejs及npm
    HTML DOM 事件对象 ondragend 事件
    pc端页面在移动端显示问题
    css设置文字上下居中,一行文字居中,两行或多行文字同样居中。
    超简单的gif图制作工具
    Git创建与合并分支
    props default 数组/对象的默认值应当由一个工厂函数返回
  • 原文地址:https://www.cnblogs.com/Mr-Rshare/p/10143422.html
Copyright © 2011-2022 走看看