vma-vue-iview
v1.0.16
Published
A Vue.js project
Downloads
4
Readme
#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 />