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`