rt-sim-training-client/src/views/trainingManage/demonMenu.vue

<template>
  <div>
    <div class="display_top_draft">
      <div class="btn_hover" @click="menuClick">菜单</div>
      <el-button-group ref="button_group_box" class="button_group_box" :style="`margin-left:${btnWidth}px`">
        <el-button size="small" @click="showList">实训列表</el-button>
      </el-button-group>
    </div>
    <TrainingList ref="trainingList" @editBlob="editBlob" />
    <EditContent ref="EditBlob" v-dialogDrag />
  </div>
</template>
<script>
import TrainingList from './trainingList.vue';
import EditContent from './EditContent.vue';
export default {
    name:'DemonMenu',
    components:{
        TrainingList,
        EditContent
    },
    props:{
    },
    data() {
        return {
            hoverBtn: false,
            btnWidth: -600
        };
    },
    computed:{
        group() {
            return this.$route.query.group;
        },
        mapId() {
            return this.$route.query.mapId;
        },
        lineCode() {
            return this.$route.query.lineCode;
        }
    },
    mounted() {
    },
    methods:{
        menuClick() {
            this.hoverBtn = !this.hoverBtn;
            if (this.hoverBtn) {
                this.btnWidth = 0; // 默认宽度
            } else {
                this.btnWidth = -600;
            }
        },
        showList() {
            this.$refs.trainingList.doShow();
        },
        editBlob(data) {
            this.$refs.EditBlob.doShow(data);
        }

    }
};
</script>
<style lang="scss" scoped>
.display_top_draft{
	position: absolute;
	left: 5px;
	top: 15px;
	height: 32px;
	overflow: hidden;
	padding-left: 44px;
	z-index: 35;
	.btn_hover{
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;
		color: #4e4d4d;
		font-size: 14px;
		background: #fff;
		padding: 8px;
		border-radius: 5px;
		display: block;
		cursor: pointer;
		float: left;
		height: 32px;
	}
	.button_group_box{
		float: left;
		transition: all 0.5s;
		overflow: hidden;
	}
}
</style>