src/components/group/tool.vue

@@ -1,41 +1,104 @@
<template>
   <a-affix :offset-top="600">

      <div style="padding-left:5px;">
         <a-button @click="showDrawer1">
            抽屉1
         </a-button>
         <!-- <a-button @click="showDrawer2">
            抽屉2
         </a-button> -->
         <a-button @click="showModal">
            日志
            <a-icon type="plus-circle" style="margin-left: 0px;" />
         </a-button>

         <a-button>
      <div style="padding-left:5px;" class="myButton">
         <div>
            <a-button @click="()=>this.$router.back(-1)">
               后退
               <a-icon type="left" />
            </a-button>
            <a-button v-if="!drawerStatus" @click="changeDrawerStatus">
               展开
               <a-icon type="down" />
            </a-button>
            <a-button v-if="drawerStatus" @click="changeDrawerStatus">
               合上
               <a-icon type="up" />
            </a-button>
         </div>
         <div v-if="drawerStatus">
            <a-button @click="showScreen" v-if="!screen">
               拉伸
               <a-icon type="arrows-alt" />
            </a-button>
            <a-button @click="showScreen" v-if="screen">
               缩小
               <a-icon type="shrink" />
            </a-button>
				
            <a-button @click="showPreview">
               预览
               <a-icon type="youtube" />
            </a-button>
            <a-button @click="showModal">
               日志
               <a-icon type="plus-circle" />
            </a-button>
            <a-button @click="addLink" v-if="showHidenButton">
               加链
               <a-icon type="smile" />
            </a-button>
            <a-button @click="showMessage">
               <a-badge status="success">
                  <span>消息</span>
               </a-badge>
               <a-icon type="message" />
            </a-button>
         </div>
         <!-- <a-button>
            工具
            <a-icon type="tool" style="margin-left: 0px;" />
         </a-button>
         </a-button> -->
      </div>
   </a-affix>
</template>

<script>
   import myConstant from "../../config/myConstant.js"

   export default {
      data() {
         return {}
         return {
            screen: false,
            showHidenButton: false,
            drawerStatus: false
         }
      },
      mounted() {
         let tempVisitorData = localStorage.getItem(myConstant.visitorDataKey);
         if (tempVisitorData != null && JSON.parse(tempVisitorData).nickName == myConstant.userName) {
            //this.$message.info("认证成功..")
            this.showHidenButton = true
         }
      },
      methods: {
         showDrawer1() {
            this.$emit('showDrawer1')
         changeDrawerStatus() {
            this.drawerStatus = !this.drawerStatus;
         },
         addLink() {
            this.$emit('addLink')
         },
         showMessage() {
            this.$emit('showMessage')
         },
         showModal() {
            this.$emit('showModal')
         },
         showPreview() {
            this.$emit('showPreview')
         },
         showScreen() {
            this.$emit('showScreen')
            this.screen = !this.screen;
         }
      },
   }
</script>

<style>
<style lang="less">
   .myButton {
      button {
         min-width: 90px;
      }
   }
</style>