@forzoom/uploader
uploader component
Last updated 4 days ago by forzoom .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @forzoom/uploader 
SYNC missed versions from official npm registry.

Install

npm install @forzoom/uploader

Desc

提供三种组件

  1. Uploader
  2. WechatUploader
  3. InputUploader

Usage

import Vue from 'vue';
import Uploader from '@forzoom/uploader';
Vue.use(Uploader, {
	.. // 额外配置
})

WechatUploader

Example

大致上存在四种元素,分别是“容器”,“图片元素”,“添加按钮”,“图片容器” 嵌套结构为

1. “容器”
    2. “图片容器”
	    3. “图片元素”
	    3. 其他元素
    2. “添加按钮”

上图中,“咖啡”图片实际上有一个“图片容器”和一个“图片元素”组成 第三个是一个“添加按钮” 点击添加按钮能够调用JSSDK中的图片上传逻辑

根据需要,可以使用Props中的样式内容修改不同元素的样式

Props
名称 默认 说明
size 1 允许最大上传图片数量
canModify true 是否允许修改
containerClass {} “容器”元素样式类
containerStyle {} “容器”元素样式
imageClass {} 每个“图片元素”样式类
imageStyle {} 每个“图片元素”样式
requestClass {} “添加按钮”样式类
requestStyle {} “添加按钮”样式
imageWrapClass {} “图片容器”样式类
imageWrapStyle {} “图片容器”样式
useWechatPreview true 是否使用微信JSSDK预览
lazyload false 是否使用vue-lazyload
Events
名称 参数 说明
load 图片上传到微信服务器开始
finish 图片上传到微信服务器结束
add { localId, serverId, } 有图片增加
remove index (被删除图片位置) 有图片被删除
click index (被点击图片位置) 当正在显示的图片被点击
choose sourceType 图片来源
startRequest request开始
endRequest request结束
load

图片开始上传到微信服务器,一般配置finish事件使用

<WechatUploader @load="onLoad">
</WechatUploader>

export default {
	methods: {
		onLoad() {
			// 展示加载动画
		},
	},
};

finish

图片上传到微信服务器结束,一般配置load事件使用

<WechatUploader @finish="onFinish">
</WechatUploader>

export default {
	methods: {
		onFinish() {
			// 隐藏加载动画
		},
	},
};
函数
名称 参数 说明
request 发起图片上传
removeAll 删除所有图片
setImages 设置默认显示的图片
getImages 获得所有图片
Example
WechatUploader.setImages

设置uploader中默认的图片内容(注意,如果uploader被销毁的情况下,设置的内容自然也会消失)

html

<!-- size="4": 显示多少个图片 -->
<!-- can-modify="false": 不允许修改,只允许查看 -->
<WechatUploader
	ref="uploader"
	:size="4"
	:can-modify="true">
</WechatUploader>

script

this.$refs.uploader.setImages([
	{
		image: '...', // 可以是url或者localId
		serverId: '...', // 可以不传入
	},
]);
WechatUploader.getImages

获得uploader中当前的图片内容

const images = this.$refs.uploader.getImages();

// 结果是
[
	{
		image: '...',
		serverId: '...',
	},
]

Types

// 表示<Uploader>组件的interface
export interface UploaderComponent {..}
// 表示<WechatUploader>组件的interface
export interface WechatUploaderComponent {..}
// 
export interface InputUploaderComponent {..}

Roadmap

  1. image之间添加间距

Current Tags

  • 0.1.2-1                                ...           beta (2 years ago)
  • 0.2.0                                ...           latest (4 days ago)

34 Versions

  • 0.2.0                                ...           4 days ago
  • 0.1.8 [deprecated]           ...           5 days ago
  • 0.1.7                                ...           a year ago
  • 0.1.6                                ...           a year ago
  • 0.1.5                                ...           a year ago
  • 0.1.4                                ...           a year ago
  • 0.1.3                                ...           2 years ago
  • 0.1.2-1 [deprecated]           ...           2 years ago
  • 0.1.2 [deprecated]           ...           2 years ago
  • 0.1.1-1 [deprecated]           ...           2 years ago
  • 0.1.1-0 [deprecated]           ...           2 years ago
  • 0.1.1 [deprecated]           ...           2 years ago
  • 0.1.0 [deprecated]           ...           2 years ago
  • 0.0.21                                ...           3 years ago
  • 0.0.20                                ...           3 years ago
  • 0.0.19                                ...           3 years ago
  • 0.0.18                                ...           3 years ago
  • 0.0.17                                ...           3 years ago
  • 0.0.16                                ...           3 years ago
  • 0.0.15                                ...           3 years ago
  • 0.0.14                                ...           3 years ago
  • 0.0.13                                ...           3 years ago
  • 0.0.12                                ...           3 years ago
  • 0.0.11                                ...           3 years ago
  • 0.0.10                                ...           3 years ago
  • 0.0.9                                ...           3 years ago
  • 0.0.8                                ...           3 years ago
  • 0.0.7                                ...           3 years ago
  • 0.0.6                                ...           3 years ago
  • 0.0.5                                ...           3 years ago
  • 0.0.4                                ...           3 years ago
  • 0.0.3                                ...           3 years ago
  • 0.0.2                                ...           3 years ago
  • 0.0.1                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 45
This Month 45
Last Day 0
Last Week 0
Last Month 5
Dependencies (0)
None
Dev Dependencies (17)
Dependents (1)

Copyright 2014 - 2016 © taobao.org |