feat: add ImgLazy for theme

ImgLazy.vue

@@ -0,0 +1,27 @@
+<template>
+  <img
+    v-bind="$attrs"
+    :data-src="src"
+    :loading="config.useLoading ? 'lazy' : null"
+    :class="config.selector"
+  />
+</template>
+
+<script>
+import config from '@dynamic/imgLazy'
+
+export default {
+  name: 'ImgLazy',
+  props: {
+    src: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    config() {
+      return config
+    }
+  }
+}
+</script>

README.md

@@ -2,8 +2,6 @@
 
 > a vuepress plugin to better supporting image lazy loading
 
-**This plugin not only works on Markdown files, but also applies to your theme if your theme image is in the required format like `<img data-src="img.jpg" loading="lazy" class="lazy">`**
-
 **The plugin will preferentially use native image [lazy-loading](https://caniuse.com/#feat=loading-lazy-attr), if the browser does not support it, it will be implemented through lozad**
 
 base on [markdown-it-img-lazy](https://github.com/tolking/markdown-it-img-lazy) and [markdown-it-imsize](https://github.com/tatsy/markdown-it-imsize) and [lozad](https://github.com/ApoorvSaxena/lozad.js)
@@ -30,14 +28,45 @@ module.exports = {
 }
 ```
 
-```
+``` md
 ![img](img.jpg)
 # or
 ![img](img.jpg =500x300) <!-- better -->
 <!-- or -->
 <img data-src="img.jpg" loading="lazy" class="lazy">
 ```
 
+## Use in theme
+
+- registered as global components
+
+``` js
+// enhanceAppFile.js
+import ImgLazy from 'vuepress-plugin-img-lazy/ImgLazy'
+
+export default ({ Vue }) => {
+  Vue.component(ImgLazy.name, ImgLazy)
+}
+```
+
+- or registered as components
+
+``` js
+import ImgLazy from 'vuepress-plugin-img-lazy/ImgLazy'
+
+export default {
+  components: { ImgLazy }
+}
+```
+
+- use
+
+``` vue
+<template>
+  <img-lazy src="img.jpg" />
+</template>
+```
+
 ## Options
 
 ### useLoading

docs/README.md

@@ -2,8 +2,6 @@
 
 > a vuepress plugin to better supporting image lazy loading
 
-**This plugin not only works on Markdown files, but also applies to your theme if your theme image is in the required format like `<img data-src="img.jpg" loading="lazy" class="lazy">`**
-
 **The plugin will preferentially use native image [lazy-loading](https://caniuse.com/#feat=loading-lazy-attr), if the browser does not support it, it will be implemented through lozad**
 
 base on [markdown-it-img-lazy](https://github.com/tolking/markdown-it-img-lazy) and [markdown-it-imsize](https://github.com/tatsy/markdown-it-imsize) and [lozad](https://github.com/ApoorvSaxena/lozad.js)
@@ -28,14 +26,45 @@ module.exports = {
 }
 ```
 
-```
+``` md
 ![img](img.jpg)
 <!-- or -->
 ![img](img.jpg =500x300) <!-- better -->
 <!-- or -->
 <img data-src="img.jpg" loading="lazy" class="lazy">
 ```
 
+## Use in theme
+
+- registered as global components
+
+``` js
+// enhanceAppFile.js
+import ImgLazy from 'vuepress-plugin-img-lazy/ImgLazy'
+
+export default ({ Vue }) => {
+  Vue.component(ImgLazy.name, ImgLazy)
+}
+```
+
+- or registered as components
+
+``` js
+import ImgLazy from 'vuepress-plugin-img-lazy/ImgLazy'
+
+export default {
+  components: { ImgLazy }
+}
+```
+
+- use
+
+``` vue
+<template>
+  <img-lazy src="img.jpg" />
+</template>
+```
+
 ## Options
 
 ### useLoading

docs/zh/README.md

@@ -2,8 +2,6 @@
 
 > 一个为了更好的支持图片懒加载的 vuepress 插件
 
-**该插件不仅仅作用于 Markdown 文件，如果你的主题图片按照要求格式像是 `<img data-src="img.jpg" loading="lazy" class="lazy">`，它还适用于你的主题**
-
 **该插件将优先使用 [原生](https://caniuse.com/#feat=loading-lazy-attr) 的图片懒加载，如果浏览器不支持将通过 lozad 实现**
 
 基于 [markdown-it-img-lazy](https://github.com/tolking/markdown-it-img-lazy)、 [markdown-it-imsize](https://github.com/tatsy/markdown-it-imsize)、 [lozad](https://github.com/ApoorvSaxena/lozad.js)
@@ -28,14 +26,45 @@ module.exports = {
 }
 ```
 
-```
+``` md
 ![img](img.jpg)
 <!-- or -->
 ![img](img.jpg =500x300) <!-- 最佳 -->
 <!-- or -->
 <img data-src="img.jpg" loading="lazy" class="lazy">
 ```
 
+## 在主题中使用
+
+- 全局注册
+
+``` js
+// enhanceAppFile.js
+import ImgLazy from 'vuepress-plugin-img-lazy/ImgLazy'
+
+export default ({ Vue }) => {
+  Vue.component(ImgLazy.name, ImgLazy)
+}
+```
+
+- 或者直接引用
+
+``` js
+import ImgLazy from 'vuepress-plugin-img-lazy/ImgLazy'
+
+export default {
+  components: { ImgLazy }
+}
+```
+
+- 使用
+
+``` vue
+<template>
+  <img-lazy src="img.jpg" />
+</template>
+```
+
 ## 配置
 
 ### useLoading

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuepress-plugin-img-lazy",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "index.js",
   "description": "a vuepress plugin to better supporting image lazy loading",
   "author": "tolking <qw13131wang@gmail.com>",