碼上快樂

相關內容    簡體    繁體

七、Vue組件庫：Element、Swiper（輪播專用組件）

本文轉載自   查看原文   2020-01-10 16:55   1039    Vue

一、vue的Element組件庫

官網：https://element.eleme.cn/#/zh-CN

1.1安裝

推薦安裝方法：
首先要進入項目目錄

cnpm i element-ui -S
	或
npm i element-ui -S

1.1.2 CDN安裝

直接引入無需安裝：

<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

1.2引入所有

官方：https://element.eleme.cn/2.13/#/zh-CN/component/quickstart
在src/main.js里引入

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

二、按需引入

第1步，安裝 babel-plugin-component：

cnpm install babel-plugin-component -D

第2步，配置src/.babelrc文件

【1】配置部分

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": [
    "transform-vue-jsx", "transform-runtime",
    [//【1】配置部分
          "component",
          {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
          }
    ]//配置結尾
  ]
}

第3步，引入部分組件，比如 Button 和 Select

那么需要在 main.js 中寫入以下內容（全局引入）：
【1】引入所需組件
【2】使用對應組件（以下2個）

import Vue from 'vue';
import { Button, Select } from 'element-ui'; //【1】引入所需組件
import App from './App.vue';

Vue.use(Button) //【2】使用對應組件（以下2個）
Vue.use(Select) 

/* 或寫為
 * Vue.component(Button.name, Button); 
 * Vue.component(Select.name, Select);
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

完整組件列表和引入方式詳見：

（完整組件列表以 components.json 為准）
https://element.eleme.cn/2.13/#/zh-CN/component/quickstart

第4步，全局配置（可選步驟）

在引入 Element 時，可以傳入一個全局配置對象。該對象目前支持 size 與 zIndex 字段。size 用於改變組件的默認尺寸，zIndex 設置彈框的初始 z-index（默認值：2000）。按照引入 Element 的方式，具體操作如下：

完整引入 Element：

import Vue from 'vue';
import Element from 'element-ui';
Vue.use(Element, { size: 'small', zIndex: 3000 });

按需引入 Element：

import Vue from 'vue';
import { Button } from 'element-ui';

Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
Vue.use(Button);

按照以上設置，項目中所有擁有 size 屬性的組件的默認尺寸均為 'small'，彈框的初始 z-index 為 3000。

第5步，開始使用

至此，一個基於 Vue 和 Element 的開發環境已經搭建完畢，現在就可以編寫代碼了。
官方使用文檔： https://element.eleme.cn/2.13/#/zh-CN/component/button
在文檔中找到button組件使用方法，把想要的樣式復制到想要的地方即可
在這里插入圖片描述

src/parent.vue

【1】使用Element的組件

<template>
  <div class="parent">
    <h1>路由實例parent</h1>
    <!-- 【1】使用Element的組件 -->
    <el-button>默認按鈕</el-button>
    <el-button type="primary">主要按鈕</el-button>
    <el-button type="success">成功按鈕</el-button>
    <el-button type="info">信息按鈕</el-button>
    <el-button type="warning">警告按鈕</el-button>
    <el-button type="danger">危險按鈕</el-button>
    <hr/>
    <el-button plain>朴素按鈕</el-button>
    <el-button type="primary" plain>主要按鈕</el-button>
    <el-button type="success" plain>成功按鈕</el-button>
    <el-button type="info" plain>信息按鈕</el-button>
    <el-button type="warning" plain>警告按鈕</el-button>
    <el-button type="danger" plain>危險按鈕</el-button>
  </div>
</template>

<script>

  export default{
    name:'parent',
    components:{},
    data(){
      return{
        list:[] 
      }
    },
    filters:{},
    directives:{},
  }
</script>

<style scoped>
</style>

效果：
在這里插入圖片描述

2.2 走馬燈（輪播）圖片展示組件使用示例

src/main.js

【1】以下2個為引入走馬燈必須組件
【2】以下2個為使用走馬燈組件

import Vue from 'vue'
import App from './App'
import router from '@/router.js'//先引入自定義路由
import {
  Button,
  Select,
  Carousel,//【1】以下2個為引入走馬燈必須組件
  CarouselItem,
   } from 'element-ui';

Vue.use(Button)
Vue.use(Select)
Vue.use(Carousel)//【2】以下2個為使用走馬燈必須組件
Vue.use(CarouselItem)

Vue.config.productionTip = false

new Vue({
  el: '#app',
  template: '<App/>',
  router,//把路由投到vue實例
  components: {
    App
  }
})

src/components/parent.vue

【0】定義一些圖片
【1】使用Element的走馬燈組件
【2】控制走馬燈圖片樣式

<template>
  <div class="parent">
    <h1>路由實例parent</h1>
    <hr/>
    <!-- 【1】使用Element的走馬燈組件 -->
    <el-carousel height="550px">
        <el-carousel-item v-for="(img,index) in imgs" :key="index">
          <img :src="img" /> <!-- 循環圖片 -->
        </el-carousel-item>
      </el-carousel>
  </div>
</template>

<script>

  export default{
    name:'parent',
    components:{},
    data(){
      return{
        imgs:[//【0】定義一些圖片
          "http://www.wallcoo.com/nature/2010_Landscape_1920_Desktop_11/wallpapers/1600x1200/Moose%20Pond%20and%20Mount%20Pleasant%20in%20Autumn%2C%20Maine.jpg",
          "https://cli.clewm.net/file/2015/01/20/81b71bc509d09368d4602a4b5b05d093.jpg",
          "https://hbimg.huabanimg.com/a84ec58661bc95efb974e2eebea2b3fd880a8fb12870a-ksYmbV_fw658",
        ]
      }
    },
    filters:{},
    directives:{},
  }
</script>

<style scoped>
  /* 【2】控制走馬燈圖片樣式 */
    .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      line-height: 150px;
      margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
       background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
       background-color: #d3dce6;
    }
    img {
      width:100%;
    }
