vue组件化学习第三天

学习制作自定义组件

实例music.vue

1:首先在components文件中新建文件夹music

2：在文件music中创建music.vue，index.js，两者路径在同一级

3:index.js代码如下

 1 import Mymusic from './Music.vue'
 2 // 这里是重点
 3 const Music = {
 4     install: function(Vue){
 5         Vue.component('Music',Mymusic)
 6     }
 7 }
 8 
 9 // 导出组件
10 export default Music

4：music.vue内容如下

  1 <template>
  2     <div class="music-box" :class="musicShow?'music-box-active':''">
  3         <div class="music-title">{{song.name}}</div>
  4            <div class="music-paly">
  5                <audio id="audio">
  6               <source :src="song.src" type="audio/ogg">
  7               <source :src="song.src" type="audio/mpeg">
  8               <source :src="song.src" type="audio/mp3">
  9               您的浏览器不支持 audio 元素。
 10             </audio>
 11            </div>
 12            <div class="play-btn-pre" @click="preBtn">
 13                <i class="el-icon-arrow-up"></i>
 14            </div>
 15            <div class="play-btn" @click="play" :class="musicPlay?'music-play-active':''">
 16                <i class="el-icon-service"></i>
 17            </div>
 18            <div class="play-btn-next" @click="nextBtn">
 19                <i class="el-icon-arrow-down"></i>
 20            </div>
 21            <div class="music-btn" @click="showMusic" v-if="!musicShow">
 22                <i class="el-icon-d-arrow-left"></i>
 23            </div>
 24     </div>
 25     
 26 </template>
 27 
 28 <script type="ecmascript-6">
 29     export default {
 30       name: 'Music',
 31       data () {
 32         return {
 33             musicShow:false,
 34             musicPlay:false,
 35             // 当前播放列表的下标
 36             index:0,
 37               musicList:[
 38               {
 39                   name:"爱情转移",
 40                   src:"http://dl.stream.qqmusic.qq.com/C400003kCfyN2zp9AW.m4a?vkey=822935FCBC674ECFEE37F0331063A1A1CE1553BC008F1186291F8D5BD0C9F026159CE505C2B86842B1A9FF7B29F5F6A006751DACA129E296&guid=78583330&uin=0&fromtag=66"
 41               },
 42               {
 43                   name:"Pacific Rim Uprising",
 44                   src:"http://dl.stream.qqmusic.qq.com/C400003Pegq61qghYH.m4a?vkey=D3BDF769F8308AEF6A96AFC4F38BBC996C0F6EFF24A74BCDA5C9B2DBA8C8A6841BED2270216154AD0FB760131DD329CA91B2754EA818E302&guid=78583330&uin=0&fromtag=66"
 45               }
 46           ],
 47           song:{
 48               name:"爱情转移",
 49               src:"http://dl.stream.qqmusic.qq.com/C400003kCfyN2zp9AW.m4a?vkey=822935FCBC674ECFEE37F0331063A1A1CE1553BC008F1186291F8D5BD0C9F026159CE505C2B86842B1A9FF7B29F5F6A006751DACA129E296&guid=78583330&uin=0&fromtag=66"
 50           }
 51         }
 52       },
 53       watch:{
 54           musicPlay:function(){
 55               console.log(this.musicPlay)
 56           }
 57       },
 58       methods: {
 59           showMusic:function(){
 60               // 弹开播放器
 61               var _this=this;
 62               this.musicShow=true;
 63               setTimeout(function(){
 64                   _this.musicShow=false
 65               },10000)
 66           },
 67           play:function(){
 68               if (this.musicPlay) {
 69                 document.getElementById('audio').pause();
 70               }else{
 71                   document.getElementById('audio').play();
 72               }
 73               this.musicPlay=!this.musicPlay;
 74 
 75           },
 76           nextBtn:function(){
 77               // 如果已经到最后一首了
 78               if (this.index+1==this.musicList.length) {
 79                   this.index=0;
 80               }else{
 81                   this.index++;
 82               }
 83               // this.musicPlay=!this.musicPlay;
 84               // 关闭上一首音乐播放
 85               // document.getElementById('audio').pause();
 86               // 替换音乐单子
 87               this.song=this.musicList[this.index];
 88               // 打开音乐播放器
 89               // document.getElementById('audio').play();
 90           },
 91           preBtn:function(){
 92               // 如果已经到了第一首
 93 
 94           }
 95        }
 96     }
 97 </script>
 98 
 99 <style rel="stylesheet">
100     .music-box{40px;background:rgba(0,0,0,.6);z-index:99;color:white;border-radius:10px;transition:transform .2s linear;transform:translate(0,0);position:relative;top:35%;left:99%;}
101     .music-box .play-btn-pre i,.music-box .play-btn-next i,.play-btn i{font-size:30px}
102     .music-box .play-btn-pre,.music-box .play-btn-next,.play-btn{margin:10px 5px;}
103     .music-btn{40px;height:40px;font-size:30px;position:absolute;bottom:0;left:-30px;animation:move 1s linear infinite;}
104     .music-box-active{transform:translate(-36px,0)}
105     .music-play-active{animation:move1 1s linear infinite;}
106     @keyframes move{
107         0%   {left:-30px;}
108         25%  {left:-35px;}
109         50%  {left:-30px;}
110         75%  {left:-25px;}
111         100% {left:-30px;}
112     }
113     @keyframes move1{
114         0%   {transform:rotateZ(0);}
115         100% {transform: rotateZ(360deg);}
116     }
117 </style>

5：模块引入自定义组件

在main.js引入即可，全局使用

1 import Music from './components/Music

2 Vue.use(Music)