Vue 音乐列表 - 实现歌曲名超出隐藏，鼠标悬浮显示全部

<template>
  <div class='music-management'>
    <el-card class='music-left'>
      <div>
        <div class='music-title'>音源列表</div>
        <div class='music-content'>
          <div class='music-list' v-for='(item, index) in dateList' :key='index' @mouseover='showFullMusicName(item)' @click='musicStart(item)'>
            <svg-icon icon-class='music' style='font-size: 25px; vertical-align: middle'></svg-icon>
            {{ item.musicName }}
          </div>
        </div>
      </div>
    </el-card>
<pre><code>&lt;el-card class='musci-right'&gt;
    &lt;div class='music-title' style='margin-bottom: 0'&gt;
     &lt;div class='music-tab'&gt;
       &lt;div :class='index == 1 ? 'active' : ''' @click='index = 1; musicChoose = musicList.zone' class='tab'&gt;分区&lt;/div&gt;
       &lt;div :class='index == 2 ? 'active' : ''' @click='index = 2; musicChoose = musicList.group' class='tab'&gt;分组&lt;/div&gt;
       &lt;div :class='index == 3 ? 'active' : ''' @click='index = 3; musicChoose = musicList.task' class='tab'&gt;子任务&lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class='music-bottom'&gt;
      &lt;el-card class='music-item' v-for='(item, index) in musicChoose' :key='index'&gt;
        &lt;div class='top'&gt;
          &lt;div&gt;状态：{{ item.status }}&lt;/div&gt;
          &lt;div&gt;
            &lt;svg-icon icon-class='naozhong'&gt;&lt;/svg-icon&gt;
          &lt;/div&gt;
        &lt;/div&gt;

          &lt;div class='icon' @click='ipChoose(item)'&gt;
            &lt;svg-icon icon-class='lianjie' style='font-size: 40px; vertical-align: middle'&gt;&lt;/svg-icon&gt;
          &lt;/div&gt;
        &lt;div style='text-align: center'&gt;
          {{ item.ip }}
        &lt;/div&gt;
        &lt;div class='text'&gt;
          &lt;div&gt;机架式网络化终端&lt;/div&gt;
          &lt;div&gt;{{ item.percent }}&lt;/div&gt;
        &lt;/div&gt;
      &lt;/el-card&gt;
    &lt;/div&gt;
&lt;/el-card&gt;
</code></pre>
  </div>
</template>
<script>
  import { getMusicList } from '@/api/data/music'
  import { MessageBox } from 'element-ui';

  export default {
    data() {
      return {
        index: 1,
        activeTab: 'zone',
        dateList: [],
        musicChoose: [
          { id: 1, status: '离线', ip: '192.168.80.30', percent: '10%' },
          { id: 2, status: '离线', ip: '192.168.80.31', percent: '20%' },
          { id: 3, status: '离线', ip: '192.168.80.32', percent: '30%' },
        ],
        musicList: {
          zone: [
            { id: 1, status: '离线', ip: '192.168.80.30', percent: '10%' },
            { id: 2, status: '离线', ip: '192.168.80.31', percent: '20%' },
            { id: 3, status: '离线', ip: '192.168.80.32', percent: '30%' },
          ],
          group: [
            { id: 4, status: '离线', ip: '192.168.80.33', percent: '10%' },
            { id: 5, status: '离线', ip: '192.168.80.34', percent: '0%' },
            { id: 6, status: '离线', ip: '192.168.80.35', percent: '0%' },
          ],
          task: [
            { id: 7, status: '离线', ip: '192.168.80.36', percent: '20%' },
            { id: 8, status: '离线', ip: '192.168.80.37', percent: '0%' },
            { id: 9, status: '离线', ip: '192.168.80.38', percent: '0%' },
          ],
        },
      };
    },
    created() {
      this.musicChoose = this.musicList.zone;
      console.log('初始化分区====', this.musicChoose)
      this.getMusics();
    },
    methods: {
      ipChoose(item) {
        console.log('选择ip=====', item)

      },
      musicStart(item) {
        console.log('播放music=====', item)
        // 处理点击事件，可以将 item 作为参数传递给其他组件或函数
      },
      //获取音乐目录
      getMusics() {
        getMusicList().then(res => {
          console.log('音乐列表', res.data)
          this.dateList = res.data;
        })
      },
      showFullMusicName(item) {
        MessageBox.alert(item.musicName, '歌曲名', {
          confirmButtonText: '确定',
          showClose: false,
        });
      }
    },
    mounted() {

    },

  };
</script>
<style scoped lang='less'>

  .music-management {
    display: flex;
    padding: 20px;
  }
  .music-left {
    width: 20%;
    height: 1080px;
    border-radius: 15px;
    margin-right: 15px;
  }
  .musci-right {
    width: 70%;
    height: 1080px;
  }
  .music-title {
    height: 60px;
    background: black;
    color: #fff;
    font-size: 20px;
    line-height: 60px;
    padding-left: 30px;
    margin-bottom: 10px;
  }
  .music-content {

  }
  .music-list {
    height: 50px;
    line-height: 50px;
    padding-left: 15px;
    background: #e3d2c3;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .music-list:nth-child(2n) {
    background: #e4cab0;
  }
.musci-right {
  border-radius: 15px;
}
  .music-tab {
     display: flex;
    align-items: center;
    height: 60px;
  }
  .tab {
    width: 100px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border: 1px solid #6acfc1;
    &.active {
      background: #6acfc1;
    }
  }
.music-bottom {
  display: flex;
  padding: 20px;
  .music-item {
    width: 200px;
    height: 200px;
    border-radius: 12px;
    background: #fae5e4;
    padding: 10px;
    text-align: center;
    margin-right: 10px;
    .top {
      display: flex;
      justify-content: space-between;

    }
    .icon {
      width: 70px;
      height: 70px;
      background: #fff;
      border-radius: 50%;
      line-height: 70px;
      margin: 20px auto;
    }
    .text {
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
    }
  }
}
</style>