侧边栏的打开与收起

侧边栏的打开与收起

<template><div class="box"><div class="sideBar" :class="showBox ? '' : 'controller-box-hide'"><div class="showBnt" @click="showBox=!showBox"><i class="el-icon-arrow-right" v-show="showBox"></i><i class="el-icon-arrow-left" v-show="!showBox"></i></div></div></div>
</template><script>
export default {data() {return {showBox: true,}}}
</script><style lang="scss" scoped>
.sideBar {width: 368px;height: 82%;background-color: rgba(7, 20, 35, 0.7);position: fixed;top: 8%;right: 0px;transition: right 0.5s;
}
.showBnt {position: absolute;top: calc(50% - 82px);right: 368px;width: 20px;height: 82px;z-index: 99;background: url("../assets/img/right.png");font-size: 20px;color: #f0f0f0;display: flex;justify-content: center;align-items: center;
}
.controller-box-hide {right: -368px !important;transition: right 0.5s;
}
</style>