| commit | author | age | ||
| b505f3 | 1 | <template> |
| I | 2 | <a-affix :offset-top="600"> |
| 3 | ||
| 4 | <div style="padding-left:5px;"> | |
| f9c38e | 5 | <!-- <a-button @click="showDrawer1"> |
| b505f3 | 6 | 抽屉1 |
| f9c38e | 7 | </a-button> --> |
| b505f3 | 8 | <!-- <a-button @click="showDrawer2"> |
| I | 9 | 抽屉2 |
| 10 | </a-button> --> | |
| 9c695b | 11 | <a-button @click="showPreview"> |
| I | 12 | 预览 |
| 13 | <a-icon type="youtube" /> | |
| 14 | </a-button> | |
| b505f3 | 15 | <a-button @click="showModal"> |
| I | 16 | 日志 |
| f9c38e | 17 | <a-icon type="plus-circle" /> |
| I | 18 | </a-button> |
| 19 | <a-button @click="showScreen"> | |
| 20 | {{screenModel}} | |
| 74344a | 21 | <transition name="fade"> |
| I | 22 | <a-icon :type="iconType" /> |
| 23 | </transition> | |
| b505f3 | 24 | </a-button> |
| I | 25 | |
| f9c38e | 26 | <!-- <a-button> |
| b505f3 | 27 | 工具 |
| I | 28 | <a-icon type="tool" style="margin-left: 0px;" /> |
| f9c38e | 29 | </a-button> --> |
| b505f3 | 30 | </div> |
| I | 31 | </a-affix> |
| 32 | </template> | |
| 33 | ||
| 34 | <script> | |
| 35 | export default { | |
| 36 | data() { | |
| f9c38e | 37 | return { |
| 74344a | 38 | iconType: "arrows-alt", |
| f9c38e | 39 | screen: false, |
| I | 40 | screenModel: "拉伸" |
| 41 | } | |
| b505f3 | 42 | }, |
| I | 43 | methods: { |
| 44 | showModal() { | |
| 45 | this.$emit('showModal') | |
| f9c38e | 46 | }, |
| 9c695b | 47 | showPreview() { |
| I | 48 | this.$emit('showPreview') |
| 49 | }, | |
| f9c38e | 50 | showScreen() { |
| I | 51 | this.$emit('showScreen') |
| 52 | if (this.screen) { | |
| 53 | this.screenModel = "拉伸"; | |
| 74344a | 54 | this.iconType = "arrows-alt"; |
| I | 55 | } else { |
| f9c38e | 56 | this.screenModel = "缩小"; |
| 74344a | 57 | this.iconType = "shrink" |
| f9c38e | 58 | } |
| 74344a | 59 | this.screen = !this.screen; |
| b505f3 | 60 | } |
| I | 61 | }, |
| 62 | } | |
| 63 | </script> | |
| 64 | ||
| 74344a | 65 | <style lang="less"> |
| I | 66 | .fade-enter-active, |
| 67 | .fade-leave-active { | |
| 68 | transition: opacity .5s; | |
| 69 | } | |
| 70 | ||
| 71 | .fade-enter, | |
| 72 | .fade-leave-to { | |
| 73 | opacity: 0; | |
| 74 | } | |
| b505f3 | 75 | </style> |
