From 6461f5659505768e7a90594c3aab47f90d9ee213 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Mon, 22 Aug 2022 00:37:40 +0800 Subject: [PATCH] 弹窗添加可移动 --- src/components/group/tool.vue | 101 ++++++++++++++++++++++++++++++++++---------------- 1 files changed, 69 insertions(+), 32 deletions(-) diff --git a/src/components/group/tool.vue b/src/components/group/tool.vue index cb4ca7b..83952df 100644 --- a/src/components/group/tool.vue +++ b/src/components/group/tool.vue @@ -1,28 +1,50 @@ <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="showPreview"> - 预览 - <a-icon type="youtube" /> - </a-button> - <a-button @click="showModal"> - 日志 - <a-icon type="plus-circle" /> - </a-button> - <a-button @click="showScreen"> - {{screenModel}} - <transition name="fade"> - <a-icon :type="iconType" /> - </transition> - </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;" /> @@ -32,15 +54,33 @@ </template> <script> + import myConstant from "../../config/myConstant.js" + export default { data() { return { - iconType: "arrows-alt", screen: false, - screenModel: "拉伸" + 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: { + changeDrawerStatus() { + this.drawerStatus = !this.drawerStatus; + }, + addLink() { + this.$emit('addLink') + }, + showMessage() { + this.$emit('showMessage') + }, showModal() { this.$emit('showModal') }, @@ -49,13 +89,6 @@ }, showScreen() { this.$emit('showScreen') - if (this.screen) { - this.screenModel = "拉伸"; - this.iconType = "arrows-alt"; - } else { - this.screenModel = "缩小"; - this.iconType = "shrink" - } this.screen = !this.screen; } }, @@ -63,5 +96,9 @@ </script> <style lang="less"> - + .myButton { + button { + min-width: 90px; + } + } </style> -- Gitblit v1.9.1