1.0.8 • Published 4 years ago

vue-preview-picture v1.0.8

Weekly downloads
2
License
MIT
Repository
-
Last release
4 years ago

vue_preview_picture

PC端Vue.js图片预览组件,支持翻页,查看原图,图片下载

效果图

组件效果图

安装

npm install vue-preview-picture -S

使用

import vuePreviewPicture from 'vue-preview-picture'
Vue.use(vuePreviewPicture)

配置

<vue-preview-picture v-model="show" :imgs="list"></vue-preview-picture>
<script>
   export default {
      data() {
         return {
            show: false,
            list: [
               'https://ss0.baidu.com/-Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=81fa753f7f8b4710d12ffbccf3cec3b2/b64543a98226cffc254c32acb4014a90f603ea4e.jpg',
               'https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=c363db7a5b4e9258b93480eeac82d1d1/38dbb6fd5266d016c364ad369a2bd40735fa35aa.jpg',
               'https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=5b5ae5a6d93f8794ccff4e2ee21b0ead/728da9773912b31b794ecb378b18367adab4e18a.jpg'
            ]
         }
      },
      methods: {
         open() {
            this.show = true;
         }
      }
   }
</script>

Props

属性说明类型默认值
value控制图片预览显示隐藏,可使用 v-model 双向绑定数据。Booleanfalse
imgs图片数据,存放图片路径Array[]
index打开图片的索引,默认打开图片第一张Number0
view-origin是否显示查看原图按钮Booleantrue
download是否显示下载按钮Booleantrue
1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

6 years ago

1.0.5

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago