跑马灯效果javascript
全局注册组件css
代码:html
main.jsvue
import Vue from 'vue' import 'normalize.css/normalize.css' // A modern alternative to CSS resets import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import locale from 'element-ui/lib/locale/lang/en' // lang i18n import '@/styles/index.scss' // global css import App from './App' import store from './store' import router from './router' import '@/icons' // icon import '@/permission' // permission control import { Carousel, CarouselItem } from 'element-ui' Vue.use(Carousel) Vue.use(CarouselItem) /** * If you don't want to use mock-server * you want to use MockJs for mock api * you can execute: mockXHR() * * Currently MockJs will be used in the production environment, * please remove it before going online! ! ! */ import { mockXHR } from '../mock' if (process.env.NODE_ENV === 'production') { mockXHR() } // set ElementUI lang to EN Vue.use(ElementUI, { locale }) Vue.config.productionTip = false new Vue({ el: '#app', router, store, render: h => h(App) })
index.vuejava
<template> <div class="block"> <br /> <el-carousel indicator-position="outside" height="350px" type="card"> <el-carousel-item v-for="item in images" :key="item"> <img :src="item" /> </el-carousel-item> </el-carousel> <br /> <hr /> <card></card> </div> </template> <script> //import { Carousel, CarouselItem } from 'element-ui'; import card from './card'; export default { name: 'Dashboard', data() { return { images: [ 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg', 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg', 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg', 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg', 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg', 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg' ] } }, components: { 'card': card // 'el-carousel': Carousel, // 'el-carousel-item': CarouselItem } }; </script> <style lang="scss" scoped> .dashboard { &-container { margin: 30px; } &-text { font-size: 30px; line-height: 46px; } } </style>
局部注册组件element-ui
代码:api
<template> <div class="block"> <br /> <el-carousel indicator-position="outside" height="350px" type="card"> <el-carousel-item v-for="item in images" :key="item"> <img :src="item" /> </el-carousel-item> </el-carousel> <br /> <hr /> <card></card> </div> </template> <script> import { Carousel, CarouselItem } from 'element-ui'; import card from './card'; export default { name: 'Dashboard', data() { return { images: [ 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg', 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg', 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg', 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg', 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg', 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg' ] } }, components: { 'card': card, 'el-carousel': Carousel, 'el-carousel-item': CarouselItem } }; </script> <style lang="scss" scoped> .dashboard { &-container { margin: 30px; } &-text { font-size: 30px; line-height: 46px; } } </style>
index.jsapp
其余三个文件的关系ide