图片选择

组件介绍

uXui 图片选择组件以 uni.chooseImage 接口为基础，实现了多图选择、展示、预览、删除等功能；

运行截图

组件属性

属性名称	类型	默认值	作用
maxFileNumber	Number	9	最大图片选择数量
btnName	String	添加	添加图片按钮文本
items	Array	[]	默认图片数据
removeBtnColor	String	rgba(0, 0, 0, 0.8)	删除按钮颜色
imgMode	String	widthFix	图片 mode 属性值
sourceType	Array	['album', 'camera']	图片来源 album ：相机，camera 摄像头
borderRadius	String	10rpx	图片列表圆角尺寸

组件事件

1. @change 
当图片数据发生变化时触发，传递数组形式的图片地址数据;
2. @remove 删除某个图片时触发，携带被删除的图片地址和索引数据;

演示代码

<template>
	<view>
		<text class="ux-h6 ux-color-grey ux-mt-large ux-body">多图选择</text>
		<view 
		class="ux-bg-white ux-mt-small" 
		style="padding:15rpx 30rpx;">
			<ux-choose-images 
			:items="defaultItems" 
			imgMode="aspectFill" 
			@change="change" 
			@remove="removeImg" ></ux-choose-images>
		</view>
	</view>
</template>
<script lang="uts">
export default {
	data() {
		return {
			defaultItems : new Array<string>()
		}
	},
	methods: {
		change    : function (urls:string[]) {
			console.log('图片数据变化');
			console.log(urls);
		},
		removeImg : function (url:string,  index:number) {
			console.log('删除图片');
			console.log(url);
			console.log(index);
		}
	},
	created:function(){
		// 模拟 api 请求加载默认数据
		setTimeout(()=>{
			this.defaultItems = [
				'https://img2.baidu.com/it/u=3574827082,3267311681&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
				'https://img2.baidu.com/it/u=2471953619,36461253&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750',
				'https://img2.baidu.com/it/u=1582162303,443279268&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333'
			] as string[];
		}, 100);
	}
}
</script>
<style scoped>
</style>