All files / src/pages Search.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 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93                                                                                                                                                                                         
<template>
  <div id="search">
    <div class="my-bg"></div>
    <div class="my-body">
      <div class="content">
        <nav class="searchList-nav" ref="change">
          <span :class="{isActive: toggle === 'Songs'}" @click="handleChangeView('Songs', 0)">歌曲</span>
          <span :class="{isActive: toggle === 'SongLists'}" @click="handleChangeView('SongLists', 1)">歌单</span>
        </nav>
        <component :is="currentView"></component>
      </div>
    </div>
  </div>
</template>
 
<script>
import searchSongs from '../components/search/SearchSongs'
import searchSongLists from '../components/search/SearchSongLists'
import { mapGetters } from 'vuex'
import { mixin } from '../mixins'
 
export default {
  name: 'search',
  components: {
    searchSongs,
    searchSongLists
  },
  mixins: [mixin],
  data () {
    return {
      toggle: 'Songs',
      currentView: 'searchSongs'
    }
  },
  computed: {
    ...mapGetters([
      'searchword'
    ])
  },
  watch: {
    searchword: function () {
      this.getSong()
    }
  },
  methods: {
    // 切换组件
    handleChangeView: function (component) {
      this.currentView = 'search' + component
      this.toggle = component
    }
  }
}
</script>
 
<style scoped>
.my-bg {
  width: 100%;
  height: 100px;
  background-color: #93d2f8;
}
 
.my-body{
  position: relative;
  padding: 0 100px;
}
 
.content {
  background-color: white;
  margin: 50px 0;
  border-radius: 12px;
  padding: 20px 40px;
  min-width: 900px;
}
 
.searchList-nav {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
  font-size: 1.5rem;
  color: black;
}
 
.searchList-nav span {
  line-height: 50px;
  cursor: pointer;
}
 
.isActive {
  font-weight: 600;
  border-bottom:5px solid black;
}
</style>