zilong/vite-zmusic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加vue3-lazyload组件

Browse Source
This commit is contained in:
zilong 2021-10-19 23:50:28 +08:00
parent 13137af6d3
commit 17c34faa18
4 changed files with 31 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -25,6 +25,7 @@
"unplugin-vue-components": "^0.15.6", "unplugin-vue-components": "^0.15.6",
"vue": "^3.2.16", "vue": "^3.2.16",
"vue-router": "^4.0.0-0", "vue-router": "^4.0.0-0",
"vue3-lazyload": "^0.2.2-beta",
"vue3-styled-components": "^1.2.1", "vue3-styled-components": "^1.2.1",
"vuex": "^4.0.0-0" "vuex": "^4.0.0-0"
}, },

18
src/main.js
View File

@ -2,5 +2,21 @@ import { createApp } from "vue";
import App from "./App.vue"; import App from "./App.vue";
import router from "./router"; import router from "./router";
import store from "./store"; import store from "./store";
import VueLazyLoad from 'vue3-lazyload'
createApp(App).use(store).use(router).mount("#app"); createApp(App)
.use(store)
.use(router)
.use(VueLazyLoad, {
// options...
// loading: () => {
// console.log('loading')
// },
// error: () => {
// console.log('error')
// },
// loaded: () => {
// console.log('loaded')
// }
})
.mount("#app");

15
src/views/discover/Recommend.vue
View File

@ -43,7 +43,7 @@
> >
<div class="c2-list"> <div class="c2-list">
<div class="play-btn"> <div class="play-btn">
<img :src="song.album.blurPicUrl" /> <img v-lazy="song.album.blurPicUrl" />
<n-button <n-button
text text
class="start-play-bg" class="start-play-bg"
@ -244,12 +244,12 @@ getBanner(0)
//#region 最新音乐 //#region 最新音乐
let topSongs = ref([]); let topSongs = ref([]);
// topSongs.value = store.getters.cache('topSongs') topSongs.value = store.getters.cache('topSongs')
if(store.getters.cache('topSongs')) // if(store.getters.cache('topSongs'))
{ // {
topSongs.value = store.getters.cache('topSongs') // topSongs.value = store.getters.cache('topSongs')
console.log('载入Caches'); // console.log('载入Caches');
} // }
//最新音乐 //最新音乐
getTopSong() getTopSong()
.then((res) => { .then((res) => {
@ -404,6 +404,7 @@ getPersonalizedMV()
img { img {
width: 60px; width: 60px;
height: 60px;
border-radius: 4px; border-radius: 4px;
} }

5
yarn.lock
View File

@ -10540,6 +10540,11 @@ vue-template-es2015-compiler@^1.9.0:
resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825" resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw== integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
vue3-lazyload@^0.2.2-beta:
version "0.2.2-beta"
resolved "https://registry.yarnpkg.com/vue3-lazyload/-/vue3-lazyload-0.2.2-beta.tgz#c75df1a8553b60fbfd8324d083cb0e71c94dd26d"
integrity sha512-k198DjJmH8vmtPm90nzs/04MwMGpqmbhrp9foonWyPDCviQtCATYxlvloxRXroElcDRERZCs/+GRjeDVWsPtNw==
vue3-styled-components@^1.2.1: vue3-styled-components@^1.2.1:
version "1.2.1" version "1.2.1"
resolved "https://registry.yarnpkg.com/vue3-styled-components/-/vue3-styled-components-1.2.1.tgz#de338c77e8e8bb2139be5939c5813bbe7347bc50" resolved "https://registry.yarnpkg.com/vue3-styled-components/-/vue3-styled-components-1.2.1.tgz#de338c77e8e8bb2139be5939c5813bbe7347bc50"