All files / vue-koa-demo/src/components Todoheader.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<template>
  <div class="todo-header">
    <div @click="logout" v-if="username !== ''"></div>
    <h1>{{ username }}{{ username === '' ? '' : '\'s ' }}todos</h1>
  </div>
</template>
 
<script>
import axios from 'axios'
 
export default {
  name: 'todo',
  data () {
    return {
      logoutPic: '/static/images/logout.png'
    }
  },
  props: {
    username: String
  },
  methods: {
    logout () {
      axios.get('/api/logout')
        .then((res) => {
          if (res.data.success) {
            this.$emit('setUserName', { username: '' })
            this.$message({ message: '注销成功 😛', type: 'success', duration: 1500 })
            sessionStorage.username = ''
            sessionStorage.hasLogin = false
            this.$router.replace('/login')
          }
        })
        .catch((err) => {
          this.$message.error({ message: '注销失败', duration: 1500 })
          console.log(err)
        })
    }
  }
}
</script>
 
<style scoped lang="scss">
.todo-header {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  flex: 0 0 auto;
  position: relative;
  div {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 32px;
    top: 32px;
    cursor: pointer;
    background: url('~@/assets/logout.png') no-repeat no-repeat center center;
    background-size: 20px 20px;
 
    &:hover {
      background-image: url('~@/assets/logout-active.png');
    }
  }
  h1 {
    height: 140px;
    line-height: 140px;
    color: #67D4EB;
    letter-spacing: 2px;
  }
}
</style>