奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > vue面试通 > Element框架 >

vue+element-ui实现的音乐微博发布案例

时间:2017-11-15 16:32来源:原创 作者:admin
用到的技术: element-ui的表单组件和布局组件 vue的键盘事件、各种基础知识 实现的功能: 1、输入歌曲关键词后自动从网易云音乐中下载显示下拉列表 2、可上下键循环选择音乐,按回车
用到的技术:
element-ui的表单组件和布局组件
vue的键盘事件、各种基础知识

实现的功能:
1、输入歌曲关键词后自动从网易云音乐中下载显示下拉列表
2、可上下键循环选择音乐,按回车后,自动选择当前的音乐专辑、封面和音乐地址

源码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网易163云音乐demo</title>

    <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    <style> li{list-style-type: none;}
     #music_view{width: 580px;margin: 20px auto}
     .search_list_box li:hover,.search_list_box li.active{background-color: #666;color: #fff}
     .pub_music img{width: 100%}
</style>
</head>
<body>
    <div id="music_view">
        <!-- 搜索 -->
        <div class="do_serach" v-if="no_choise">
            <el-input @keyup.native="search_music($event)" @keyup.down.native="down_choice()" @keyup.up.native="up_choice()" v-model="kwd"  placeholder="请输入内容" @keyup.enter.native="enter_choise()" prefix-icon="el-icon-search"></el-input>
            <ul class="search_list_box">
                <!-- 如果当前列表的下标 == 向下/上按时候的位置 -->
                <li v-for="(music,index) in music_list" @click="choise(music)"
                :class="{'active':index==choise_index}">{{music.name}} - {{music['artists'][0]['name']}}</li>
            </ul>
        </div>
        <!-- 发布音乐 -->
        <div class="pub_music" v-if="!no_choise">
            <el-row>
                <el-col :span="3"> <img :src="choise_music_info.album.picUrl" alt="">  {{choise_music_info['name']}}</el-col>

                <el-col :span="18"> <audio :src="choise_music_info.audio" controls ></audio> </el-col>

                <el-col :span="3" @click.native="no_choise=true">x</el-col>
            </el-row>
            <el-row>
                <el-input type="textarea" ></el-input>
            </el-row>
            <el-row>
                <el-col :span="3">
                    <el-button>取消</el-button>
                </el-col>

                <el-col :span="3" :offset="18">
                    <el-button type="primary">发布</el-button>
                </el-col>

            </el-row>
        </div>
    </div>

    <script type="text/javascript">

        
        new Vue({
            el:'#music_view',
            data:{
                 kwd:'',//关键词
                 music_list:[],//音乐列表
                 no_choise:true,//有没有选择
                 choise_music_info:[],//当前选择的音乐
                 choise_index:-1
            },
            methods:{
                 search_music:function (event) {
                  
                     if (event.key == 'ArrowDown' || event.key == 'ArrowUp') {
                         return ;
                     }
                     // 搜索音乐
                     let music_keyword = this.kwd
                     if (music_keyword) {

                         $.getJSON('http://s.music.163.com/search/get/?version=1&src=lofter&type=1&filterDj=false&s='+music_keyword+'&limit=8&offset=0&callback=?', (rtnData)=> {
                             console.log(rtnData.result.songs)
                             // 拓展运算符 ...
                            this.music_list.push(...rtnData.result.songs)
                        })
                     }
                     
                 },
                 choise:function (music) {
                     // 选择
                     this.no_choise = false
                     this.choise_music_info = music
                 },
                 down_choice:function () {
                     // 向下按的时候 把当前选中的下标+1
                     
                     if (this.choise_index == this.music_list.length) {
                         this.choise_index = 0
                     }else{
                         ++this.choise_index
                     }
                 },
                 up_choice:function () {
                     // 向上按的时候 把当前选中的下标-1
                     if (this.choise_index == 0) {
                         this.choise_index = this.music_list.length - 1
                     }else{
                         --this.choise_index
                     }
                 },
                 enter_choise:function () {
                     // 回车选择音乐
                     this.no_choise = false
                     this.choise_music_info = this.music_list[this.choise_index]
                 }
            }
        })
    </script>
</body>
</html>

(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片