vuk-view-photo v1.0.2

Message

安装

# 使用npm
npm install --save vuk-view-photo

全局引入(非标签模式)

以插件形式调用时，和template中使用不同，属性名请使用驼峰式，比如confirmText而不是confirm-text。

import vue from 'vue';
import viewPhoto  from 'vuk-view-photo';

vue.use(message, {
    locale: 'zh',//zh,en,ja
    failImg: { //图片加载失败显示的图片, 有默认的图片
        src: '图片url',
        w: 200,//图片宽度，
        h: 200 //图片高度       
    }
});

使用实例:

<template>
     <message v-model="show" @onConfirm="confrim" title="温馨提示" msg="提示内容" ></message>
     <button @click="open(0)">打开</button>
</template>

<script>
export default {
    data() {
        return {
            show: false,
            arr:[]
        }
    },
    methods: {
        open(index) {
            //index 显示第几张, arr图片片数组
            let arr = [
                 'https://url/1.jpg',
                 'https://url/2.jpg',
                 'https://url/2.jpg'

             ]
            this.$vukViewPhoto.open(index, arr)
        },
        confirm() {
        }
    }
}   
</script>

国际化

组件支持多语言，目前只支持中文和英文，可通过属性，调用方法和安装方式设置多语言，优先级为：

属性 > 调用方法 > 安装

注意: 只有通过全局引入时，才能通过调用方法设置语言

<template>
  <!--通过属性设置多语言-->
  <message locale='en'></message>
</template>

<script>
  export default {
    data () {
      return {
      };
    }
  }
</script>

<template>
  <message></message>
  <button @click='setLocale()'>设置语言</button>
</template>

<script>
  export default {
    data () {
      return {
      };
    },
    methods: {
      setLocale() {
          // 通过调用方法设置多语言，注：全局引入时才能用该方式
          this.$vukViewPhoto.locale('en');
      }
    }
  }
</script>

import vue from 'vue';
import viewPhoto from 'vuk-view-photo';

// 通过安装时设置多语言
vue.use(viewPhoto, { locale: 'en' });

Methods

通过this.$vukViewPhoto调用

setFailImg方法参数说明

vue.use Attributes

fialImg参数说明

注意事项

使用open打开图片相册时，最好图片是加载过的，否则会加载图片所花时间会比较长，但会弹出加载中的提示……