vue-music:添加歌曲到队列add-song.vue-CSDN博客

1. switches.vue组件：

上传中...]

组件原则：解耦
在这个组件中，将点击组件的索引传播即可

methods: {
    switchItem(index) {
      this.$emit('switch', index)
    }
}

高亮样式

.switch-item
    flex: 1
    padding: 8px
    text-align: center
    font-size: $font-size-medium
    color: $color-text-d
    &.active
      background: $color-highlight-background
      color: $color-text

2.tab栏切换，两个滚动列表边界逻辑

1.在watch中

query(newVal) {
  //切换tab栏的时候，刷新scroll
  if (!newVal) {
    this.refreshList()
  }
}

2. methods中定义方法，刷新两个滚动组件

refreshList() {
  setTimeout(() => {
    if (this.currentIndex === 0) {
      this.$refs.songList.refresh()
    } else {
      this.$refs.searchList.refresh()
    }
  }, 20)
},

3. add-song.vue和search.vue： mixin

两个组件有公共方法，所以使用mixin

export const searchMixin = {
  data() {
    return {
      query: '',
      refreshDelay: 120
    }
  },
  computed: {
    ...mapGetters([
      'searchHistory'
    ])
  },
  methods: {
    onQueryChange(query) {
      this.query = query
    },
    //开始滚动的时候输入框的键盘收缩，调用子组件中input，blur事件，收缩键盘
    blurInput() {
      this.$refs.searchBox.blur()
    },
    addQuery() {
      this.$refs.searchBox.setQuery(this.query)
    },
    //保存搜索历史
    saveSearch() {
      this.saveSearchHistory(this.query)
    },
    ...mapActions([
      'saveSearchHistory',
      'deleteSearchHistory'
    ])
  }
}