vue 实现点击左箭头显示右箭头隐藏
展示效果：
隐藏效果
直接代码：
<el-row :gutter="10" v-if="drawer">
<el-col :xs="24" :sm="16" :md="16" :lg="16">
<!-- 地图 -->
<amapindex @handlerJump='handlerJump' @handler='handler' :school_num='school_num' :canteen_num_inuse='canteen_num_inuse' :canteen_num='canteen_num' :people='people' :allschools='allschools' :allcanteens='allcanteens'/>
</el-col>
<!-- 隐藏详情箭头 -->
<el-col :xs="24" :sm="8" :md="8" :lg="8" style="height: 100%;
background: #fff;
top: 0;
right: 0;
position: absolute;
z-index: 2;
margin: 0;">
<div id="code_arrow" title="隐藏详情" @click="drawer=false">
<span>›</span>
</div>
<el-collapse v-model="activeNames" @change="handleChange"
v-loading="listLoading"
element-loading-text="请选择食堂"
element-loading-spinner="el-icon-loading" >
<el-collapse-item title="直播广场" name="1">
<el-carousel :autoplay='false'>
<el-carousel-item v-for="item in deviceList" :key="item">
<el-card :body-style="{ padding: '0px' }">
<div style="padding: 14px;">
<div class="bottom clearfix">
<span style="float: right; padding: 3px 0">视频名：{{item.name}}</span>
</div>
</div>
<videoplayer :videoType='item.videoType' :videoUrl='item.videoUrl' />
</el-card>
</el-carousel-item>
</el-carousel>
</el-collapse-item>
<el-collapse-item title="今日现场" name="2">
<el-carousel :autoplay='false'>
<el-carousel-item v-for="item in todayList" :key="item">
<el-card :body-style="{ padding: '0px' }">
<div style="padding: 14px;">
<div class="bottom clearfix">
<span style="float: right; padding: 3px 0">视频名：{{item.name}}</span>
</div>
</div>
<videoplayer :videoType='item.videoType' :videoUrl='item.videoUrl' />
</el-card>
</el-carousel-item>
</el-carousel>
</el-collapse-item>
</el-collapse>
</el-col>
</el-row>
<el-row :gutter="10" v-else>
<el-col :xs="24" :sm="24" :md="24" :lg="24">
<!-- 地图 -->
<amapindex @handlerJump='handlerJump' @handler='handler' :school_num='school_num' :canteen_num_inuse='canteen_num_inuse' :canteen_num='canteen_num' :people='people' :allschools='allschools' :allcanteens='allcanteens'/>
</el-col>
<!-- 展示详情箭头 -->
<div style="height: 100%;
background: #fff;
top: 0;
right: 0;
position: absolute;
z-index: 2;
margin: 0;">
<div id="code_arrow" title="展开详情" @click="drawer=true">
<span>‹</span>
</div>
</div>
</el-row>
通过控制drawer显示隐藏
data() {
return {
//抽屉窗
drawer: false,
}
}
箭头div样式
<style>
#code_arrow {
width: 15px;
height: 94px;
background: #15A3FA;
position: absolute;
top: 50%;
margin: -48px 0 0 -15px;
cursor: pointer;
line-height: 88px;
font-size: 36px;
font-weight: 200;
font-family: Times;
text-align: center;
border-radius: 4px 0 0 4px;
color: #fff;
visibility: visible;
left: 0;
/* display: none; */
box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
</style>
