# cloudmusic

**Repository Path**: yx102/cloudmusic

## Basic Information

- **Project Name**: cloudmusic
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-01
- **Last Updated**: 2020-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# cloudmusic

## Project setup

```
npm install
```

### 参考链接：http://music.rzi2016.online/#/discovery

### 参考代码：https://gitee.com/rzi2016/iloveSakuraForever/blob/master/README.md

## 上下过渡渐变

```
.pic{
	overflow:hidden;
}

&:hover {
  .desc-wrap {
    transform: translateY(0);
    transition: all 0.5s;
  }
 }

.desc-wrap {
    transform: translateY(-100%);
    transition: all 0.5s;
}
```

## 封装可复用的内容

在外层遍历完成后才传入

```
<div class="music-item" @click="handelMusicItem">
    <div class="pic">
      <img v-lazy="img" />
      <div class="desc-wrap">
        <span class="desc">{{desc}}</span>
      </div>
      <playicon :size="36" />
    </div>
    <p class="name">{{name}}</p>
</div>
```

## 通过 computed 属性计算宽高

```
<div class="music-icon" :style="wrapStyle">
	<i class="iconfont icon-play"></i>
</div>

computed: {
    wrapStyle () {
      return { width: `${this.size}px`, height: `${this.size}px`, lineHeight: `${this.size}px` }
    }
  },
  props: {
    size: {
      type: Number,
      default: 24
    }
  }
```

## 内容超出但是不能形成滚动【没有找到原因】

## vue-meta

## 批量注册组件

直接一次性注册，后面不再需要逐个逐个引入

## 注册需要挂载的文件夹来格式化属性值

```
// 将值格式化为万
export function formatNumber (number) {
  number = Number(number) || 0
  return number > 100000 ? `${Math.round(number / 10000)}万` : number
}

// =============================使用【3步】========================
// 1. 可能需要先进行全局注册，在utils文件夹下新建一个global.js文件夹，然后挂载到原型上
import * as utils from "./index"

export default {
  install (Vue) {
    Vue.prototype.$utils = utils
  }
}

// 2. 在main.js中引入注册
import global from './utils/global.js'
Vue.use(global)

// 3. 在需要格式化的文件中直接使用
$utils.formatNumber(item.playCount)
<PlayListCard
  v-for="item in playlists"
  :key="item.id"
  :desc="'播放量：'+$utils.formatNumber(item.playCount)"
/>
```

## 点击事件分解

一个点击事件有多个内容，拆分为一个点击事件+watch监听实现一个点击事件有多个内容的情况

```
click:
<span class="item" @click="changeTags" :class="{ active: tag === '全部' }">全部</span>
methods: function(){
	changeTags(){
		this.tag = '全部'
		this.getPlaylist()
	}
}

click + watch:
<span class="item" @click="tag = '全部'" :class="{ active: tag === '全部' }">全部</span>
<span class="item" @click="tag = '欧美'" :class="{ active: tag === '欧美' }">欧美</span>
watch: {
    tag () {
      this.getPlaylist()
    }
  },
```



## tabs标签的静态布局

```html
<div class="tab-container">
<!-- tab栏 顶部 -->
<div class="tab-bar">
<span class="item" @click="tag = '全部'" :class="{ active: tag === '全部' }">全部</span>
<span class="item" @click="tag = '欧美'" :class="{ active: tag === '欧美' }">欧美</span>
<span class="item" @click="tag = '华语'" :class="{ active: tag === '华语' }">华语</span>
</div>
<!-- tab的内容区域 -->
<div class="tab-content">
对应的内容
</div>
<style>
.tab-container {
    padding-top: 30px;
    .tab-bar {
      display: flex;
      justify-content: flex-end;
      .item {
        font-size: 15px;
        color: gray;
        margin-right: 20px;
        cursor: pointer;
      }
      .item.active {
        color: #dd6d60;
      }
    }
    .tab-content {
      margin-top: 20px;
    }
  }
 </style>
```



## element-ui的`row-class-name`不生效



## tabs标签遍历数组生成

```
<div class="tabs-wrap">
<span class="tabs-type">地区 :</span>
<ul class="tab-list">
    <li class="tab" v-for="(item, index) in areaTabs" :key="index">
      <span @click="area = item" :class="{ active: area === item }">{{ item }}</span>
    </li>
</ul>
</div>

const areaTabs = ['全部', '内地', '港台', '欧美', '日本', '韩国']
export default {
  name: 'mvs',
  data () {
    return {
      area: '全部', // 选中地区的值
    }
  },

  created () { // 需要将const定义的数组在这里转化一下，不然会报错
    this.areaTabs = areaTabs
  },
}
```



## 携带params进行跳转

```
goToSearch () {
  this.$router.push(`/search?q=${this.keyword}`)
}
```



## watch监测路由的变化

```
watch: {
    $route () {
      this.getSongList()
    }
  }
```



## 处理页码不同步问题

`:current-page.sync="pageNum"`

```
<el-pagination
        @current-change="handleCurrentChange"
        background
        layout="prev, pager, next"
        :total="total"
        class="pagination"
        :current-page.sync="pageNum"
      ></el-pagination>
```