feat: add imageZoom option (#239)

egoist · Jun 10, 2019 · 021f43c · 021f43c
1 parent eded04a
commit 021f43c
Show file tree

Hide file tree

Showing 11 changed files with 52 additions and 14 deletions.
diff --git a/src/components/ImageZoom.vue b/src/components/ImageZoom.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="ImageZoom" :class="{'with-border': border}">
-    <img ref="img" :src="url" :alt="alt" :width="width" />
+    <img ref="img" :src="imageURL" :alt="alt" :width="width" :title="title" />
   </div>
 </template>
 
@@ -10,8 +10,10 @@ export default {
 
   props: {
     url: {
-      type: String,
-      required: true
+      type: String
+    },
+    src: {
+      type: String
     },
     alt: {
       type: String
@@ -22,6 +24,15 @@ export default {
     },
     width: {
       type: [String, Number]
+    },
+    title: {
+      type: String
+    }
+  },
+
+  computed: {
+    imageURL() {
+      return this.src || this.url
     }
   },
 

diff --git a/src/store.js b/src/store.js
@@ -108,7 +108,8 @@ const store = new Vuex.Store({
 
       const env = {
         headings: [],
-        mixins: []
+        mixins: [],
+        config: getters.config
       }
       if (page.markdown) {
         page.content = marked(page.content, {

diff --git a/src/utils/marked.js b/src/utils/marked.js
@@ -1123,14 +1123,20 @@ Renderer.prototype.link = function(href, title, text) {
   return out
 }
 
+// @modified
 Renderer.prototype.image = function(href, title, text) {
   if (this.options.baseUrl && !originIndependentUrl.test(href)) {
     href = resolveUrl(this.options.baseUrl, href)
   }
-  var out = '<img src="' + href + '" alt="' + text + '"'
+  var { imageZoom } = this.options.env.config
+  var tag = imageZoom ? 'image-zoom' : 'img'
+  var out = `<${tag} src="` + href + '" alt="' + text + '"'
   if (title) {
     out += ' title="' + title + '"'
   }
+  if (imageZoom) {
+    out += ' v-bind:border="false"'
+  }
   out += this.options.xhtml ? '/>' : '>'
   return out
 }

diff --git a/website/docs/builtin-components.md b/website/docs/builtin-components.md
@@ -8,7 +8,8 @@ Use medium-style zoom effect to display certain image.
 
 | Prop   | Type      | Default | Description              |
 | ------ | --------- | ------- | ------------------------ |
-| url    | `string`  | N/A     | URL to image             |
+| src    | `string`  | N/A     | URL to image             |
+| title  | `string`  | N/A     | Image title             |
 | alt    | `string`  | N/A     | Placeholder text         |
 | border | `boolean` | `false` | Show border around image |
 | width  | `string`  | N/A     | Image width              |
@@ -19,13 +20,13 @@ Example:
 
 ```markdown
 <ImageZoom 
-  url="https://i.loli.net/2018/09/24/5ba8e878850e9.png" 
+  src="https://i.loli.net/2018/09/24/5ba8e878850e9.png" 
   :border="true" 
   width="300"
 />
 ```
 
-<ImageZoom url="https://i.loli.net/2018/09/24/5ba8e878850e9.png" :border="true" width="300"/>
+<ImageZoom src="https://i.loli.net/2018/09/24/5ba8e878850e9.png" :border="true" width="300"/>
 
 ## `<Badge>`
 

diff --git a/website/docs/guide/deployment.md b/website/docs/guide/deployment.md
@@ -22,7 +22,7 @@ Render offers [free static site hosting](https://render.com/docs/static-sites) w
 
 The easiest way to use GitHub Pages is to populate all your files inside `./docs` folder on the master branch, and then use this folder for GitHub Pages:
 
-<ImageZoom url="https://i.loli.net/2018/06/11/5b1e0da0c173a.png" alt="github pages" :border="true" />
+<ImageZoom src="https://i.loli.net/2018/06/11/5b1e0da0c173a.png" alt="github pages" :border="true" />
 
 However you can still use `gh-pages` branch or even `master` branch to serve your docs, it all depends on your needs.
 

diff --git a/website/docs/guide/plugin.md b/website/docs/guide/plugin.md
@@ -30,7 +30,7 @@ Example:
 {author}
 ```
 
-<ImageZoom :border="true" url="https://i.loli.net/2018/09/28/5bae278dd9c03.png" />
+<ImageZoom :border="true" src="https://i.loli.net/2018/09/28/5bae278dd9c03.png" />
 
 ---
 

diff --git a/website/docs/options.md b/website/docs/options.md
@@ -249,6 +249,15 @@ new Docute({
 })
 ```
 
+## imageZoom
+
+- Type: `boolean`
+- Default: `undefined`
+
+Enable Medium-like image zoom effect to all images.
+
+Alternatively you can use the [`<image-zoom>`](./builtin-components.md#imagezoom) component if you only need this in specific images.
+
 ## fetchOptions
 
 - Type: `object`

diff --git a/website/docs/zh/builtin-components.md b/website/docs/zh/builtin-components.md
@@ -9,6 +9,7 @@ Docute 附带一些内置的 Vue 组件。
 |属性|类型|默认值|描述|
 |---|---|---|---|
 |url|`string`|N/A|Image 的 URL|
+| title  | `string`  | N/A     | Image title             |
 |alt|`string`|N/A|占位文字|
 |border|`boolean`|`false`|是否显示图像周围的边框|
 |width|`string`|N/A|Image 宽度|
@@ -17,13 +18,13 @@ Docute 附带一些内置的 Vue 组件。
 
 ```markdown
 <ImageZoom 
-  url="https://i.loli.net/2018/09/24/5ba8e878850e9.png" 
+  src="https://i.loli.net/2018/09/24/5ba8e878850e9.png" 
   :border="true" 
   width="300"
 />
 ```
 
-<ImageZoom url="https://i.loli.net/2018/09/24/5ba8e878850e9.png" :border="true" width="300"/>
+<ImageZoom src="https://i.loli.net/2018/09/24/5ba8e878850e9.png" :border="true" width="300"/>
 
 
 ## `<Badge>`

diff --git a/website/docs/zh/guide/deployment.md b/website/docs/zh/guide/deployment.md
@@ -36,6 +36,6 @@ Make sure to check out Now's [GitHub Integration](https://zeit.co/docs/v2/integr
 
 使用 Github Pages 最简单的方式是在 master 分支上的 `./docs` 文件夹中加入所有文件，然后将此文件夹用于 Github Pages：
 
-<ImageZoom url="https://i.loli.net/2018/06/11/5b1e0da0c173a.png" alt="github pages" :border="true" />
+<ImageZoom src="https://i.loli.net/2018/06/11/5b1e0da0c173a.png" alt="github pages" :border="true" />
 
 但是你仍然可以使用 `gh-pages` 分支或者 `master` 分支来为你的文档提供服务，这一切都取决于你的需求。
diff --git a/website/docs/zh/guide/plugin.md b/website/docs/zh/guide/plugin.md
@@ -30,7 +30,7 @@ new Docute({
 {author}
 ```
 
-<ImageZoom :border="true" url="https://i.loli.net/2018/09/28/5bae278dd9c03.png" />
+<ImageZoom :border="true" src="https://i.loli.net/2018/09/28/5bae278dd9c03.png" />
 
 ---
 

diff --git a/website/docs/zh/options.md b/website/docs/zh/options.md
@@ -248,6 +248,15 @@ new Docute({
 })
 ```
 
+## imageZoom
+
+- Type: `boolean`
+- Default: `undefined`
+
+Enable Medium-like image zoom effect to all images.
+
+Alternatively you can use the [`<image-zoom>`](./builtin-components.md#imagezoom) component if you only need this in specific images.
+
 ## fetchOptions
 
 - Type: `object`