封装一个中间大两头小的轮播图（vue-awesome-swiper、vue2）
需求
先看效果图
对vue来说，element-UI是有相应的轮播组件（走马灯）的，但相对简单的
如上面的两头大中间小轮播，element上文档这款很类似，但不适用，因为卡片之间底层移动和间距是依赖js实现的，当页面存在间距而且不同页面需要适配时，我从控制css样式层面很难实现。
所以有了这个组件的封装
提示：
本组件
1、封装中只使用了一些网络资源图片
2、提供了初始化默认是数据
3、使用插槽默认一些代码布局
属于拿来代码导入即可直接看到效果的
实现
vue-awesome-swiper安装
对vue-awesome-swiper来说，版本不同会出现很多问题（比如导入的css文件位置）
swiper和vue-awesome-swiper的版本一定要相对应
版本安装
npm i [email protected] [email protected] --save
"swiper": "^4.5.1",
"vue-awesome-swiper": "^3.1.3",
代码
提供了网络图片的默认数据sceneCardList
提供了slot插槽供提供布局代码
组件封装代码
<template>
<div class="main-conent main-conent-screen main-conent-bgFFF main-conent-borderradius">
<div class="swiper">
<swiper v-slot="{item}" :swiperlist="sceneCardList" @selectItem="selectItem">
<div class="CasesCard-li" @click="selectItem(item)">
<img :src="item.url" alt="">
<div class="info">
<img :src="item.img" alt="">
<div class="CasesCard-li-name">{{ item.text }}</div>
<div class="CasesCard-li-text">
--{{ item.name }}
</div>
</div>
</div>
</swiper>
</div>
<div class="screen-header">
<el-row>
<el-col :span="8">
<el-button v-hasPermi="['3']" type="primary" icon="el-icon-plus">新增</el-button>
<el-dropdown class="margin-l10">
<el-button type="primary" icon="el-icon-plus">
更多操作<i class="el-icon-arrow-down el-icon--right" />
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>批量删除</el-dropdown-item>
<el-dropdown-item>批量审批</el-dropdown-item>
<el-dropdown-item>批量编辑</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
<el-col :span="16" class="text-right">
<el-input
v-model="search"
class="margin-l10"
style="width:200px;"
placeholder="请输入搜索内容"
>
<i slot="suffix" class="el-input__icon el-icon-search cursor-pointer" />
</el-input>
</el-col>
</el-row>
</div>
<screen-table
class="screen-conent assets-grey-theme-table"
table-class="custom-table"
header-row-class-name="custom-table-header"
:data="tableData"
>
<el-table-column
fixed
type="selection"
width="55"
/>
<el-table-column
fixed
prop="date"
label="日期"
width="150"
/>
<el-table-column
prop="name"
label="姓名"
min-width="120"
/>
<el-table-column
prop="province"
label="省份"
min-width="120"
/>
<el-table-column
prop="city"
label="市区"
min-width="120"
/>
<el-table-column
prop="address"
label="地址"
min-width="300"
/>
<el-table-column
prop="zip"
label="邮编"
min-width="120"
/>
<el-table-column
fixed="right"
label="操作"
width="100"
>
<template slot-scope="scope">
<el-button type="text" @click="handleClick(scope.row)">查看</el-button>
<el-dropdown class="margin-l5">
<span class="cursor-pointer">
<el-button type="text">更多<i class="el-icon-arrow-down el-icon--right" /></el-button>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="tableEdit(scope.row)">编辑</el-dropdown-item>
<el-dropdown-item @click.native="tableDel(scope.row)">删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</screen-table>
<el-link v-clipboard:copy="value" v-clipboard:success="clipboardSuccess" :underline="false" icon="el-icon-document-copy" style="float:right">复制</el-link>
<pre>{{ value }}</pre>
<div class="screen-footer text-right">
<el-pagination
background
layout="sizes, prev, pager, next, total"
:page-sizes="[10, 20, 50, 100]"
:total="1000"
/>
</div>
<breadcrumb />
<!-- <tui-editor ref="tuieditor" v-model="content" />
<tui-editor-viewer v-model="content" /> -->
<!-- 建议使用以下的编辑器 -->
<!-- <mavon-editor
v-model="content"
:subfield="false"
:toolbars-flag="true"
:box-shadow="false"
default-open="edit"
preview-background="#FFFFFF"
/>
<CKEditor v-model="editorData" /> -->
<quillEditor />
<tree-table
:data="treeData"
class="height-100"
:column="treeTableColumn"
node-key="id"
>
<template v-slot:default="{ node, treeData }">
<el-button
type="text"
size="mini"
@click.stop="add(node.level, treeData)"
>
新增下级
</el-button>
<el-button
type="text"
size="mini"
@click.stop="add(node.level, treeData)"
>
修改
</el-button>
<el-button
type="text"
size="mini"
@click.stop="del(treeData)"
>
删除
</el-button>
</template>
</tree-table>
</div>
</template>
<script>
import ScreenTable from '@/components/ScreenTable'
import Breadcrumb from '@/components/Breadcrumb'
import quillEditor from '@/components/quillEditor'
import TuiEditor from '@/components/TuiEditor'
import TuiEditorViewer from '@/components/TuiEditor/Viewer'
import MavonEditor from '@/components/MavonEditor'
import CKEditor from '@/components/CKEditor'
import TreeTable from '@/components/TreeTable'
import swiper from './swiper/index.vue'
import yiliao from '@/assets/images/cooperate/yiliao.png'
import juxing from '@/assets/images/cooperate/矩形(3).png'
export default {
components: {
ScreenTable,
Breadcrumb,
quillEditor,
TreeTable,
swiper
// CKEditor,
// TuiEditor,
// TuiEditorViewer,
// MavonEditor
},
data() {
return {
sceneCardList: [
{
name: '联想集团',
text: '在国能云IoT物联网使能服务的基础上，帮助企业了解完整的设备全生命周期管理能力数据，提供设备物模型，简化物联网应用开发难度、缩短开发时间，降低物联网应用开…',
img: yiliao,
url: juxing
},
{
name: '联想集团',
text: '在国能云IoT物联网使能服务的基础上，帮助企业了解完整的设备全生命周期管理能力数据，提供设备物模型，简化物联网应用开发难度、缩短开发时间，降低物联网应用开…',
go: '前往云市场',
img: yiliao,
url: juxing
},
{
name: '联想集团',
text: '在国能云IoT物联网使能服务的基础上，帮助企业了解完整的设备全生命周期管理能力数据，提供设备物模型，简化物联网应用开发难度、缩短开发时间，降低物联网应用开…',
img: yiliao,
url: juxing
},
{
name: '联想集团',
text: '在国能云IoT物联网使能服务的基础上，帮助企业了解完整的设备全生命周期管理能力数据，提供设备物模型，简化物联网应用开发难度、缩短开发时间，降低物联网应用开…',
go: '前往云市场',
img: yiliao,
url: juxing
},
{
name: '联想集团',
text: '在国能云IoT物联网使能服务的基础上，帮助企业了解完整的设备全生命周期管理能力数据，提供设备物模型，简化物联网应用开发难度、缩短开发时间，降低物联网应用开…',
go: '前往云市场',
img: yiliao,
url: juxing
},
{
name: '联想集团',
text: '在国能云IoT物联网使能服务的基础上，帮助企业了解完整的设备全生命周期管理能力数据，提供设备物模型，简化物联网应用开发难度、缩短开发时间，降低物联网应用开…',
go: '前往官方文档',
img: yiliao,
url: juxing
}
],
content: '# This is Test.',
contentHtml: '',
search: '',
value: '123test',
editorData: 'Content of the editor.
',
tableData: [
{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
},
{
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1517 弄',
zip: 200333
},
{
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333
},
{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333
},
{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
},
{
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1517 弄',
zip: 200333
},
{
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333
},
{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333
},
{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
},
{
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1517 弄',
zip: 200333
}
],
treeTableColumn: [
{
title: '分类列表',
label: 'label1',
minWidth: 300
},
{
title: '简称',
label: 'short',
minWidth: 300
}
],
treeData: [
{
id: 1,
label1: '一级 1',
short: 'one 1',
children: [{
id: 4,
label1: '二级 1-1',
short: 'two 1-1',
content: '111',
children: []
}]
},
{
id: 2,
label1: '一级 2',
short: 'one 2',
children: [{
id: 5,
label1: '二级 2-1',
short: 'two 2-1'
}, {
id: 6,
label1: '二级 2-2',
short: 'two 2-3'
}]
},
{
id: 3,
label1: '一级 3',
short: 'one 3',
children: [{
id: 7,
label1: '二级 3-1',
short: 'tow 3-1'
}, {
id: 8,
label1: '二级 3-2',
short: 'tow 3-2'
}]
},
{
id: 20,
label1: '一级 4',
short: 'one 4',
children: [{
id: 21,
label1: '二级 4-1',
short: 'tow 4-1'
}, {
id: 22,
label1: '二级 4-2',
short: 'tow 4-2'
}]
},
{
id: 30,
label1: '一级 5',
short: 'one 5',
children: [{
id: 31,
label1: '二级 5-1',
short: 'tow 5-1'
}, {
id: 32,
label1: '二级 5-2',
short: 'tow 5-2'
}]
}
]
}
},
created() {
this.$EventBus.$on('changePrice', (oldPrice, newPrice) => {
console.log(oldPrice, newPrice)
})
this.$EventBus.$emit('changePrice', 100, 200)
},
methods: {
selectItem(item) {
// 对选中的swiper项进行处理
console.log('选中的swiper项', item)
},
add(level, data) {
console.log(level, data)
this.$message({
message: '这里可以显示一个弹框表单',
type: 'success'
})
},
del(data) {
console.log(data)
this.$confirm('是否确认删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
message: '删除成功',
type: 'success'
})
}).catch(() => {})
},
getContent() {
this.contentHtml = this.$refs.tuieditor.getHtml()
},
imgUpload(fileOrBlob, callback) {
var formdata = new FormData()
formdata.append('image', fileOrBlob)
console.log(formdata, fileOrBlob)
/*
// ajax上传
request({
url: '/upload/img',
method: 'post',
data: formdata,
headers: { 'Content-Type': 'multipart/form-data' }
}).then(res => {
const { data } = res;
const { url, name } = data;
callback(url, name);
}).catch(err => {
console.log(err);
}); */
callback('https://gitee.com/lqsong/public/raw/master/common/Alipay.png', '赞助码')
},
/** 高亮显示 */
highlightedCode(code, key) {
},
/** 复制代码成功 */
clipboardSuccess() {
this.$modal.msgSuccess('复制成功')
},
handleClick(row) {
console.log(row)
},
tableEdit(row) {
console.log(row)
},
tableDel(row) {
this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
console.log(row)
this.$message({
type: 'success',
message: '删除成功!'
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
}
}
}
</script>
// 默认的插槽布局
<style lang="scss" scoped>
.swiper{
height: 350px;
position: relative;
}
.CasesCard-li{
width: 457px;
height: 350px;
background: linear-gradient(180deg, #DFE4F0 0%, #FFFFFF 17%, #FFFFFF 100%);
box-shadow: 4px 7px 18px 0px rgba(0,0,0,0.1);
border-radius: 4px;
margin-right: 32px;
&-text{
margin-top: 20px;
display: flex;
align-items: center;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #4E5969;
text-shadow: 4px 8px 20px rgba(0,0,0,0.1);
justify-content: end;
}
>img{
width: 100%;
height: 145px;
}
.info{
height: 205px;
background: linear-gradient(180deg, #DFE4F0 0%, #FFFFFF 17%, #FFFFFF 100%);
box-shadow: 4px 7px 18px 0px rgba(0,0,0,0.1);
border-radius: 4px;
padding: 0 32px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #4E5969;
line-height: 20px;
text-shadow: 4px 8px 20px rgba(0,0,0,0.1);
>img{
height: 48px;
box-shadow: 4px 8px 20px 0px rgba(0,0,0,0.1);
border-radius: 4px;
margin-bottom: 16px;
margin-top: 8px;
}
}
}
</style>
使用
导入组件
import swiper from './swiper/index.vue'
components: {
swiper
},
直接使用
// 直接使用
<swiper />
直接使用修改option配置项
// 直接使用
<swiper :swiper-option="options"/>
传递数据
<swiper :swiperlist="sceneCardList"></swiper>
数据格式：{
name: '联想集团',
text: '在国能云IoT物联网使能服务的基础上',
img: url,
url: url
}
传递数据并修改布局
<swiper v-slot="{item}" :swiperlist="sceneCardList">
<div class="CasesCard-li">
<img :src="item.url" alt="">
<div class="info">
<img :src="item.img" alt="">
<div class="CasesCard-li-name">{{ item.text }}</div>
<div class="CasesCard-li-text">
--{{ item.name }}
</div>
</div>
</div>
</swiper>