diff --git a/package-lock.json b/package-lock.json index c2fff77..26d8b52 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "swiper": "^5.4.5", "vue": "^2.6.14", "vue-awesome-swiper": "^3.1.3", + "vue-lazyload": "^1.3.5", "vue-router": "^3.5.1", "vuex": "^3.6.2" }, @@ -10255,6 +10256,11 @@ "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==", "dev": true }, + "node_modules/vue-lazyload": { + "version": "1.3.5", + "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.3.5.tgz", + "integrity": "sha512-SCO/LWgCCbjaregHO4wg2buzITBdPBZRlIS104vERGpT88uxXsK26veuzZpgGAXMR8WpkaR+JDqz80OedpaLiA==" + }, "node_modules/vue-loader": { "version": "17.4.2", "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-17.4.2.tgz", @@ -19039,6 +19045,11 @@ "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==", "dev": true }, + "vue-lazyload": { + "version": "1.3.5", + "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.3.5.tgz", + "integrity": "sha512-SCO/LWgCCbjaregHO4wg2buzITBdPBZRlIS104vERGpT88uxXsK26veuzZpgGAXMR8WpkaR+JDqz80OedpaLiA==" + }, "vue-loader": { "version": "17.4.2", "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-17.4.2.tgz", diff --git a/package.json b/package.json index b424616..5537f29 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "swiper": "^5.4.5", "vue": "^2.6.14", "vue-awesome-swiper": "^3.1.3", + "vue-lazyload": "^1.3.5", "vue-router": "^3.5.1", "vuex": "^3.6.2" }, diff --git a/src/main.js b/src/main.js index 9c28cfd..eace45d 100644 --- a/src/main.js +++ b/src/main.js @@ -10,6 +10,16 @@ import './assets/ReactQuilll.less' import 'react-quill/dist/quill.core.css' import 'react-quill/dist/quill.snow.css' import 'react-quill/dist/quill.bubble.css' + +import lazyload from 'vue-lazyload' +// 全局使用插件 +Vue.use(lazyload, { +preload: 1, // preload配置项用来设置预加载的高度(默认值为1.3) +loading: '', // loading配置项用来配置加载时显示的图片路径 +error: '', // error配置项用来配置加载错误时的显示的图片路径 +attemp: 3 // attemp配置项用来设置加载错误时的重传次数 +}); + Vue.config.productionTip = false Vue.use(ElementUI); new Vue({ diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 584f54a..6802b38 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -5,8 +5,9 @@
-
+
+ +
@@ -90,7 +91,7 @@
@@ -132,7 +133,7 @@
-
@@ -179,8 +180,8 @@
- + style="background-color: white;border-radius: 10px;padding: 20px;box-sizing: border-box;cursor: pointer;"> +