自从用饿了么框架重构项目以来，遇到 很多问题，我都有一一记录下来，现在特喜欢这个框架，说实话，如果你是用了vue这个技术栈的话，一定要用饿了么的pc端框架哦，遇到问题的时候在网上百度一下，就能找到解决方案，还有很多社区可以讨论，社区文档都比较成熟，很容易上手~~
在添加的时候，需要点击添加按钮，出现一个form弹框的效果
使用饿了么做项目，最重要的一个小功能，也是必不可少的，那就是轮播图，相信大部分的项目里面都是需要这个效果的，看了一下文档里面，也有写好了示例代码，给了一个比较专业的称呼，走马灯效果，也就是我们要的轮播图~~
<template> <el-carousel indicator-position="outside"> <el-carousel-item v-for="item in 4" :key="item"> <h3>{{ item }}</h3> </el-carousel-item> </el-carousel> </template> <style> .el-carousel__item h3 { color: #475669; font-size: 18px; opacity: 0.75; line-height: 300px; margin: 0; } .el-carousel__item:nth-child(2n) { background-color: #99a9bf; } .el-carousel__item:nth-child(2n+1) { background-color: #d3dce6; } </style>
效果
这是例子里面的代码
现在我们要将几张图片替换上去
准备四张banner图片
放在asset文件夹底下
参考
<template> <el-carousel indicator-position="outside" style="width:800px"> <el-carousel-item v-for="item in imgArray" :key="item"> <img :src="item" class="rightImg"> </el-carousel-item> </el-carousel> </template> <script> export default { name: "XXXXXXX", data() { return { imgArray: [ require('../assets/1.png'), require('../assets/2.png'), require('../assets/3.png'), require('../assets/4.png') ] } } } </script> <style> .rightImg { width: 800px; height: 540px; } .el-carousel__item h3 { color: #475669; font-size: 18px; opacity: 0.75; line-height: 300px; margin: 0; } .el-carousel__item:nth-child(2n) { background-color: #99a9bf; } .el-carousel__item:nth-child(2n+1) { background-color: #d3dce6; } </style>
ok，这样就可以了~~
