1. 安装
element-
ui: `npm install
element-
ui --save`
2. 引入
element-
ui和样式文件
```
javascript
import Vue from 'vue'
import
ElementUI from '
element-
ui'
import '
element-
ui/lib/theme-chalk/index.css'
Vue.use(
ElementUI)
```
3. 创建Carousel
组件
```vue
<template>
<el-carousel :interval="interval">
<el-carousel-item v-for="(item, index) in list" :key="index">
<div class="card">
<div class="card-img">
<img :src="item.imgUrl" alt="">
</div>
<div class="card-info">
<h3>{{ item.title }}</h3>
<p>{{ item.
desc }}</p>
<a :href="item.link" target="_blank">了解更多</a>
</div>
</div>
</el-carousel-item>
</el-carousel>
</template>
<s
cript>
export default {
name: 'MyCarousel',
props: {
list: {
type: Array,
default: () => []
},
interval: {
type: Number,
default: 3000
}
}
}
</s
cript>
<style scoped>
.card {
display: flex;
flex-direct
ion: column;
align-items: center;
justify-content: center;
height: 200px;
width: 300px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.card-img {
height: 120px;
width: 100%;
overflow: hidden;
border-radius: 4px 4px 0 0;
}
.card-img img {
height: 100%;
width: 100%;
object-fit: cover;
}
.card-info {
padding: 16px;
text-align: center;
}
.card-info h3 {
font-size: 18px;
margin-bottom: 10px;
}
.card-info p {
font-size: 14px;
margin-bottom: 10px;
color: #999;
}
.card-info a {
display: inline-block;
font-size: 14px;
color: #409eff;
}
</style>
```
4. 在父
组件中使用Carousel
组件
```vue
<template>
<my-carousel :list="list" />
</template>
<s
cript>
import MyCarousel from './MyCarousel.vue'
export default {
components: {
MyCarousel
},
data() {
return {
list: [
{
imgUrl: 'https://picsum.photos/300/200/?image=10',
title: 'Card Title 1',
desc: 'Card
Description 1',
link: 'https://www.example.com'
},
{
imgUrl: 'https://picsum.photos/300/200/?image=20',
title: 'Card Title 2',
desc: 'Card
Description 2',
link: 'https://www.example.com'
},
{
imgUrl: 'https://picsum.photos/300/200/?image=30',
title: 'Card Title 3',
desc: 'Card
Description 3',
link: 'https://www.example.com'
},
{
imgUrl: 'https://picsum.photos/300/200/?image=40',
title: 'Card Title 4',
desc: 'Card
Description 4',
link: 'https://www.example.com'
}
]
}
}
}
</s
cript>
```
例如上图是个表单模型，我在表单里面使用了<el-input></el-input>，达到了通过v-model的数据模型来动态修改，展示数据的效果。但当我用到了描述列表中，又发现了问题
4784
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
