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调用

| 名称 | 说明 | 参数 | 返回值 | |--------- |-------- |---------- |----------- | | open | | index(number)显示第几张图片, Array[string]图片url地址数组 | | | close | 关闭相册 | | | | isOpen | 返回相册状态，显示还隐藏 | null| false/true| |setFailImg| 设置加载失败显示的图片 | Object | |

setFailImg方法参数说明

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------ |-------- | | src | 图片url | String | | | | w | 图片宽度 | Number | | | | h | 图片高度 | Number | | |

vue.use Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | | locale | 设置多语言 | String | 'zh'/'en'/'ja' | 'zh' | | fialImg | 设置加载失败显示的图片 | object | | |

fialImg参数说明

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------ |-------- | | src | 图片url | String | | | | w | 图片宽度 | Number | | | | h | 图片高度 | Number | | |

注意事项

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