</style>

效果：
在這里插入圖片描述

三、Swiper（輪播專用組件）

官網：https://www.swiper.com.cn
Vue中使用：https://github.com/surmon-china/vue-awesome-swiper
官方API文檔：https://www.swiper.com.cn/api/index.html

1.1 概述

  1. Swiper常用於移動端網站的內容觸摸滑動
  2. Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端。
  3. Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。
  4. Swiper開源、免費、穩定、使用簡單、功能強大，是架構移動終端網站的重要選擇！

1.2 安裝Swiper

CDN

<link rel="stylesheet" href="path/to/swiper/dist/css/swiper.css"/>
<script type="text/javascript" src="path/to/swiper.js"></script>
<script type="text/javascript" src="path/to/vue.min.js"></script>
<script type="text/javascript" src="path/to/dist/vue-awesome-swiper.js"></script>
<script type="text/javascript">
  Vue.use(window.VueAwesomeSwiper)
</script>

NPM

首先要進入項目目錄。

cnpm install vue-awesome-swiper --save
或
npm install vue-awesome-swiper --save

1.3 引入

1.3.1全局引入 （mount with global）

src/main.js

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

1.3.2組件內安裝（局部引入）（mount with component）

src/components/parent.vue

// require styles
import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  }
}

1.3.3 ssr安裝（mount with ssr）

// If used in nuxt.js/ssr, you should keep it only in browser build environment
if (process.browser) {
  const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr')
  Vue.use(VueAwesomeSwiper)
}

1.4 定義插件相關參數（custom swiper plugin）

src/main.js

import Swiper from 'swiper'
Swiper.use({
  name: 'pluginName',
  params: {
    pluginSwitch: false,
  },
  on: {
    init() {
      if (!this.params.pluginSwitch) return
      console.log('init')
    },
    // swiper callback...
  }
})

1.5 使用swiper

參數配置相關詳見官方API文檔：https://www.swiper.com.cn/api/index.html

src/main.js

import Vue from 'vue'
import App from './App'
import router from '@/router.js'//先引入自定義路由
//[1]引入swiper
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)//[2]使用swiper

Vue.use(Carousel)//以下2個為使用走馬燈必須組件
Vue.use(CarouselItem)

Vue.config.productionTip = false

new Vue({
  el: '#app',
  template: '<App/>',
  router,//把路由投到vue實例
  components: {
    App
  }
})

parent.vue

【0】-【3】

<template>
  <div class="parent">
    <h1>路由實例parent</h1>
    <hr/>
    <!-- 【1】使用swiper的輪播組件 -->
    <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
        <!-- slides -->
        <swiper-slide v-for="(img,i) in imgs" :key="i">
          <img :src="img"/>
        </swiper-slide>

        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div><!--分頁器。如果放置在swiper-container外面，需要自定義樣式。-->

        <!-- <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
        <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
      </swiper>

  </div>
</template>

<script>

  export default{
    name:'parent',
    components:{},
    data(){
      return{
        //【2】配置輪播相關參數都寫在此對象內部
        swiperOption: {
                  pagination: {
                      el: '.swiper-pagination',
                    },
                },
        imgs:[//【0】定義一些圖片
          "https://hbimg.huabanimg.com/a84ec58661bc95efb974e2eebea2b3fd880a8fb12870a-ksYmbV_fw658",
          "https://cli.clewm.net/file/2015/01/20/81b71bc509d09368d4602a4b5b05d093.jpg",
          "https://hbimg.huabanimg.com/a84ec58661bc95efb974e2eebea2b3fd880a8fb12870a-ksYmbV_fw658",
        ]
      }
    },
    filters:{},
    directives:{},
  }
</script>

<style scoped>
  /* 【3】控制輪播圖樣式 */
.swiper-container{
    --swiper-theme-color: #ff6600;
    --swiper-pagination-color: #00ff33;/* 兩種都可以 */
  }
img {
width:800px;
}
</style>

效果：
在這里插入圖片描述


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Vue 組件庫：Element vue使用swiper輪播組件開啟loop模式時的問題總結 Vue以CDN方式調用Swiper輪播異常 Vue-Awesome-Swiper無縫輪播 vue中引用swiper輪播插件 vue2 使用 swiper 輪播圖效果 vue 使用swiper的異形輪播圖 swiper輪播 vue封裝一個swiper組件 angula2 輪播效果組件angular2-swiper
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM