Aplayer/全局键盘监听

 .gitignore

@@ -2,6 +2,7 @@
/node_modules
/dist/*
/dist
/public/*.mp3
/*.iml
/*/*.iml
/*/*/*.iml

 package.json

@@ -7,6 +7,7 @@
        "build": "vue-cli-service build"
    },
    "dependencies": {
        "@moefe/vue-aplayer": "^2.0.0-beta.5",
        "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
        "@vue/babel-preset-jsx": "^1.2.4",
        "ant-design-vue": "^1.7.8",

 src/App.vue

@@ -1,6 +1,6 @@
<template>
    <div id="app" class="app">
        <router-view class=""></router-view>
    <div id="app" class="app"  >
        <router-view class="" ></router-view>
    </div>
</template>

@@ -14,7 +14,8 @@
        computed: {},
        created() {},
        watch: {},
        methods: {}
        methods: {
        }
    }
</script>


 src/components/fixed/header.vue

@@ -1,36 +1,71 @@
<template>
        <a-row type="flex" justify="start" >
            <a-col v-bind="showSmall">
                <router-link to="/main1">Home »</router-link>
            </a-col>
            <a-col v-bind="showSmall">
                <router-link to="/main2">乐谱搜索 »</router-link>
            </a-col>
            <a-col v-bind="showSmall">
                <router-link to="/main3">我的网盘 »</router-link>
            </a-col>
            <a-col v-bind="showMain">
                <router-link to="/tagInfo">关于我 »</router-link>
            </a-col>
            <a-col v-bind="showMain">
                <a-auto-complete v-bind="search" @select="onSelect" @search="onSearch" @change="onChange">
                    <a-input>
                        <a-icon slot="suffix" type="search" class="certain-category-icon" />
                    </a-input>
                </a-auto-complete>
            </a-col>
			
        </a-row>
    <a-row type="flex" justify="start">
        <a-col v-bind="showSmall">
            <router-link to="/main1">Home »</router-link>
        </a-col>
        <a-col v-bind="showSmall">
            <router-link to="/main2">乐谱搜索 »</router-link>
        </a-col>
        <a-col v-bind="showSmall">
            <router-link to="/main3">我的网盘 »</router-link>
        </a-col>
        <a-col v-bind="showMain">
            <a-auto-complete ref="mySearch" 
            v-bind="search" @select="onSelect" @search="onSearch" @change="onChange">
                <a-input @keydown.enter="onSelect">
                    <a-icon slot="suffix" type="search" class="certain-category-icon" />
                </a-input>
            </a-auto-complete>
        </a-col>

    </a-row>

</template>

