From 74344a2ec388b78fe906a22c31f8fdb77fc60b12 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Fri, 04 Mar 2022 15:55:59 +0800 Subject: [PATCH] 404页面优化,页面响应式变化适配 --- src/components/group/tool.vue | 32 +++++++++++++++++++++++++------- 1 files changed, 25 insertions(+), 7 deletions(-) diff --git a/src/components/group/tool.vue b/src/components/group/tool.vue index 05d4ea7..18522b5 100644 --- a/src/components/group/tool.vue +++ b/src/components/group/tool.vue @@ -8,13 +8,19 @@ <!-- <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}} - <a-icon type="arrows-alt" /> + <transition name="fade"> + <a-icon :type="iconType" /> + </transition> </a-button> <!-- <a-button> @@ -29,29 +35,41 @@ export default { data() { return { + iconType: "arrows-alt", screen: false, screenModel: "拉伸" } }, methods: { - showDrawer1() { - this.$emit('showDrawer1') - }, showModal() { this.$emit('showModal') + }, + showPreview() { + this.$emit('showPreview') }, showScreen() { this.$emit('showScreen') if (this.screen) { this.screenModel = "拉伸"; - }else{ + this.iconType = "arrows-alt"; + } else { this.screenModel = "缩小"; + this.iconType = "shrink" } - this.screen=!this.screen; + this.screen = !this.screen; } }, } </script> -<style> +<style lang="less"> + .fade-enter-active, + .fade-leave-active { + transition: opacity .5s; + } + + .fade-enter, + .fade-leave-to { + opacity: 0; + } </style> -- Gitblit v1.9.1