vma-vue-iview v1.0.16

#vma-vue-iview

install

Please install iview first!

install vma-vue-iview

Using npm:

npm install vma-vue-iview --save

Using a script tag for global use:

<script type="text/javascript" src="./vma-vue-iview/dist/static/js/vmaIview.js"></script>

Usage

import Vue from 'vue'
import iview from 'iview
import vmaIview from 'vma-vue-iview'

const options = {...}
Vue.install(iview)
Vue.install(vmaIview, options)

options

const options = {
  components: {
   	// 上传组件
    upload: {
      qiniu: {
        /**
         * 七牛上传配置URL
         * @param {*} type
         */
        getQiniuTokenUrl(type) {
          return `/common-business/v1.0/common/${type}/qiniu_token`
        },
        /**
         * 获取七牛上传配置
         * @param {*} type 1-图片
         */
        getServerConfig(type = 1) {
          return axios({
            url: this.getQiniuTokenUrl(type),
            method: 'GET',
            responseType: 'json'
          }).then(data => {
            return {
              domain: data.domainUrl,
              zoneUrl: this.getZoneUrl(data.qiniuZone.upUrls),
              token: data.token
            }
          })
        },
        /**
         * 取七牛上传地址
         * @param {*} qiniuZone
         */
        getZoneUrl(qiniuZone) {
          if (Array.isArray(qiniuZone)) {
            let len = qiniuZone.length
            return qiniuZone[randRange(0, len - 1)]
          }
          return String(qiniuZone)
        },
        /**
         * 生成url地址
         * @param {*} data
         * @param {*} response
         */
        generalUrl(data, response) {
          return `${data.domain}/${response.hash}`
        }
      }
    }
  },
  plugins: {
  	// 扩展在 Vue.prototype上的快捷方法
    // eg. this.success('success')
    iview: {
      message: {
        'success': {
          duration: 5
        },
        'info': {
          duration: 8
        },
        'warning': {
          duration: 10
        },
        'error': {
          duration: 30
        },
        'loading': {}
      }
    }
  }
}

feature

components

1、vma-image-view 图片预览 已扩展在Vue.prototype上，eg. this.viewImage(url) eg.

<vma-image-view v-model="visible" :url="url" />
export default {
  data() {
    return {
      visible: false,
      url: 'http://www.photo.com/avator.jpg'
    }
  }
}

2、vma-pagination 分页插件 eg.

<vma-pagination :pageNum="page.pageNum" :pageSize="page.pageSize" :total="page.total" :simple="false" @change="list" />
export default {
  data() {
    return {
      page: {
       	pageNum: 1,
        pageSize: 10,
        total: 50
      }
    }
  },
  methods: {
    list(pageNum, pageSize) {}
  }
}

3、vma-upload 上传组件 eg.

<vma-upload v-model="url" :limit="1" accept="images/*" :exts="['jpg', 'gif', 'png']" uploadType="qiniu" />
export default {
  data() {
    return {
      url: ''
    }
  }
}
    
vma-upload和vma-image-upload说明
uploadType 默认为七牛云上传，相关配置在options中
v-model支持三种格式
  数组
  字符串(limit = 1)
  逗号分隔的字符串(limit > 1)
        

4、vma-image-upload 图片上传组件 eg.

<vma-image-upload v-model="url" :limit="1" uploadType="qiniu" />
export default {
  data() {
    return {
      url: ''
    }
  }
}

directives

1、v-imageView 图片预览 eg.

<img src="http:www.photo.com/avtor.jpg" v-imageView />