From 019990450fa60b31f3a055a4e1f3fc7609843291 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Mon, 17 Jan 2022 02:22:52 +0800
Subject: [PATCH] Aplayer/全局键盘监听
---
.gitignore | 1
src/components/fixed/header.vue | 88 ++++++++++++++++------
src/components/mini/Aplayer.vue | 60 +++++++++++++++
src/main.js | 4 +
package.json | 1
src/components/swichLabel/main1-show.vue | 5
src/config/router.config.js | 2
src/components/group/articleListScorll.vue | 12 +-
src/components/layouts/baseLayout.vue | 24 +++--
src/App.vue | 7 +
10 files changed, 159 insertions(+), 45 deletions(-)
diff --git a/.gitignore b/.gitignore
index a831a48..d831dfa 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,7 @@
/node_modules
/dist/*
/dist
+/public/*.mp3
/*.iml
/*/*.iml
/*/*/*.iml
diff --git a/package.json b/package.json
index d8761a6..0d554fc 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.vue b/src/App.vue
index f7d2f41..a0d92db 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/fixed/header.vue b/src/components/fixed/header.vue
index fff0887..d235b19 100644
--- a/src/components/fixed/header.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/group/articleListScorll.vue b/src/components/group/articleListScorll.vue
index 06d363b..d8e2c19 100644
--- a/src/components/group/articleListScorll.vue
+++ b/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) {
diff --git a/src/components/layouts/baseLayout.vue b/src/components/layouts/baseLayout.vue
index d10c048..b344246 100644
--- a/src/components/layouts/baseLayout.vue
+++ b/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 {
diff --git a/src/components/mini/Aplayer.vue b/src/components/mini/Aplayer.vue
new file mode 100644
index 0000000..cb854f2
--- /dev/null
+++ b/src/components/mini/Aplayer.vue
@@ -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>
diff --git a/src/components/swichLabel/main1-show.vue b/src/components/swichLabel/main1-show.vue
index f20b673..de9cf69 100644
--- a/src/components/swichLabel/main1-show.vue
+++ b/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;
diff --git a/src/config/router.config.js b/src/config/router.config.js
index c63d838..dadeddf 100644
--- a/src/config/router.config.js
+++ b/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'
diff --git a/src/main.js b/src/main.js
index 09fb3fd..824ba66 100644
--- a/src/main.js
+++ b/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({
--
Gitblit v1.9.1