简介
vue-bg-src 是一个可以为 Vue.js 组件添加背景图并缓存的插件。通过该插件，开发者可以便捷地为组件添加背景图，在浏览器的整个生命周期内都将缓存该背景图，不仅能增加页面性能，也方便开发者进行组件的开发。
安装方式
通过 NPM 安装 vue-bg-src
--- ------- ----------
使用方式
在组件模板中引入 vue-bg-src 方法：
------ - ----- - ---- -------------
在 Vue.js 组件的 data 中定义一个属性，用于存放背景图的 URL：
------ -
------ -
------ ----------------------------
--
-利用 bgSrc 方法，将其传入 Vue.js 组件的 props，设置该属性为背景图 URL：
---------- ---- --------------- ---------------- ------------ --------- -----------
在渲染时将组件的 BG 传入该 variable：
------------ -----------------------------
示例代码
----------
---- --------- ---------------- ------------ ---------
-----------
--------
------ - ----- - ---- -------------
------ ------- -
----- --------------
------ -
------ -
------ -----------------------------
--
--
-------- -
------
--
--
---------使用建议
vue-bg-src对于使用背景图比较多的页面或组件开发特别有用。通过该插件，我们可以将大量使用的背景图都缓存下来，减少页面的加载时间，提升用户的体验。- 在使用
vue-bg-src的过程中需注意，除请求 header 中的Cache-Control或Url所拥有的 Cache-Control 外，背景图仍需要保存在文件系统或用户名下 CDN 中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005672081e8991b448e38b4