<script>
    export default {
        mounted() {
            let self = this;
            let code = 0;
            let code2 = 0;
            let code3 = 0;
            document.onkeydown = function(e) {
                let evn = e || event;
                let key = evn.keyCode || evn.which || evn.charCode;
                if (key === 17) {
                    code = 1;
                }
                if (key === 16) {
                    code2 = 1;
                }
                if (key === 70) {
                    code3 = 1;
                }
                if (code === 1 && code2 === 1 && code3 === 1) {
                    self.$message.info("进入全局搜索..")
                    //do something
                    self.$refs.mySearch.focus();
                    code = 0;
                    code2 = 0;
                }
            }
            document.onkeyup = function(e) {
                if (e.keyCode === 17) {
                    code = 0;
                }
                if (e.keyCode === 16) {
                    code2 = 0;
                }
                if (e.keyCode === 70) {
                    code3 = 0;
                }
            }

        },
        data() {
            return {
                search: {
                    placeholder: "全局搜索..",
                    placeholder: "ctrl+shift+f/enter",
                    allowClear: true,
                    // autoFocus: true,
                    backfill: true,
@@ -61,12 +96,17 @@
            },
        },
        methods: {
            test(e) {
                console.log(333);
                console.log(e);
            },
            onSearch(searchText) {
                this.dataSource = !searchText ? [] : [searchText, searchText.repeat(2), searchText.repeat(3)];
                console.log("补全..");
            },
            onSelect(value) {
                console.log('回车', value);
                this.$message.info("回车")
            },
            onChange(value) {
                console.log('修改', value);
@@ -77,4 +117,4 @@
            },
        },
    }
</script>
</script>

 src/components/group/articleListScorll.vue

@@ -8,10 +8,12 @@
                <a-spin />
            </div>
        </div>
        <div style="position:fixed;bottom: 10px;" id="dddadf">
            <a-pagination @change="onChange" :showQuickJumper="true" :size="size" v-model="current"
                :defaultPageSize="pageSize" :total="total" />
        </div>
        <a-row type="flex" justify="center">
            <div style="position:fixed;bottom: 10px;" id="dddadf">
                <a-pagination @change="onChange" :showQuickJumper="true" :size="size" v-model="current"
                    :defaultPageSize="pageSize" :total="total" />
            </div>
        </a-row>
        <a-back-top>
            <a-icon type="up" />回到顶部
        </a-back-top>
@@ -68,7 +70,7 @@
            };
        },
        beforeMount() {
            this.data = [obj1, obj2,obj3];
            this.data = [obj1, obj2,obj3,obj2];
        },
        methods: {
            onChange(current) {

 src/components/layouts/baseLayout.vue

@@ -1,12 +1,14 @@
<template>
    <a-layout>
        <a-layout-header class="scrolling-navbar"  :style="{position:'fixed',height:'60px',marginBottom:'35px',zIndex: 999, width: '100%' }">
            <tag-Header  />
        <a-layout-header class="scrolling-navbar"
            :style="{position:'fixed',height:'60px',marginBottom:'35px',zIndex: 999, width: '100%' }">
            <tag-Header />
        </a-layout-header>

        <router-view ></router-view>

        <a-layout-footer>
            <AplayerBox />
            <tagFooter />
        </a-layout-footer>
    </a-layout>
@@ -15,10 +17,12 @@
<script>
    import tagHeader from "../fixed/header.vue"
    import tagFooter from "../fixed/footer.vue"
    import AplayerBox from "../mini/Aplayer.vue"
    export default {
        components: {
            tagHeader,
            tagFooter,
            AplayerBox,
        },
        data() {
            return {
@@ -26,7 +30,7 @@
            }
        },
        methods: {

		
            // 下载文件
            down: function() {
                console.log(111);
@@ -60,11 +64,11 @@
        .ant-layout {}

        .ant-layout-header {
			

            // background-color: #ffffff;
            backdrop-filter: saturate(180%) blur(1em);
            -webkit-backdrop-filter: blur(5px);	
			
            -webkit-backdrop-filter: blur(5px);

            background: linear-gradient(90deg, rgba(247, 149, 51, 0.101961) 0, rgba(243, 112, 85, 0.101961) 15%, rgba(239, 78, 123, 0.101961) 30%, rgba(161, 102, 171, 0.101961) 44%, rgba(80, 115, 184, 0.101961) 58%, rgba(16, 152, 173, 0.101961) 72%, rgba(7, 179, 155, 0.101961) 86%, rgba(109, 186, 130, 0.101961) 100%);
        }

@@ -92,11 +96,11 @@
        letter-spacing: 0.8px;
        line-height: 22px;
    }
	

    .scrolling-navbar {
        will-change: background, padding,height;
        -webkit-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
        transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
        will-change: background, padding, height;
        -webkit-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
        transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
    }

    .fade {

 src/components/mini/Aplayer.vue

New file
@@ -0,0 +1,60 @@
<template>
    <div >
        <aplayer :audio="audio"  fixed  style="z-index: 10;" :preload="preload"/>
    </div>
</template>

<script>
    import APlayer from '@moefe/vue-aplayer';
	
    export default {
        data() {
            return {
                preload:"none",
                audio: {
                    name: 'Moonwisher',
                    artist: 'Kan R. Gao',
                    url: 'http://music.163.com/song/media/outer/url?id=1645104.mp3',
                    // url: '/moon.mp3',
                    cover: 'http://p2.music.126.net/0AYWra9rCzgeprGp6OUyUw==/868614185993997.jpg?param=130y130',
                },
            };
        },
    };
    // var ap = new APlayer({
    //                    element: document.getElementById('player1'),
    //                    narrow: false,
    //                    autoplay: false,
    //                    listFolded:true,
    //                    audio:[

    //                            {
    //                             title: 'Wish My Life Away',
    //                             author: 'Kan R. Gao / Laura Shigihara',
    //                             url: 'http://music.163.com/song/media/outer/url?id=529668945.mp3',
    //                             pic: 'http://p1.music.126.net/2VSSz_JLHtggZqmquFO_tw==/109951163106305809.jpg?param=130y130'
    //                            }, 
    //                            {
    //                                title: 'Moonwisher',
    //                                author: 'Kan R. Gao',
    //                                url: 'http://music.163.com/song/media/outer/url?id=1645104.mp3',
    //                                pic: 'http://p2.music.126.net/0AYWra9rCzgeprGp6OUyUw==/868614185993997.jpg?param=130y130'
    //                            },
    //                            {
    //                             title: 'For River - Piano (Johnny\'s Version)',
    //                             author: 'Kan R. Gao',
    //                             url: 'http://music.163.com/song/media/outer/url?id=1645112.mp3',
    //                             pic: 'http://p2.music.126.net/0AYWra9rCzgeprGp6OUyUw==/868614185993997.jpg?param=130y130'
    //                            },
    //                             {
    //                                title: '花火が瞬く夜に',
    //                                author: '羽肿',
    //                                url: 'http://music.163.com/song/media/outer/url?id=434902428.mp3',
    //                                pic: 'http://p1.music.126.net/f7Nd9FSzVZMkTPWDW_rnOg==/736672800839982.jpg?param=130y130'
    //                            }
    //                        ]
    //                     });
</script>

<style>
</style>

 src/components/swichLabel/main1-show.vue

@@ -28,8 +28,7 @@
                    <a-button @click="showDrawer2">
                        小抽屉2
                    </a-button>
                    <articleListScorll/>
                    <!-- <router-view class="fade"></router-view> -->
                    <router-view class="fade"></router-view>
                </a-col>
                
                <a-col v-bind="colApiRight" ref="myDrawer">
@@ -55,8 +54,10 @@
            articleList,
            articleListScorll,
            
			
        },
        methods: {
			 
            afterVisibleChange(val) {},
            showDrawer1() {
                this.visible1 = true;

 src/config/router.config.js

@@ -1,6 +1,6 @@
import baseLayout from '../components/layouts/baseLayout.vue'

import articleList from '../components/group/articleList.vue'
import articleList from '../components/group/articleListScorll.vue'

import main1 from '../components/swichLabel/main1-show.vue'
import main2 from '../components/swichLabel/main2-show.vue'

 src/main.js

@@ -11,6 +11,10 @@
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

import APlayer from '@moefe/vue-aplayer';

Vue.use(APlayer,{productionTip:false})

Vue.prototype.$axios = axios

new Vue({