icon: ''
tags:
  en:
    - preview
    - swipephoto
    - image
  zh-CN:
    - 预览
    - 图片
extra:
  en: |

    example for list:

    ``` js
    [{
      src: 'https://placekitten.com/800/400',
      w: 600,
      h: 400
    },
    {
      src: 'https://placekitten.com/1200/900',
      msrc: 'https://placekitten.com/120/90', // 缩略图
      w: 1200,
      h: 900
    }]
    ```

    <p class="warning">before v2.4.0, `w` and `h` should be specified.</p>

    Prevewing an image by index:

    ``` js
    this.$refs.previewer.show(index)
    ```

  zh-CN: |

    list的数据示例如图：

    ``` js
    [{
      src: 'https://placekitten.com/800/400',
      w: 600,
      h: 400
    },
    {
      src: 'https://placekitten.com/1200/900',
      w: 1200,
      h: 900
    }]
    ```

    <p class="warning">注意在 v2.4.0 之前 w 和 h 都必须填写</p>

    显示特定index的图片，使用`ref`:

    ``` js
    this.$refs.previewer.show(index)
    ```

    <p class="warn">注意，当你自定义添加按钮时，需要在 photoswipe 选项设置 clickable 元素，否则点击将没有响应</p>


    ``` html
    <previewer ref="previewer" :list="previewerList" :options="options">
      <template slot="button-after">
        <span class="previewer-delete-icon-box">
          <img src="../assets/previewer_delete_icon.png" width="22" height="22" class="previewer-delete-icon" @click.prevent.stop="removeImg">
        </span>
      </template>
    </previewer>
    ```


    ``` js
    options: {
      isClickableElement: function (el) {
        return /previewer-delete-icon/.test(el.className)
      }
    }
    ```
props:
  list:
    type: Array
    en: images list
    zh-CN: 图片列表
  options:
    type: 'Object'
    en: options for `photoswipe`
    zh-CN: '`photoswipe`的设置'