diff --git a/dist/image-picker/index.js b/dist/image-picker/index.js index 2c976aa2..87447f2a 100644 --- a/dist/image-picker/index.js +++ b/dist/image-picker/index.js @@ -1 +1 @@ -import nodeUtil from"../core/utils/node-util";import deviceUtil from"../utils/device-util";import eventUtil from"../core/utils/event-util";import{promisic}from"../utils/util";Component({options:{pureDataPattern:/urls|cells|preview|remove|sizeType|maxImageSize|clear/},behaviors:["wx://form-field"],externalClasses:["l-class","l-item-class"],properties:{urls:{type:Array,value:null},cells:{type:Array,value:null},size:{type:Number,value:null},mode:{type:String,value:"aspectFit"},preview:{type:Boolean,value:!0},remove:{type:Boolean,value:!0},count:{type:Number,value:9},sizeType:{type:Array|String,value:["original","compressed"]},maxImageSize:{type:Number,value:0},clear:{type:Boolean,value:!1},custom:{type:Boolean,value:!1}},data:{itemSizePercentage:null,value:null},observers:{clear(e){e&&(console.warn("clear 属性已废弃,请使用 linClearImage 函数 或 urls 属性清空图片\n 详情信息参考:"),this.setData({value:[],clear:!1}))},"urls,cells":function(e,t){if(!e&&!t)return;let a=[];if(e)a=e;else if(t)for(const e of t)Object.prototype.hasOwnProperty.call(e,"url")&&a.push(e.url);this.setData({value:a.slice(0,this.data.count)})},async size(e){if(!e)return void this.setData({itemSizePercentage:null});const t=await nodeUtil.getNodeRectFromComponent(this,".lin-image-picker__container"),a=10/e*10-20/deviceUtil.px2rpx(t.right-t.left)*100+"%;";this.setData({itemSizePercentage:a})},custom(e){e&&console.warn("custom 已弃用,请勿使用该属性,直接传入 slot 即可")}},methods:{onTapImage(e){const t=this,a=this.data.value,i=e.currentTarget.dataset.imageIndex,l=a[i],s={all:a,index:i,current:l};eventUtil.emit(this,"lintap",s),this.data.preview&&wx.previewImage({urls:a,current:l,success(){eventUtil.emit(t,"linpreview",s)}},!0)},onTapRemove(e){const t=this.data.value,a=e.currentTarget.dataset.imageIndex,i={all:t,index:a,current:t[a]};eventUtil.emit(this,"linremovetap",i),this.data.remove&&this._removeImageByIndex(a)},async onTapAdd(){let{value:e,count:t,sizeType:a}=this.data;const i=t-e.length;if(e.length>=t||i<=0)return;const l=await promisic(wx.chooseImage)({count:i,sizeType:a,sourceType:["album","camera"]}),s=[],r=[];l.tempFiles.forEach(e=>{const{path:t,size:a}=e;a>this.data.maxImageSize?r.push(t):s.push(t)}),this.setData({value:e.concat(s)},()=>{const e={all:this.data.value,current:s,oversize:r};eventUtil.emit(this,"linadd",e),eventUtil.emit(this,"linchange",e),eventUtil.emit(this,"linoversize",e)})},getValue(){return this.data.value},_removeImageByIndex(e){const t=this.data.value,a=t[e];t.splice(e,1);const i={index:e,current:a,all:t};this.setData({value:t},()=>{eventUtil.emit(this,"linremove",i)})},linRemoveImage(e){this._removeImageByIndex(e)},linClearImage(){this.setData({value:[]})},linGetValue(){return this.data.value}}}); \ No newline at end of file +import nodeUtil from"../core/utils/node-util";import deviceUtil from"../utils/device-util";import eventUtil from"../core/utils/event-util";import{promisic}from"../utils/util";Component({options:{pureDataPattern:/urls|cells|preview|remove|sizeType|maxImageSize|clear/},behaviors:["wx://form-field"],externalClasses:["l-class","l-item-class"],properties:{urls:{type:Array,value:null},cells:{type:Array,value:null},size:{type:Number,value:null},mode:{type:String,value:"aspectFit"},preview:{type:Boolean,value:!0},remove:{type:Boolean,value:!0},count:{type:Number,value:9},sizeType:{type:Array|String,value:["original","compressed"]},maxImageSize:{type:Number,value:0},clear:{type:Boolean,value:!1},custom:{type:Boolean,value:!1},value:{type:Array,value:[]}},data:{itemSizePercentage:null},observers:{clear(e){e&&(console.warn("clear 属性已废弃,请使用 linClearImage 函数 或 urls 属性清空图片\n 详情信息参考:"),this.setData({value:[],clear:!1}))},"urls,cells":function(e,t){if(!e&&!t)return;let a=[];if(e)a=e;else if(t)for(const e of t)Object.prototype.hasOwnProperty.call(e,"url")&&a.push(e.url);this.setData({value:a.slice(0,this.data.count)})},async size(e){if(!e)return void this.setData({itemSizePercentage:null});const t=await nodeUtil.getNodeRectFromComponent(this,".lin-image-picker__container"),a=10/e*10-20/deviceUtil.px2rpx(t.right-t.left)*100+"%;";this.setData({itemSizePercentage:a})},custom(e){e&&console.warn("custom 已弃用,请勿使用该属性,直接传入 slot 即可")}},methods:{onTapImage(e){const t=this,a=this.data.value,i=e.currentTarget.dataset.imageIndex,l=a[i],r={all:a,index:i,current:l};eventUtil.emit(this,"lintap",r),this.data.preview&&wx.previewImage({urls:a,current:l,success(){eventUtil.emit(t,"linpreview",r)}},!0)},onTapRemove(e){const t=this.data.value,a=e.currentTarget.dataset.imageIndex,i={all:t,index:a,current:t[a]};eventUtil.emit(this,"linremovetap",i),this.data.remove&&this._removeImageByIndex(a)},async onTapAdd(){let{value:e,count:t,sizeType:a,maxImageSize:i}=this.data;const l=t-e.length;if(e.length>=t||l<=0)return;const r=await promisic(wx.chooseImage)({count:l,sizeType:a,sourceType:["album","camera"]}),s=[],n=[];r.tempFiles.forEach(e=>{const{path:t,size:a}=e;a>i&&i>0?n.push(t):s.push(t)}),this.setData({value:e.concat(s)},()=>{const e={all:this.data.value,current:s,oversize:n};eventUtil.emit(this,"linadd",e),eventUtil.emit(this,"linchange",e),eventUtil.emit(this,"linoversize",e)})},getValues(){return this.data.value},_removeImageByIndex(e){const t=this.data.value,a=t[e];t.splice(e,1);const i={index:e,current:a,all:t};this.setData({value:t},()=>{eventUtil.emit(this,"linremove",i)})},linRemoveImage(e){this._removeImageByIndex(e)},linClearImage(){this.setData({value:[]})},linGetValue(){return this.data.value}}}); \ No newline at end of file diff --git a/examples/dist/image-picker/index.js b/examples/dist/image-picker/index.js index cfb02539..fe96e1b1 100644 --- a/examples/dist/image-picker/index.js +++ b/examples/dist/image-picker/index.js @@ -49,10 +49,11 @@ Component({ }, sizeType: { // 该写法经测试有效 - type: Array|String, + type: Array | String, value: ['original', 'compressed'] }, // 所选图片最大限制,单位字节 + // 0 为无限制 maxImageSize: { type: Number, value: 0, @@ -69,13 +70,20 @@ Component({ type: Boolean, value: false }, + // 存放图片 url 的数组 + // 放在 properties 中是因为引入了 behaviors: ['wx://form-field'], + // wx://form-field 中的 value 为 null,会引起很多报错 + // value 放在 data 中没有 properties 优先级高,覆盖不了 + // 所以只能放在此处 + value: { + type: Array, + value: [] + } }, data: { // 根据 size 不同,计算的图片显示大小不同 - itemSizePercentage: null, - // 存放图片 url 的数组 - value: null + itemSizePercentage: null }, observers: { @@ -207,7 +215,7 @@ Component({ * @returns {Promise} */ async onTapAdd() { - let {value, count, sizeType} = this.data; + let {value, count, sizeType, maxImageSize} = this.data; const remainCount = count - value.length; if (value.length >= count || remainCount <= 0) { return; @@ -227,7 +235,7 @@ Component({ chooseImageRes.tempFiles.forEach((tempFile) => { const {path, size} = tempFile; - if (size > this.data.maxImageSize) { + if (size > maxImageSize && maxImageSize > 0) { oversizeImageUrlArray.push(path); } else { addImageUrlArray.push(path); @@ -255,7 +263,7 @@ Component({ * 供 Form 组件调用的取值方法 * @returns {*} */ - getValue() { + getValues() { return this.data.value; }, diff --git a/package.json b/package.json index e08facba..f3786f08 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "lin-ui", - "version": "0.9.3", + "version": "0.9.4", "description": "A high quality UI components library with MiniProgram", "main": "app.js", "directories": { diff --git a/src/image-picker/index.js b/src/image-picker/index.js index cfb02539..fe96e1b1 100644 --- a/src/image-picker/index.js +++ b/src/image-picker/index.js @@ -49,10 +49,11 @@ Component({ }, sizeType: { // 该写法经测试有效 - type: Array|String, + type: Array | String, value: ['original', 'compressed'] }, // 所选图片最大限制,单位字节 + // 0 为无限制 maxImageSize: { type: Number, value: 0, @@ -69,13 +70,20 @@ Component({ type: Boolean, value: false }, + // 存放图片 url 的数组 + // 放在 properties 中是因为引入了 behaviors: ['wx://form-field'], + // wx://form-field 中的 value 为 null,会引起很多报错 + // value 放在 data 中没有 properties 优先级高,覆盖不了 + // 所以只能放在此处 + value: { + type: Array, + value: [] + } }, data: { // 根据 size 不同,计算的图片显示大小不同 - itemSizePercentage: null, - // 存放图片 url 的数组 - value: null + itemSizePercentage: null }, observers: { @@ -207,7 +215,7 @@ Component({ * @returns {Promise} */ async onTapAdd() { - let {value, count, sizeType} = this.data; + let {value, count, sizeType, maxImageSize} = this.data; const remainCount = count - value.length; if (value.length >= count || remainCount <= 0) { return; @@ -227,7 +235,7 @@ Component({ chooseImageRes.tempFiles.forEach((tempFile) => { const {path, size} = tempFile; - if (size > this.data.maxImageSize) { + if (size > maxImageSize && maxImageSize > 0) { oversizeImageUrlArray.push(path); } else { addImageUrlArray.push(path); @@ -255,7 +263,7 @@ Component({ * 供 Form 组件调用的取值方法 * @returns {*} */ - getValue() { + getValues() { return this.data.value; },