Element-UI是一套基于Vue2.0的UI組件庫，http://element.eleme.io/#/zh-CN/component/carousel

首先npm install element-ui --save

然后在main.js中引入：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import App from './App.vue'Vue.use(ElementUI)new Vue({el: '#app',render: h => h(App)
})

即可使用

<template><el-carousel :interval="4000" type="card" height="200px"><el-carousel-item v-for="item in 6" :key="item"><h3>{{ item }}</h3></el-carousel-item></el-carousel>
</template><style>.el-carousel__item h3 {color: #475669;font-size: 14px;opacity: 0.75;line-height: 200px;margin: 0;}.el-carousel__item:nth-child(2n) {background-color: #99a9bf;}.el-carousel__item:nth-child(2n+1) {background-color: #d3dce6;}
</style>

將圖片引入的一個效果：

若單頁則引入js和css即可

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

?

轉載于:https://www.cnblogs.com/rlann/p/7244130.html

總結

以上是生活随笔為你收集整理的在vue中使用Element-UI的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。