Skip to content

Translation in english #32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 5, 2018
Merged

Translation in english #32

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 14 additions & 15 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Vue preview plugin

> 一个Vue集成[PhotoSwipe](https://github.com/dimsemenov/PhotoSwipe)图片预览插件
> 一 A Vue Integrated [PhotoSwipe](https://github.com/dimsemenov/PhotoSwipe) Image Preview Plugin

![](https://img.shields.io/npm/dm/vue-preview.svg)
![](https://img.shields.io/npm/v/vue-preview.svg)
Expand All @@ -17,13 +17,12 @@ npm i vue-preview -S

## Usage

使用须知：
Notice:
- This plugin currently support vue2.0 and above
- `img` tag class can not be removed

* 插件目前仅支持vue2.0以上版本
* img标签上的class不能去掉
If you are using `vue-cli` generated projects, you may need to modify the `webpack.base.conf.js` file loaders and add a loader. The reason is the plugin uses ES6 syntax, so you need to compile the code.

如果你是使用vue-cli生成的项目，可能需要你修改`webpack.base.conf.js`文件中的loaders，添加一个loader。
原因：插件编写中使用了es6的语法，需要进行代码编译
``` javascript
{
test: /vue-preview.src.*?js$/,
Expand All @@ -40,7 +39,7 @@ Vue.use(VuePreview)

### Examples

```
```html
<template>
<img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)">
</template>
Expand All @@ -64,19 +63,19 @@ export default {
</script>
```

### Mothods
### Methods

插件提供以下两个方法,```vm```代表组件实例
The plugin provides the following two methods, `vm` represents a component instance:

#### vm.$preview.open(index, list, options)

参数说明：
Parameters Description:

| 参数 | 说明 | 类型 | 必需
| :--: | :--: | :--: | :--:
| index |当前图片的索引值| Number | 是
| list |图片列表 | Array | 是
| options |预览插件的配置选项（[参考PhotoSwipe配置](http://photoswipe.com/documentation/options.html)） | Object | 否
| Parameters | Description | Type | Required
| :--- | :--- | :--- | :---
| index |The index of the current image | Number | Yes
| list |Image list | Array | Yes
| options |Configuration options for Preview Plugin ([see PhotoSwipe Configuration](http://photoswipe.com/documentation/options.html)) | Object | No

#### vm.$preview.close()

Expand Down