vue中的elementUI组件之轮播carousel card使用小记

<el-row :gutter="0">
			<el-carousel :interval="0" arrow="never" height="500px" type="card">
				<el-carousel-item v-for="item in dataimg" :key="item">
					<div class="grid-content">
						<el-col :md="12" :offset="6">
							<div>
								<img :src="item.src">
								<p class="italictext">{{item.txt}}</p>
								<span class="service">{{item.txt2}}</span>
								<p class="last">{{item.txt3}}</p>
							</div>
						</el-col>
					</div>
				</el-carousel-item>
			</el-carousel>
		</el-row>

js：

export default {
		name: 'AboutUs',
		data() {
			return {
				
				dataimg: [{
						src: require('../assets/img/img01_03.png'),
						txt: '"Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna."',
						txt2: '一站式服务',
						txt3: 'Miami, FL'
					},
					{
						src: require('../assets/img/img02_03.jpg'),
						txt: '"Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor."',
						txt2: '国际服务',
						txt3: 'Greensboro, NC'
					},
					{
						src: require('../assets/img/img02_05.jpg'),
						txt: '"Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna."',
						txt2: '全网渠道',
						txt3: 'Charlotte, NC'
					}
				]
			}
		}
	}

在js中写入src路径需要使用require来请求，不然无法加载图片，type=card将轮播风格设置成3D效果，for循环item in dataimg item为内容，dataimg为内容个数，也可以设置成数字，左右按钮arrow="never/always/hover" 不显示/显示/鼠标悬停;

interval设置自动轮播时间 默认为3000ms 设置为0关闭自动轮播

来源：CSDN

作者：qinyong^_^

链接：https://blog.csdn.net/qinyongqaq/article/details/80817628