diff --git a/.eslintignore b/.eslintignore index 6a7ff0ca..e7bcd4ed 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,4 +1,5 @@ build/*.js config/*.js example/*.js -dist \ No newline at end of file +dist +src/bahaviors/*.js \ No newline at end of file diff --git a/dist/badge/index.js b/dist/badge/index.js index e85fc3f6..072e08c9 100644 --- a/dist/badge/index.js +++ b/dist/badge/index.js @@ -1 +1 @@ -Component({externalClasses:["l-class","l-class-self","l-self-class"],properties:{dot:{type:Boolean,value:!1},shape:{type:String,value:"horn"},value:{type:String,value:"0"},mode:{type:String,value:"number"},maxCount:{type:Number,value:99},numberType:{type:String,value:"overflow"},show:{type:Boolean,value:!0}},data:{finalCount:0},observers:{value:function(){this.finalCount()}},methods:{finalCount(){isNaN(Number(this.data.value))||"text"===this.data.mode?this.setData({finalCount:this.data.value}):this.switchType()},switchType(){switch(this.data.numberType){case"overflow":this.setData({finalCount:Number(this.data.value)>Number(this.data.maxCount)?`${this.data.maxCount}+`:this.data.value});break;case"ellipsis":this.setData({finalCount:Number(this.data.value)>Number(this.data.maxCount)?"...":this.data.value});break;case"limit":this.setData({finalCount:Number(this.data.value)>999?Number(this.data.value)>=9999?Math.floor(this.data.value/1e4*100)/100+"w":Math.floor(this.data.value/1e3*100)/100+"k":this.data.value});break;default:this.setData({finalCount:Number(this.data.value)})}},handleTap(){this.triggerEvent("lintap",{},{bubbles:!0,composed:!0})}}}); \ No newline at end of file +import validator from"../behaviors/validator";Component({externalClasses:["l-class","l-class-self","l-self-class"],behaivors:[validator],properties:{dot:{type:Boolean,value:!1},shape:{type:String,value:"horn",options:["horn","circle"]},value:{type:String,value:"0"},mode:{type:String,value:"number",options:["number","text"]},maxCount:{type:Number,value:99},numberType:{type:String,value:"overflow",options:["overflow","limit","ellipsis"]},show:{type:Boolean,value:!0}},data:{finalCount:0},observers:{value:function(){this.finalCount()}},methods:{finalCount(){isNaN(Number(this.data.value))||"text"===this.data.mode?this.setData({finalCount:this.data.value}):this.switchType()},switchType(){switch(this.data.numberType){case"overflow":this.setData({finalCount:Number(this.data.value)>Number(this.data.maxCount)?`${this.data.maxCount}+`:this.data.value});break;case"ellipsis":this.setData({finalCount:Number(this.data.value)>Number(this.data.maxCount)?"...":this.data.value});break;case"limit":this.setData({finalCount:Number(this.data.value)>999?Number(this.data.value)>=9999?Math.floor(this.data.value/1e4*100)/100+"w":Math.floor(this.data.value/1e3*100)/100+"k":this.data.value});break;default:this.setData({finalCount:Number(this.data.value)})}},handleTap(){this.triggerEvent("lintap",{},{bubbles:!0,composed:!0})}}}); \ No newline at end of file diff --git a/dist/behaviors/rules.js b/dist/behaviors/rules.js index 9c951699..e13efe04 100644 --- a/dist/behaviors/rules.js +++ b/dist/behaviors/rules.js @@ -1 +1 @@ -import Schema from"../common/async-validator/index";export default Behavior({behaviors:[],properties:{rules:{type:[Object,Array],value:[]},tipType:{type:String,value:"toast"}},data:{schema:"",tipFun:{message:"showMessage",toast:"showToast"},tipContent:{message:"content",toast:"title"},errorText:"",errors:[]},methods:{initRules(){const{rules:t}=this.data;t&&("[object Object]"===Object.prototype.toString.call(t)&&(this.data.rules=[t]),this.data.rules.forEach(t=>{t.trigger?"string"!=typeof t.trigger||(t.trigger=[t.trigger]):t.trigger=[]}))},getNeedValidateRule(t){const e=this.data.name,{rules:a}=this.data;if(!a)return;const r=t?a.filter(e=>e.trigger.indexOf(t)>-1):a,s=new Schema({[e]:r});return this.setData({schema:s}),r},validatorData(t,e){const{tipType:a,tipFun:r,tipContent:s}=this.data;this.getNeedValidateRule(e)&&this.data.schema.validate(t,t=>{if(this.setData({errors:t||[]}),this.triggerEvent("linvalidate",{errors:t,isError:!!t}),t&&a){const e=r[a],i=s[a];return"text"===a?(this.setData({errorText:t[0].message}),t):wx.lin&&wx.lin[e]?(wx.lin[e]&&wx.lin[e]({[i]:t[0].message,duration:1500,mask:!1}),t):(wx.showToast({icon:"none",title:`请在页面内引入${a}组件`}),t)}!t&&a&&this.setData({errorText:""})})}}}); \ No newline at end of file +import Schema from"../common/async-validator/index";import validator from"../behaviors/validator";export default Behavior({behaviors:[validator],properties:{rules:{type:[Object,Array],value:[]},tipType:{type:String,value:"toast",options:["toast","message","text"]}},data:{schema:"",tipFun:{message:"showMessage",toast:"showToast"},tipContent:{message:"content",toast:"title"},errorText:"",errors:[]},methods:{initRules(){const{rules:t}=this.data;t&&("[object Object]"===Object.prototype.toString.call(t)&&(this.data.rules=[t]),this.data.rules.forEach(t=>{t.trigger?"string"!=typeof t.trigger||(t.trigger=[t.trigger]):t.trigger=[]}))},getNeedValidateRule(t){const e=this.data.name,{rules:a}=this.data;if(!a)return;const r=t?a.filter(e=>e.trigger.indexOf(t)>-1):a,s=new Schema({[e]:r});return this.setData({schema:s}),r},validatorData(t,e){const{tipType:a,tipFun:r,tipContent:s}=this.data;this.getNeedValidateRule(e)&&this.data.schema.validate(t,t=>{if(this.setData({errors:t||[]}),this.triggerEvent("linvalidate",{errors:t,isError:!!t}),t&&a){const e=r[a],i=s[a];return"text"===a?(this.setData({errorText:t[0].message}),t):wx.lin&&wx.lin[e]?(wx.lin[e]&&wx.lin[e]({[i]:t[0].message,duration:1500,mask:!1}),t):(wx.showToast({icon:"none",title:`请在页面内引入${a}组件`}),t)}!t&&a&&this.setData({errorText:""})})}}}); \ No newline at end of file diff --git a/dist/behaviors/validator.js b/dist/behaviors/validator.js new file mode 100644 index 00000000..9b43b561 --- /dev/null +++ b/dist/behaviors/validator.js @@ -0,0 +1 @@ +export default Behavior({definitionFilter(e){const{properties:o}=e;Object.keys(o).forEach(e=>{const{options:t}=o[e];t&&(o[e].observer=function(o){t.includes(o)||console.error(`${e}: ${o} must be in the [${t}]`)})})}}); \ No newline at end of file diff --git a/dist/button/index.js b/dist/button/index.js index 3cb04616..c37033f6 100644 --- a/dist/button/index.js +++ b/dist/button/index.js @@ -1 +1 @@ -Component({externalClasses:["l-class","l-label-class","l-hover-class","l-img-class","l-icon-class"],properties:{name:{type:String,value:"lin"},type:{type:String,value:"default"},plain:Boolean,size:{type:String,value:"medium"},shape:{type:String,value:"circle"},disabled:{type:Boolean,value:!1},special:{type:Boolean,value:!1},loading:{type:Boolean,value:!1},width:Number,height:Number,icon:String,image:String,bgColor:String,iconColor:String,iconSize:String,openType:String,appParameter:String,lang:String,hoverStopPropagation:Boolean,hoverStartTime:{type:Number,value:20},hoverStayTime:{type:Number,value:70},sessionFrom:{type:String,value:""},sendMessageTitle:String,sendMessagePath:String,sendMessageImg:String,showMessageCard:Boolean,formType:String},methods:{handleTap(){if(this.data.disabled||this.data.loading)return!1;this.triggerEvent("lintap",{},{bubbles:!0,composed:!0})},openTypeEvent(e){this.triggerEvent(e.type,e.detail,{})}}}); \ No newline at end of file +import validator from"../behaviors/validator";Component({externalClasses:["l-class","l-label-class","l-hover-class","l-img-class","l-icon-class"],behaviors:[validator],properties:{name:{type:String,value:"lin"},type:{type:String,value:"default",options:["warning","success","error","default"]},plain:Boolean,size:{type:String,value:"medium",options:["medium","large","mini","long"]},shape:{type:String,value:"circle",options:["square","circle","semicircle"]},disabled:{type:Boolean,value:!1},special:{type:Boolean,value:!1},loading:{type:Boolean,value:!1},width:Number,height:Number,icon:String,image:String,bgColor:String,iconColor:String,iconSize:String,openType:String,appParameter:String,lang:String,hoverStopPropagation:Boolean,hoverStartTime:{type:Number,value:20},hoverStayTime:{type:Number,value:70},sessionFrom:{type:String,value:""},sendMessageTitle:String,sendMessagePath:String,sendMessageImg:String,showMessageCard:Boolean,formType:String},methods:{handleTap(){if(this.data.disabled||this.data.loading)return!1;this.triggerEvent("lintap",{},{bubbles:!0,composed:!0})},openTypeEvent(e){this.triggerEvent(e.type,e.detail,{})}}}); \ No newline at end of file diff --git a/dist/card/index.js b/dist/card/index.js index 4f040d88..67895ff0 100644 --- a/dist/card/index.js +++ b/dist/card/index.js @@ -1 +1 @@ -Component({externalClasses:["l-class","l-img-class","l-title-class"],options:{multipleSlots:!0},properties:{image:String,title:String,describe:String,plaintext:Boolean,full:Boolean,position:{type:String,value:"left"},type:{type:String,value:"primary"},imageMode:{type:String,value:"scaleToFill"}},data:{},methods:{}}); \ No newline at end of file +import validator from"../behaviors/validator";Component({externalClasses:["l-class","l-img-class","l-title-class"],options:{multipleSlots:!0},bahaviors:[validator],properties:{image:String,title:String,describe:String,plaintext:Boolean,full:Boolean,position:{type:String,value:"left",options:["left","right"]},type:{type:String,value:"primary",options:["primary","avatar"]},imageMode:{type:String,value:"scaleToFill"}},data:{},methods:{}}); \ No newline at end of file diff --git a/dist/dialog/index.js b/dist/dialog/index.js index 5070a575..9dcbedc2 100644 --- a/dist/dialog/index.js +++ b/dist/dialog/index.js @@ -1 +1 @@ -import computeOffset from"../behaviors/computeOffset";import zIndex from"../behaviors/zIndex";import hover from"../behaviors/hover";Component({behaviors:[computeOffset,zIndex,hover],externalClasses:["l-class","l-title-class","l-content-class","l-confirm-class","l-cancel-class","l-bg-class"],properties:{show:{type:Boolean,value:!1},type:{type:String,value:"alert"},title:{type:String,value:"提示"},showTitle:{type:Boolean,value:!0},content:{type:String,value:""},locked:{type:Boolean,value:!0},confirmText:{type:String,value:"确定"},confirmColor:{type:String,value:"#3683d6"},cancelText:{type:String,value:"取消"},cancelColor:{type:String,value:"#45526b"},titleColor:String,contentColor:{type:String,value:"rgba(89,108,142,1)"},openApi:{type:Boolean,value:!0}},data:{success:null,fail:null},attached(){this.data.openApi&&this.initDialog()},pageLifetimes:{show(){this.data.openApi&&this.initDialog()}},methods:{initDialog(){wx.lin=wx.lin||{},wx.lin.showDialog=e=>{const{type:t="alert",title:o="提示",showTitle:s=!0,content:l="",locked:a=!0,confirmText:i="确定",contentColor:n="rgba(89,108,142,1)",cancelColor:c="#45526b",cancelText:r="取消",confirmColor:h="#3683d6",success:p=null,fail:u=null}=e;return this.setData({type:t,title:o,showTitle:s,content:l,locked:a,confirmText:i,cancelColor:c,cancelText:r,confirmColor:h,contentColor:n,show:!0,fail:u,success:p}),this}},onConfirmTap(){const{success:e}=this.data;e&&e({confirm:!0,cancel:!1,errMsg:"showDialog: success"}),this.setData({show:!this.data.show}),this.triggerEvent("linconfirm","confirm",{bubbles:!0,composed:!0})},onCancelTap(){const{success:e}=this.data;e&&e({confirm:!1,cancel:!0,errMsg:"showDialog: success"}),this.setData({show:!this.data.show}),this.triggerEvent("lincancel","cancel",{bubbles:!0,composed:!0})},onDialogTap(){!0!==this.data.locked&&this.setData({show:!this.data.show}),this.triggerEvent("lintap",!0,{bubbles:!0,composed:!0})}}}); \ No newline at end of file +import computeOffset from"../behaviors/computeOffset";import zIndex from"../behaviors/zIndex";import hover from"../behaviors/hover";import validator from"../behaviors/validator";Component({behaviors:[computeOffset,zIndex,hover,validator],externalClasses:["l-class","l-title-class","l-content-class","l-confirm-class","l-cancel-class","l-bg-class"],properties:{show:{type:Boolean,value:!1},type:{type:String,value:"alert",options:["alert","confirm"]},title:{type:String,value:"提示"},showTitle:{type:Boolean,value:!0},content:{type:String,value:""},locked:{type:Boolean,value:!0},confirmText:{type:String,value:"确定"},confirmColor:{type:String,value:"#3683d6"},cancelText:{type:String,value:"取消"},cancelColor:{type:String,value:"#45526b"},titleColor:String,contentColor:{type:String,value:"rgba(89,108,142,1)"},openApi:{type:Boolean,value:!0}},data:{success:null,fail:null},attached(){this.data.openApi&&this.initDialog()},pageLifetimes:{show(){this.data.openApi&&this.initDialog()}},methods:{initDialog(){wx.lin=wx.lin||{},wx.lin.showDialog=t=>{const{type:e="alert",title:o="提示",showTitle:l=!0,content:s="",locked:a=!0,confirmText:i="确定",contentColor:n="rgba(89,108,142,1)",cancelColor:c="#45526b",cancelText:r="取消",confirmColor:h="#3683d6",success:p=null,fail:m=null}=t;return this.setData({type:e,title:o,showTitle:l,content:s,locked:a,confirmText:i,cancelColor:c,cancelText:r,confirmColor:h,contentColor:n,show:!0,fail:m,success:p}),this}},onConfirmTap(){const{success:t}=this.data;t&&t({confirm:!0,cancel:!1,errMsg:"showDialog: success"}),this.setData({show:!this.data.show}),this.triggerEvent("linconfirm","confirm",{bubbles:!0,composed:!0})},onCancelTap(){const{success:t}=this.data;t&&t({confirm:!1,cancel:!0,errMsg:"showDialog: success"}),this.setData({show:!this.data.show}),this.triggerEvent("lincancel","cancel",{bubbles:!0,composed:!0})},onDialogTap(){!0!==this.data.locked&&this.setData({show:!this.data.show}),this.triggerEvent("lintap",!0,{bubbles:!0,composed:!0})}}}); \ No newline at end of file diff --git a/dist/image-picker/index.js b/dist/image-picker/index.js index ed0ae043..ad89ec8f 100644 --- a/dist/image-picker/index.js +++ b/dist/image-picker/index.js @@ -1 +1 @@ -Component({externalClasses:["l-class","l-item-class"],behaviors:["wx://form-field"],properties:{urls:{type:Array,value:[]},count:{type:[String,Number],value:9},clear:{type:Boolean,value:!1,observer:function(e){e&&this.handleClear()}},size:{type:[String,Number],value:3},sizeType:{type:String,value:"original"},mode:{type:String,value:"aspectFit"},custom:{type:Boolean,value:!1},preview:{type:Boolean,value:!0},maxImageSize:{type:Number,value:1e7}},data:{showBtn:!0,tempFilePath:""},lifetimes:{attached:function(){const e=this.judgeNewOrOld();this.setData({newOrOld:e}),"old"==e&&console.warn("image-picker组件已经升级，建议使用最新版本，当前用法会在后续版本中暂停支持")}},methods:{handleClear(){let e=this.data.urls;this.setData({urls:[],clear:!1,showBtn:!0});let t={all:e,current:e};this.triggerEvent("linclear",t,{})},onPreviewTap(e){const t=e.currentTarget.dataset.index,a=this.data.urls;let l="",r=[];if("old"==this.data.newOrOld)l=this.data.urls[t],r=this.data.urls;else{l=this.data.urls[t].url;for(let e=0;ee.data.maxImageSize?l[a].overSize=!0:l[a].overSize=!1;const r=e.data.urls.concat(l);r.length===parseInt(e.data.count)&&e.setData({showBtn:!1}),e.setData({urls:r,value:r,tempFilePath:l});let s={current:l,all:r},i={};e.triggerEvent("linchange",s,i),e.triggerEvent("linpush",s,i);let n=[];for(let e=0;e0){let t={current:l,all:r,overSizeList:n};e.triggerEvent("linoversize",t,i)}}})},onDelTap(e){const t=e.currentTarget.dataset.index,a=this.data.urls,l=a[t],r=this.handleSplice(a,l);r.lengthe.filter(e=>e!==t),judgeNewOrOld:function(){const e=this.data.urls;return 0!=e.length&&"object"!=typeof e[0]?"old":"new"}}}); \ No newline at end of file +import validator from"../behaviors/validator";Component({externalClasses:["l-class","l-item-class"],behaviors:["wx://form-field",validator],properties:{urls:{type:Array,value:[]},count:{type:[String,Number],value:9},clear:{type:Boolean,value:!1,observer:function(e){e&&this.handleClear()}},size:{type:[String,Number],value:3,options:[3,4,"3","4"]},sizeType:{type:String,value:"original",options:["original","compressed"]},mode:{type:String,value:"aspectFit",options:["scaleToFill","aspectFit","aspectFill","widthFix","top","bottom","center","left","right","top left","top right","bottom left","bottom right"]},custom:{type:Boolean,value:!1},preview:{type:Boolean,value:!0},maxImageSize:{type:Number,value:1e7}},data:{showBtn:!0,tempFilePath:""},lifetimes:{attached:function(){const e=this.judgeNewOrOld();this.setData({newOrOld:e}),"old"==e&&console.warn("image-picker组件已经升级，建议使用最新版本，当前用法会在后续版本中暂停支持")}},methods:{handleClear(){let e=this.data.urls;this.setData({urls:[],clear:!1,showBtn:!0});let t={all:e,current:e};this.triggerEvent("linclear",t,{})},onPreviewTap(e){const t=e.currentTarget.dataset.index,a=this.data.urls;let l="",i=[];if("old"==this.data.newOrOld)l=this.data.urls[t],i=this.data.urls;else{l=this.data.urls[t].url;for(let e=0;ee.data.maxImageSize?l[a].overSize=!0:l[a].overSize=!1;const i=e.data.urls.concat(l);i.length===parseInt(e.data.count)&&e.setData({showBtn:!1}),e.setData({urls:i,value:i,tempFilePath:l});let r={current:l,all:i},s={};e.triggerEvent("linchange",r,s),e.triggerEvent("linpush",r,s);let n=[];for(let e=0;e0){let t={current:l,all:i,overSizeList:n};e.triggerEvent("linoversize",t,s)}}})},onDelTap(e){const t=e.currentTarget.dataset.index,a=this.data.urls,l=a[t],i=this.handleSplice(a,l);i.lengthe.filter(e=>e!==t),judgeNewOrOld:function(){const e=this.data.urls;return 0!=e.length&&"object"!=typeof e[0]?"old":"new"}}}); \ No newline at end of file diff --git a/dist/input/index.js b/dist/input/index.js index 7033edc0..212ad0e8 100644 --- a/dist/input/index.js +++ b/dist/input/index.js @@ -1 +1 @@ -import eventBus from"../utils/eventBus.js";Component({options:{multipleSlots:!0},behaviors:["wx://form-field"],externalClasses:["l-class","l-label-class","l-error-text","l-error-text-class"],properties:{label:{type:String,value:""},hideLabel:{type:Boolean,value:!1},labelCustom:{type:Boolean,value:!1},showRow:{type:Boolean,value:!0},required:{type:Boolean,value:!1},placeholder:{type:String,value:""},type:{type:String,value:"text"},value:{type:String,value:""},colon:{type:Boolean,value:!1},focus:{type:Boolean,value:!1},clear:{type:Boolean,value:!1},maxlength:{type:Number,value:140},width:{type:Number,value:750},labelWidth:{type:Number,value:200},labelLayout:{type:String,value:"left"},disabled:{type:Boolean,value:!1},placeholderStyle:{type:String,value:""}},data:{},attached(){},methods:{handleInputChange(e){const{detail:t={}}=e,{value:l=""}=t;this.setData({value:l}),eventBus.emit(`lin-form-change-${this.id}`,this.id),this.triggerEvent("lininput",e.detail)},handleInputFocus(e){this.triggerEvent("linfocus",e.detail)},handleInputBlur(e){eventBus.emit(`lin-form-blur-${this.id}`,this.id),this.triggerEvent("linblur",e.detail)},handleInputConfirm(e){const{detail:t={}}=e,{value:l=""}=t;this.setData({value:l}),this.triggerEvent("linconfirm",e.detail)},onClearTap(e){this.setData({value:""}),this.triggerEvent("linclear",e.detail)},getValues(){return this.data.value},reset(){this.setData({value:""})}}}); \ No newline at end of file +import eventBus from"../utils/eventBus.js";import validator from"../behaviors/validator";Component({options:{multipleSlots:!0},behaviors:["wx://form-field",validator],externalClasses:["l-class","l-label-class","l-error-text","l-error-text-class"],properties:{label:String,hideLabel:Boolean,labelCustom:Boolean,showRow:{type:Boolean,value:!0},required:Boolean,placeholder:String,type:{type:String,value:"text",options:["text","idcard","digit","password","number"]},value:String,colon:Boolean,focus:Boolean,clear:Boolean,maxlength:{type:Number,value:140},width:{type:Number,value:750},labelWidth:{type:Number,value:200},labelLayout:{type:String,value:"left",options:["left","right"]},disabled:Boolean,placeholderStyle:String},data:{},attached(){},methods:{handleInputChange(e){const{detail:t={}}=e,{value:l=""}=t;this.setData({value:l}),eventBus.emit(`lin-form-change-${this.id}`,this.id),this.triggerEvent("lininput",e.detail)},handleInputFocus(e){this.triggerEvent("linfocus",e.detail)},handleInputBlur(e){eventBus.emit(`lin-form-blur-${this.id}`,this.id),this.triggerEvent("linblur",e.detail)},handleInputConfirm(e){const{detail:t={}}=e,{value:l=""}=t;this.setData({value:l}),this.triggerEvent("linconfirm",e.detail)},onClearTap(e){this.setData({value:""}),this.triggerEvent("linclear",e.detail)},getValues(){return this.data.value},reset(){this.setData({value:""})}}}); \ No newline at end of file diff --git a/dist/loading/index.js b/dist/loading/index.js index 9a29f5fe..520dd88a 100644 --- a/dist/loading/index.js +++ b/dist/loading/index.js @@ -1 +1 @@ -import computeOffset from"../behaviors/computeOffset";Component({behaviors:[computeOffset],externalClasses:["l-container-class","l-class"],properties:{show:{type:Boolean,value:!1},opacity:{type:String,value:"1"},bgColor:String,zIndex:{type:String,value:"776"},type:{type:String,value:"rotate"},color:{type:String,value:""},size:{type:String,value:"medium"},custom:Boolean,fullScreen:Boolean},attached(){this._init()},pageLifetimes:{show(){this._init()}},methods:{_init(){wx.lin=wx.lin||{},wx.lin.showLoading=e=>{const{custom:t=!1,fullScreen:o=!1,color:i="",type:s="rotate",size:a="medium",opacity:l="1"}={...e};this.setData({custom:t,fullScreen:o,color:i,type:s,size:a,opacity:l,show:!0})},wx.lin.hideLoading=()=>{this.setData({show:!1})}},doNothingMove(){}}}); \ No newline at end of file +import computeOffset from"../behaviors/computeOffset";import validator from"../behaviors/validator";Component({behaviors:[computeOffset,validator],externalClasses:["l-container-class","l-class"],properties:{show:{type:Boolean,value:!1},opacity:{type:String,value:"1"},bgColor:String,zIndex:{type:String,value:"776"},type:{type:String,value:"rotate",options:["flash","flip","change","rotate","circle"]},color:{type:String,value:""},size:{type:String,value:"medium"},custom:Boolean,fullScreen:Boolean},attached(){this._init()},pageLifetimes:{show(){this._init()}},methods:{_init(){wx.lin=wx.lin||{},wx.lin.showLoading=e=>{const{custom:t=!1,fullScreen:o=!1,color:i="",type:a="rotate",size:s="medium",opacity:l="1"}={...e};this.setData({custom:t,fullScreen:o,color:i,type:a,size:s,opacity:l,show:!0})},wx.lin.hideLoading=()=>{this.setData({show:!1})}},doNothingMove(){}}}); \ No newline at end of file diff --git a/dist/loadmore/index.js b/dist/loadmore/index.js index 172e8cab..7f114a34 100644 --- a/dist/loadmore/index.js +++ b/dist/loadmore/index.js @@ -1 +1 @@ -Component({externalClasses:["l-class","l-loading-class","l-end-class","l-line-class"],options:{multipleSlots:!0},properties:{show:Boolean,custom:Boolean,line:Boolean,color:String,size:{type:String,value:"28"},type:{type:String,value:"loading"},endText:{type:String,value:"我是有底线的~"},loadingText:{type:String,value:"加载中..."}},data:{},attached(){this._init()},pageLifetimes:{show(){this._init()}},methods:{_init(){wx.lin=wx.lin||{},wx.lin.showLoadmore=e=>{const{custom:t=!1,line:o=!1,color:i="",size:l="28",type:n="loading",endText:s="我是有底线的",loadingText:a="加载中..."}={...e};this.setData({custom:t,line:o,color:i,size:l,type:n,endText:s,loadingText:a,show:!0})},wx.lin.hideLoadmore=()=>{this.setData({show:!1})}},onLoadmore(){this.triggerEvent("lintap",{},{bubbles:!0,composed:!0})}}}); \ No newline at end of file +import validator from"../behaviors/validator";Component({externalClasses:["l-class","l-loading-class","l-end-class","l-line-class"],options:{multipleSlots:!0},bahaviors:[validator],properties:{show:Boolean,custom:Boolean,line:Boolean,color:String,size:{type:String,value:"28"},type:{type:String,value:"loading",options:["loading","end"]},endText:{type:String,value:"我是有底线的~"},loadingText:{type:String,value:"加载中..."}},data:{},attached(){this._init()},pageLifetimes:{show(){this._init()}},methods:{_init(){wx.lin=wx.lin||{},wx.lin.showLoadmore=e=>{const{custom:o=!1,line:t=!1,color:i="",size:l="28",type:a="loading",endText:n="我是有底线的",loadingText:s="加载中..."}={...e};this.setData({custom:o,line:t,color:i,size:l,type:a,endText:n,loadingText:s,show:!0})},wx.lin.hideLoadmore=()=>{this.setData({show:!1})}},onLoadmore(){this.triggerEvent("lintap",{},{bubbles:!0,composed:!0})}}}); \ No newline at end of file diff --git a/dist/message/index.js b/dist/message/index.js index d3de9bbe..928fc65a 100644 --- a/dist/message/index.js +++ b/dist/message/index.js @@ -1 +1 @@ -import zIndex from"../behaviors/zIndex";import watchShow from"../behaviors/watchShow";Component({behaviors:[zIndex,watchShow],externalClasses:["l-class","l-image-class"],properties:{show:Boolean,icon:String,iconColor:{type:String,value:"#fff"},iconSize:{type:String,value:"28"},image:String,content:String,type:{type:String,value:"primary"},duration:{type:Number,value:1500},openApi:{type:Boolean,value:!0}},data:{status:!1},observers:{icon:function(){}},attached(){this.initMessage()},pageLifetimes:{show(){this.initMessage()}},methods:{initMessage(){wx.lin=wx.lin||{},wx.lin.showMessage=(e={})=>{const{content:t="",icon:i="",image:s="",type:a="primary",duration:n=1500,success:o=null}=e;return this.data.success=o,this.setData({content:t,icon:i,image:s,duration:n,type:a}),this.changeStatus(),this},wx.lin.hideMessage=()=>{this.setData({status:!1})}}}}); \ No newline at end of file +import zIndex from"../behaviors/zIndex";import watchShow from"../behaviors/watchShow";import validator from"../behaviors/validator";Component({behaviors:[zIndex,watchShow,validator],externalClasses:["l-class","l-image-class"],properties:{show:Boolean,icon:String,iconColor:{type:String,value:"#fff"},iconSize:{type:String,value:"28"},image:String,content:String,type:{type:String,value:"primary",options:["primary","warning","success","error"]},duration:{type:Number,value:1500},openApi:{type:Boolean,value:!0}},data:{status:!1},observers:{icon:function(){}},attached(){this.initMessage()},pageLifetimes:{show(){this.initMessage()}},methods:{initMessage(){wx.lin=wx.lin||{},wx.lin.showMessage=(t={})=>{const{content:e="",icon:i="",image:a="",type:s="primary",duration:o=1500,success:n=null}=t;return this.data.success=n,this.setData({content:e,icon:i,image:a,duration:o,type:s}),this.changeStatus(),this},wx.lin.hideMessage=()=>{this.setData({status:!1})}}}}); \ No newline at end of file diff --git a/dist/popup/index.js b/dist/popup/index.js index 4fd6947b..4ca53ba6 100644 --- a/dist/popup/index.js +++ b/dist/popup/index.js @@ -1 +1 @@ -import zIndex from"../behaviors/zIndex";Component({behaviors:[zIndex],externalClasses:["l-bg-class"],properties:{show:{type:Boolean,value:!1},animation:{type:Boolean,value:!0},contentAlign:{type:String,value:"center"},locked:{type:Boolean,value:!1}},attached(){this._init()},pageLifetimes:{show(){this._init()}},data:{status:"show"},methods:{_init(){wx.lin=wx.lin||{},wx.lin.showPopup=t=>{const{zIndex:e=99,animation:s=!0,contentAlign:o="center",locked:a=!1}={...t};this.setData({zIndex:e,animation:s,contentAlign:o,locked:a,show:!0})},wx.lin.hidePopup=()=>{this.setData({status:"hide"}),setTimeout(()=>{this.setData({show:!1})},300)}},doNothingMove(){},doNothingTap(){},onPupopTap(){!0!==this.data.locked&&(this.data.show?(this.setData({status:"hide"}),setTimeout(()=>{this.setData({show:!1,status:"show"})},300)):this.setData({show:!0,status:"show"})),this.triggerEvent("lintap",!0,{bubbles:!0,composed:!0})}}}); \ No newline at end of file +import zIndex from"../behaviors/zIndex";import validator from"../behaviors/validator";Component({behaviors:[zIndex,validator],externalClasses:["l-bg-class"],properties:{show:{type:Boolean,value:!1},animation:{type:Boolean,value:!0},contentAlign:{type:String,value:"center",options:["top","right","left","bottom","center"]},locked:{type:Boolean,value:!1}},attached(){this._init()},pageLifetimes:{show(){this._init()}},data:{status:"show"},methods:{_init(){wx.lin=wx.lin||{},wx.lin.showPopup=t=>{const{zIndex:e=99,animation:o=!0,contentAlign:s="center",locked:a=!1}={...t};this.setData({zIndex:e,animation:o,contentAlign:s,locked:a,show:!0})},wx.lin.hidePopup=()=>{this.setData({status:"hide"}),setTimeout(()=>{this.setData({show:!1})},300)}},doNothingMove(){},doNothingTap(){},onPupopTap(){!0!==this.data.locked&&(this.data.show?(this.setData({status:"hide"}),setTimeout(()=>{this.setData({show:!1,status:"show"})},300)):this.setData({show:!0,status:"show"})),this.triggerEvent("lintap",!0,{bubbles:!0,composed:!0})}}}); \ No newline at end of file diff --git a/dist/price/index.js b/dist/price/index.js index a82beaf9..bfba6f0b 100644 --- a/dist/price/index.js +++ b/dist/price/index.js @@ -1 +1 @@ -Component({externalClasses:["l-deleted-class","l-unit-class","l-value-class","l-class"],properties:{unit:{type:String,value:"￥"},size:{type:String,value:"28"},color:{type:String,value:"#3963BC"},bold:{type:String,value:"500"},unitColor:String,unitSize:String,unitBold:String,value:{type:String,value:"0.00"},mode:{type:String,value:"number"},valueColor:String,valueSize:String,valueBold:String,deleted:Boolean,delColor:String,reserveDigit:{type:Number,value:2},autofix:Boolean},data:{},observers:{value:function(){this.reserveNumber()}},methods:{reserveNumber(){const e=Number(this.data.value);if(!(isNaN(Number(e))||"text"===this.data.mode)&&this.data.autofix){const t=e.toFixed(this.data.reserveDigit);this.setData({result:t})}else this.setData({result:this.data.value})}}}); \ No newline at end of file +import validator from"../behaviors/validator";Component({externalClasses:["l-deleted-class","l-unit-class","l-value-class","l-class"],behaviors:[validator],properties:{unit:{type:String,value:"￥"},size:{type:String,value:"28"},color:{type:String,value:"#3963BC"},bold:{type:String,value:"500"},unitColor:String,unitSize:String,unitBold:String,value:{type:String,value:"0.00"},mode:{type:String,value:"number",options:["number","text"]},valueColor:String,valueSize:String,valueBold:String,deleted:Boolean,delColor:String,reserveDigit:{type:Number,value:2},autofix:Boolean},data:{},observers:{value:function(){this.reserveNumber()}},methods:{reserveNumber(){const e=Number(this.data.value);if(!(isNaN(Number(e))||"text"===this.data.mode)&&this.data.autofix){const t=e.toFixed(this.data.reserveDigit);this.setData({result:t})}else this.setData({result:this.data.value})}}}); \ No newline at end of file diff --git a/dist/search-bar/index.js b/dist/search-bar/index.js index 6f3c5c84..a7b6b89f 100644 --- a/dist/search-bar/index.js +++ b/dist/search-bar/index.js @@ -1 +1 @@ -Component({externalClasses:["l-class","l-container-class","l-placeholder-class","l-icon-class","l-input-class","l-cancel-class"],options:{multipleSlots:!0},properties:{confirmType:{type:String,value:"search"},placeholder:String,cancelText:{type:String,value:"取消"},address:String,custom:Boolean,value:String,type:String,icon:{type:String,value:"research"},iconColor:{type:String,value:"#bdbdbd"},iconSize:{type:String,value:"28"},bgColor:{type:String,value:"#f3f3f3"},showCancel:{type:Boolean,value:!0},shape:{type:String,value:"primary"},TextAlign:{type:String,value:"left"},adress:String,focus:Boolean,clear:{type:Boolean,value:!0},maxlength:{type:Number,value:140},disabled:{type:Boolean,value:!1},placeholderStyle:{type:String,value:""}},data:{},methods:{onCancel(){this.triggerEvent("lincancel",{},{bubbles:!0,composed:!0})},handleInputChange(e){const{detail:t={}}=e,{value:l=""}=t;this.setData({value:l}),this.triggerEvent("linchange",t)},handleInputFocus(e){this.triggerEvent("linfocus",e.detail)},handleInputBlur(e){this.triggerEvent("linblur",e.detail)},handleInputConfirm(e){const{detail:t={}}=e,{value:l=""}=t;this.setData({value:l}),this.triggerEvent("linconfirm",t)},onClearTap(e){this.setData({value:""}),this.triggerEvent("linclear",e.detail,{bubbles:!0,composed:!0})}}}); \ No newline at end of file +import validator from"../behaviors/validator";Component({externalClasses:["l-class","l-container-class","l-placeholder-class","l-icon-class","l-input-class","l-cancel-class"],bahaviors:[validator],options:{multipleSlots:!0},properties:{confirmType:{type:String,value:"search"},placeholder:String,cancelText:{type:String,value:"取消"},address:String,custom:Boolean,value:String,type:String,icon:{type:String,value:"research"},iconColor:{type:String,value:"#bdbdbd"},iconSize:{type:String,value:"28"},bgColor:{type:String,value:"#f3f3f3"},showCancel:{type:Boolean,value:!0},shape:{type:String,value:"primary",options:["circle","primary"]},textAlign:{type:String,value:"left",options:["left","right"]},adress:String,focus:Boolean,clear:{type:Boolean,value:!0},maxlength:{type:Number,value:140},disabled:Boolean,placeholderStyle:String},data:{},methods:{onCancel(){this.triggerEvent("lincancel",{},{bubbles:!0,composed:!0})},handleInputChange(e){const{detail:t={}}=e,{value:l=""}=t;this.setData({value:l}),this.triggerEvent("linchange",t)},handleInputFocus(e){this.triggerEvent("linfocus",e.detail)},handleInputBlur(e){this.triggerEvent("linblur",e.detail)},handleInputConfirm(e){const{detail:t={}}=e,{value:l=""}=t;this.setData({value:l}),this.triggerEvent("linconfirm",t)},onClearTap(e){this.setData({value:""}),this.triggerEvent("linclear",e.detail,{bubbles:!0,composed:!0})}}}); \ No newline at end of file diff --git a/dist/skeleton/index.js b/dist/skeleton/index.js index 663acf9d..4e8f0162 100644 --- a/dist/skeleton/index.js +++ b/dist/skeleton/index.js @@ -1 +1 @@ -Component({externalClasses:["l-class","l-title-class","l-avatar-class","l-row-class"],properties:{loading:{type:Boolean,value:!0},title:{type:Boolean,value:!0},paragraph:{type:Boolean,value:!0},active:{type:Boolean,value:!0},avatar:Boolean,titleWidth:String,avatarSize:String,avatarShape:{type:String,value:"circle"},rowsWidth:{type:Array,optionalTypes:[Array,String],value:"60%"},rowsHeight:{type:Array,optionalTypes:[Array,String],value:"34rpx"},rows:Number},observers:{"rows,rowsWidth,rowsHeight":function(t,a,e){this._getResult(t,a,"rowsW","100%"),this._getResult(t,e,"rowsH","34rpx"),this._toRows(t)}},data:{},methods:{_arrRepeat(t,a){const e=[];for(let r=0;rs&&(this.setData({popup:!1,x:0}),this.onCloseTap()),e>i&&!1===this.data.out||(i-e>=s?(this.setData({x:-this._slideWidth,popup:!0,close:!1}),this.onOpenTap()):i-e0&&1!=this.data.popup?(this.setData({x:0}),this.onCloseTap()):e-i>=s?(this.setData({x:0}),this.onCloseTap()):e-i0&&(this.setData({x:-this._slideWidth,close:!1}),this.onOpenTap()))},onChange(t){!this.data.out&&t.detail.x<-this._threshold?this.setData({out:!0}):this.data.out&&t.detail.x>=-this._threshold&&this.setData({out:!1})},onRightTap(){this.properties.autoClose&&(this.setData({popup:!1,x:0}),this.onCloseTap()),this.triggerEvent("lintap","click right",{bubbles:!0,composed:!0})},onOpenTap(){this.triggerEvent("slideopen",!0,{bubbles:!0,composed:!0})},onCloseTap(){this.triggerEvent("slideclose",!1,{bubbles:!0,composed:!0})}}}); \ No newline at end of file +const _windowWidth=wx.getSystemInfoSync().windowWidth;Component({options:{multipleSlots:!0},properties:{width:{type:Number,value:_windowWidth},height:{type:Number,value:100},slideWidth:{type:Number,value:0},threshold:{type:Number,value:0},disabled:{type:Boolean,value:!1},autoClose:{type:Boolean,value:!1},close:{type:Boolean,value:!1,observer:function(t){t&&(this.setData({popup:!1,x:0}),this.onCloseTap())}}},data:{viewWidth:_windowWidth,x:0,out:!1},ready(){this.updateRight()},methods:{updateRight(){const t=this;wx.createSelectorQuery().in(this).select(".right").boundingClientRect((function(e){t._slideWidth=e.width;let i=e.width<=50?e.width:50;t._threshold=t.properties.threshold?t.properties.threshold:i,t._viewWidth=t.data.width+e.width*(750/_windowWidth),t.setData({viewWidth:t._viewWidth})})).exec()},onTouchStart(t){this._startX=t.changedTouches[0].pageX},onTouchEnd(t){if(this.properties.disabled)return;this._endX=t.changedTouches[0].pageX,this._length=this._endX-this._startX;const{_endX:e,_startX:i,_threshold:s}=this;this._length>s&&(this.setData({popup:!1,x:0}),this.onCloseTap()),e>i&&!1===this.data.out||(i-e>=s?(this.setData({x:-this._slideWidth,popup:!0,close:!1}),this.onOpenTap()):i-e0&&1!=this.data.popup||e-i>=s?(this.setData({x:0}),this.onCloseTap()):e-i0&&(this.setData({x:-this._slideWidth,close:!1}),this.onOpenTap()))},onChange(t){!this.data.out&&t.detail.x<-this._threshold?this.setData({out:!0}):this.data.out&&t.detail.x>=-this._threshold&&this.setData({out:!1})},onRightTap(){this.properties.autoClose&&(this.setData({popup:!1,x:0}),this.onCloseTap()),this.triggerEvent("lintap","click right",{bubbles:!0,composed:!0})},onOpenTap(){this.triggerEvent("slideopen",!0,{bubbles:!0,composed:!0})},onCloseTap(){this.triggerEvent("slideclose",!1,{bubbles:!0,composed:!0})}}}); \ No newline at end of file diff --git a/dist/status-show/index.js b/dist/status-show/index.js index 507bacf8..a2f56243 100644 --- a/dist/status-show/index.js +++ b/dist/status-show/index.js @@ -1 +1 @@ -Component({externalClasses:["l-class","l-image-class","l-button-class","l-describe-class"],properties:{show:Boolean,type:{type:String,value:"success",observer:"_changeStatus"},image:String,describe:String,buttonText:String,bgColor:{type:String,value:"#fff"},fullScreen:{type:Boolean,value:!0},openApi:{type:Boolean,value:!0},custom:{type:Boolean,value:!1}},data:{},attached(){this._changeStatus(),this.data.openApi&&this._init()},pageLifetimes:{show(){this._init()}},methods:{_init(){wx.lin=wx.lin||{},wx.lin.showStatusShow=e=>{const{type:t="success",image:a="",describe:s="",buttonText:i="",bgColor:r="#fff",fullScreen:p=!0}={...e};this.setData({show:!0,type:t,image:a,describe:s,buttonText:i,bgColor:r,fullScreen:p})},wx.lin.hideStatusShow=()=>{this.setData({show:!1})}},_changeStatus(){switch(this.properties.type){case"success":this.setData({typeImage:"image/success.png",typeText:"操作成功~"});break;case"error":this.setData({typeImage:"image/error.png",typeText:"操作失败~"});break;case"cart":this.setData({typeImage:"image/cart.png",typeText:"购物车空空如也，去逛逛吧~"});break;case"order":this.setData({typeImage:"image/order.png",typeText:"您暂时还没有订单哦~"});break;case"network":this.setData({typeImage:"image/network.png",typeText:"糟糕！网络错误~"});break;case"address":this.setData({typeImage:"image/address.png",typeText:"您暂时还没有地址哦~"});break;case"product":this.setData({typeImage:"image/product.png",typeText:"暂时还没有商品哦~~"});break;case"data":this.setData({typeImage:"image/data.png",typeText:"暂时还没有相关数据哦~~"})}},tapStatusShow(){this.triggerEvent("lincorvertap",{},{bubbles:!0,composed:!0})}}}); \ No newline at end of file +Component({externalClasses:["l-class","l-image-class","l-button-class","l-describe-class"],properties:{show:Boolean,type:{type:String,value:"success",observer:"_changeStatus"},image:String,describe:String,buttonText:String,bgColor:{type:String,value:"#fff"},fullScreen:{type:Boolean,value:!0},openApi:{type:Boolean,value:!0},custom:{type:Boolean,value:!1}},data:{},attached(){this._changeStatus(),this.data.openApi&&this._init()},pageLifetimes:{show(){this._init()}},methods:{_init(){wx.lin=wx.lin||{},wx.lin.showStatusShow=e=>{const{type:t="success",image:a="",describe:s="",buttonText:i="",bgColor:r="#fff",fullScreen:o=!0}={...e};this.setData({show:!0,type:t,image:a,describe:s,buttonText:i,bgColor:r,fullScreen:o})},wx.lin.hideStatusShow=()=>{this.setData({show:!1})}},_changeStatus(){switch(this.properties.type){case"success":this.setData({typeImage:"image/success.png",typeText:"操作成功~"});break;case"error":this.setData({typeImage:"image/error.png",typeText:"操作失败~"});break;case"cart":this.setData({typeImage:"image/cart.png",typeText:"购物车空空如也，去逛逛吧~"});break;case"order":this.setData({typeImage:"image/order.png",typeText:"您暂时还没有订单哦~"});break;case"network":this.setData({typeImage:"image/network.png",typeText:"糟糕！网络错误~"});break;case"address":this.setData({typeImage:"image/address.png",typeText:"您暂时还没有地址哦~"});break;case"product":this.setData({typeImage:"image/product.png",typeText:"暂时还没有商品哦~~"});break;case"data":this.setData({typeImage:"image/data.png",typeText:"暂时还没有相关数据哦~~"});break;default:console.warn(`${this.data.type} is not a valid value`)}},tapStatusShow(){this.triggerEvent("lincorvertap",{},{bubbles:!0,composed:!0})}}}); \ No newline at end of file diff --git a/dist/steps/index.js b/dist/steps/index.js index b429edb6..b51d135c 100755 --- a/dist/steps/index.js +++ b/dist/steps/index.js @@ -1 +1 @@ -Component({externalClasses:["l-class"],options:{multipleSlots:!0},relations:{"../step/index":{type:"child",linked(){this._initSteps()},unlinked(){this._initSteps()}}},properties:{direction:{type:String,value:"row"},activeIndex:{type:Number,value:0},color:String,stepMinHeight:{type:String,value:"120"},status:{type:String,value:"process"},dot:Boolean},observers:{activeIndex:function(){this._initSteps()}},data:{},methods:{_initSteps(){wx.createSelectorQuery().in(this).select(".steps-container").boundingClientRect().exec(t=>{let e=this.getRelationNodes("../step/index");this.data.length=e.length,this.data.length>0&&e.forEach((e,i)=>{e.updateDataChange({index:i,...this.data,stepsWidth:t[0].width})})})}}}); \ No newline at end of file +import validator from"../behaviors/validator";Component({externalClasses:["l-class"],behaviors:[validator],options:{multipleSlots:!0},relations:{"../step/index":{type:"child",linked(){this._initSteps()},unlinked(){this._initSteps()}}},properties:{direction:{type:String,value:"row",options:["row","colunm"]},activeIndex:{type:Number,value:0},color:String,stepMinHeight:{type:String,value:"120"},status:{type:String,value:"process",options:["process","error"]},dot:Boolean},observers:{activeIndex:function(){this._initSteps()}},data:{},methods:{_initSteps(){wx.createSelectorQuery().in(this).select(".steps-container").boundingClientRect().exec(t=>{let e=this.getRelationNodes("../step/index");this.data.length=e.length,this.data.length>0&&e.forEach((e,i)=>{e.updateDataChange({index:i,...this.data,stepsWidth:t[0].width})})})}}}); \ No newline at end of file diff --git a/dist/sticky-item/index.js b/dist/sticky-item/index.js new file mode 100644 index 00000000..e6c99f30 --- /dev/null +++ b/dist/sticky-item/index.js @@ -0,0 +1 @@ +Component({externalClasses:["l-class","l-header-wrapper-class","l-header-class","l-header-sticky-class","l-body-class"],options:{multipleSlots:!0},relations:{"../sticky/index":{type:"parent"}},properties:{top:{type:Number,value:0}},data:{mode:void 0,index:void 0,isFixedTop:!1,stickyItemTop:0,stickyItemHeight:0,stickyItemWrapperHeight:void 0},lifetimes:{ready:function(){const t=this.getParentComponet().data.mode;this.setData({mode:t})}},methods:{updateStickyItemPosition(t){const e=this.getParentComponet(),{index:i,stickyItemTop:s,stickyItemHeight:a,top:o}=this.data,n=t>s-o&&t{this.setData({stickyItemTop:t.top+e,stickyItemHeight:t.height})}).exec(),i.select(".l-sticky-item-header").boundingClientRect(t=>{this.setData({stickyItemWrapperHeight:t.height})}).exec()},getParentComponet(){const t=this.getRelationNodes("../sticky/index");if(0!==t.length)return t[0]}}}); \ No newline at end of file diff --git a/dist/sticky-item/index.json b/dist/sticky-item/index.json new file mode 100644 index 00000000..e8cfaaf8 --- /dev/null +++ b/dist/sticky-item/index.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/dist/sticky-item/index.wxml b/dist/sticky-item/index.wxml new file mode 100644 index 00000000..20c58bd1 --- /dev/null +++ b/dist/sticky-item/index.wxml @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/dist/sticky-item/index.wxss b/dist/sticky-item/index.wxss new file mode 100644 index 00000000..94929ff2 --- /dev/null +++ b/dist/sticky-item/index.wxss @@ -0,0 +1 @@ +.l-sticky-item{display:flex;flex-direction:column}.l-sticky-wrapper{overflow:visible}.l-sticky-item-header{width:100%}.l-sticky-item-header-fixed{position:fixed;top:0}@supports (position:sticky){.l-sticky-item-header-sticky{position:sticky}} \ No newline at end of file diff --git a/dist/sticky/index.js b/dist/sticky/index.js new file mode 100644 index 00000000..8663669f --- /dev/null +++ b/dist/sticky/index.js @@ -0,0 +1 @@ +import validator from"../behaviors/validator";Component({externalClasses:["l-class"],behaviors:[validator],relations:{"../sticky-item/index":{type:"child",linked(){this.checkSupportCssSticky().then(t=>{t||this.updateStickyItemsSizeData()})},linkChanged(){this.checkSupportCssSticky().then(t=>{t||this.updateStickyItemsSizeData()})},unlinked(){this.checkSupportCssSticky().then(t=>{t||this.updateStickyItemsSizeData()})}}},properties:{mode:{type:String,value:"js",options:["js","css"]},scrollTop:Number},observers:{scrollTop:function(){this.checkSupportCssSticky().then(t=>{t||this.updateStickyItemsPosition()})}},lifetimes:{attached(){this.checkSupportCssSticky().then(t=>{t||this.initSticky()})}},methods:{initSticky(){wx.lin=wx.lin||{},wx.lin.flushSticky=()=>{this.updateStickyItemsSizeData()},wx.lin.setScrollTop=t=>{this.data.scrollTop=t,this.checkSupportCssSticky().then(t=>{t||this.updateStickyItemsPosition()})}},updateStickyItemsPosition(){const t=this.getStickyItemNodes();for(let e of t)e.updateStickyItemPosition(this.data.scrollTop)},updateStickyItemsSizeData(){this.getStickyItemNodes().forEach((t,e)=>{t.updateStickyItemBaseData(e)})},getStickyItemNodes(){return this.getRelationNodes("../sticky-item/index")},checkSupportCssSticky(){return new Promise(t=>{const e=this.getStickyItemNodes();0==e.length&&t(!1),wx.createSelectorQuery().in(e[0]).select(".l-sticky-item-header").fields({computedStyle:["position"]}).exec(e=>{null===e[0]?t(!1):t("sticky"===e[0].position)})})}}}); \ No newline at end of file diff --git a/dist/sticky/index.json b/dist/sticky/index.json new file mode 100644 index 00000000..e8cfaaf8 --- /dev/null +++ b/dist/sticky/index.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/dist/sticky/index.wxml b/dist/sticky/index.wxml new file mode 100644 index 00000000..39b9072a --- /dev/null +++ b/dist/sticky/index.wxml @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/dist/sticky/index.wxss b/dist/sticky/index.wxss new file mode 100644 index 00000000..e69de29b diff --git a/dist/tag/index.js b/dist/tag/index.js index 7e613981..187f3dd4 100644 --- a/dist/tag/index.js +++ b/dist/tag/index.js @@ -1 +1 @@ -Component({externalClasses:["l-class","l-select-class","l-image-class"],properties:{name:String,cell:Object,type:{type:String,value:"touch"},bgColor:String,fontColor:String,disable:Boolean,shape:{type:String,value:"square"},select:Boolean,plain:Boolean,size:{type:String,value:"medium"},location:{type:String,value:"left"},icon:String,iconSize:{type:String,value:"20"},iconColor:{type:String,value:"#3683D6"},image:String,iconStyle:{type:String,value:"size:20;color:#3683D6"},height:Number},methods:{handleTap(){if(this.properties.disabled)return!1;let e={name:this.properties.name,cell:this.properties.cell,select:this.properties.select};this.triggerEvent("lintap",e,{bubbles:!0,composed:!0})}}}); \ No newline at end of file +import validator from"../behaviors/validator";Component({externalClasses:["l-class","l-select-class","l-image-class"],behaviors:[validator],properties:{name:String,cell:Object,type:{type:String,value:"touch",options:["reading","touch"]},bgColor:String,fontColor:String,disable:Boolean,shape:{type:String,value:"square",options:["square","circle"]},select:Boolean,plain:Boolean,size:{type:String,value:"medium",options:["large","medium","mini","super-mini"]},location:{type:String,value:"left",options:["left","right"]},icon:String,iconSize:{type:String,value:"20"},iconColor:{type:String,value:"#3683D6"},image:String,iconStyle:{type:String,value:"size:20;color:#3683D6"},height:Number},methods:{handleTap(){if(this.properties.disabled)return!1;let e={name:this.properties.name,cell:this.properties.cell,select:this.properties.select};this.triggerEvent("lintap",e,{bubbles:!0,composed:!0})}}}); \ No newline at end of file diff --git a/examples/app.json b/examples/app.json index 3b1cba0d..facfb971 100644 --- a/examples/app.json +++ b/examples/app.json @@ -107,7 +107,11 @@ "pages/grid/index", "pages/card/index", "pages/water-flow/index", - "pages/album/index" + "pages/album/index", + "pages/sticky/index", + "pages/sticky/pages/sticky-base/index", + "pages/sticky/pages/sticky-appoint/index", + "pages/sticky/pages/sticky-dynamic/index" ] }, { diff --git a/examples/dist/badge/index.js b/examples/dist/badge/index.js index 27775b7c..ea5d015d 100644 --- a/examples/dist/badge/index.js +++ b/examples/dist/badge/index.js @@ -1,5 +1,8 @@ +import validator from '../behaviors/validator'; + Component({ externalClasses: ['l-class', 'l-class-self', 'l-self-class'], + behaivors: [validator], properties: { // 红点模式 dot: { @@ -8,7 +11,8 @@ Component({ }, shape: { type: String, - value: 'horn' + value: 'horn', + options: ['horn', 'circle'] }, value: { type: String, @@ -16,7 +20,8 @@ Component({ }, mode: { type: String, - value: 'number' + value: 'number', + options: ['number', 'text'] }, // 数字最大值 maxCount: { @@ -26,7 +31,8 @@ Component({ // 数字形式 numberType: { type: String, - value: 'overflow' + value: 'overflow', + options: ['overflow', 'limit', 'ellipsis'] }, show: { type: Boolean, diff --git a/examples/dist/behaviors/rules.js b/examples/dist/behaviors/rules.js index b951893e..e64244f0 100644 --- a/examples/dist/behaviors/rules.js +++ b/examples/dist/behaviors/rules.js @@ -1,19 +1,21 @@ import Schema from '../common/async-validator/index'; +import validator from '../behaviors/validator'; /** * @param tipType String [toast , message , text] */ // eslint-disable-next-line no-undef export default Behavior({ - behaviors: [], + behaviors: [validator], properties: { // 校验 rules: { - type: [Object,Array], + type: [Object, Array], value: [] }, tipType: { type: String, - value:'toast' + value: 'toast', + options: ['toast', 'message', 'text'] } }, data: { diff --git a/examples/dist/behaviors/validator.js b/examples/dist/behaviors/validator.js new file mode 100644 index 00000000..92ff671f --- /dev/null +++ b/examples/dist/behaviors/validator.js @@ -0,0 +1,21 @@ +// eslint-disable-next-line no-undef +export default Behavior({ + definitionFilter(defFields) { + const { + properties + } = defFields; + const propsKey = Object.keys(properties); + propsKey.forEach(name => { + const { + options + } = properties[name]; + if (options) { + properties[name].observer = function (newValue) { + if (!options.includes(newValue)) { + console.error(`${name}: ${newValue} must be in the [${options}]`); + } + }; + } + }); + } +}); \ No newline at end of file diff --git a/examples/dist/button/index.js b/examples/dist/button/index.js index 8a9a7796..e5e45aa4 100644 --- a/examples/dist/button/index.js +++ b/examples/dist/button/index.js @@ -1,11 +1,14 @@ +import validator from '../behaviors/validator'; + Component({ externalClasses: [ - 'l-class', + 'l-class', 'l-label-class', - 'l-hover-class', + 'l-hover-class', 'l-img-class', 'l-icon-class' ], + behaviors: [validator], properties: { // button组建标识 name: { @@ -15,15 +18,18 @@ Component({ type: { type: String, value: 'default', + options: ['warning', 'success', 'error', 'default'] }, plain: Boolean, size: { type: String, value: 'medium', + options: ['medium', 'large', 'mini', 'long'] }, shape: { type: String, value: 'circle', + options: ['square', 'circle', 'semicircle'] }, disabled: { type: Boolean, diff --git a/examples/dist/card/index.js b/examples/dist/card/index.js index a1ad9aff..b9e589ae 100644 --- a/examples/dist/card/index.js +++ b/examples/dist/card/index.js @@ -1,24 +1,29 @@ +import validator from '../behaviors/validator'; + Component({ /** * 组件的属性列表 */ - externalClasses: ['l-class', 'l-img-class','l-title-class'], + externalClasses: ['l-class', 'l-img-class', 'l-title-class'], options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, + bahaviors: [validator], properties: { image: String, title: String, describe: String, plaintext: Boolean, full: Boolean, - position:{ - type:String, - value:'left' + position: { + type: String, + value: 'left', + options: ['left', 'right'] }, type: { type: String, - value: 'primary' + value: 'primary', + options: ['primary', 'avatar'] }, imageMode: { type: String, diff --git a/examples/dist/counter/index.js b/examples/dist/counter/index.js index 99bc9ab7..6a3a6b7d 100644 --- a/examples/dist/counter/index.js +++ b/examples/dist/counter/index.js @@ -1,7 +1,7 @@ import hover from '../behaviors/hover'; Component({ - behaviors:[hover], + behaviors: [hover], externalClasses: [ 'l-class', 'l-symbol-class', diff --git a/examples/dist/dialog/index.js b/examples/dist/dialog/index.js index d7a5a632..bbcd138b 100644 --- a/examples/dist/dialog/index.js +++ b/examples/dist/dialog/index.js @@ -1,12 +1,12 @@ import computeOffset from '../behaviors/computeOffset'; import zIndex from '../behaviors/zIndex'; import hover from '../behaviors/hover'; - +import validator from '../behaviors/validator'; Component({ /** * 组件的属性列表 */ - behaviors: [computeOffset,zIndex,hover], + behaviors: [computeOffset, zIndex, hover, validator], externalClasses: ['l-class', 'l-title-class', 'l-content-class', 'l-confirm-class', 'l-cancel-class', 'l-bg-class'], properties: { // 显示与隐藏 @@ -17,7 +17,8 @@ Component({ // 类型 【 alert: 提示框， confrim: 确认框 】 type: { type: String, - value: 'alert' + value: 'alert', + options: ['alert', 'confirm'] }, // 标题文字 title: { @@ -184,4 +185,4 @@ Component({ this.triggerEvent('lintap', detail, option); } } -}); \ No newline at end of file +}); diff --git a/examples/dist/image-picker/index.js b/examples/dist/image-picker/index.js index 63d22f5f..8487b3df 100644 --- a/examples/dist/image-picker/index.js +++ b/examples/dist/image-picker/index.js @@ -1,10 +1,11 @@ -// mask +import validator from '../behaviors/validator'; + Component({ /** * 组件的属性列表 */ externalClasses: ['l-class', 'l-item-class'], - behaviors: ['wx://form-field'], + behaviors: ['wx://form-field', validator], properties: { urls: { type: Array, @@ -28,17 +29,20 @@ Component({ // 每行可显示的个数 size: { type: [String, Number], - value: 3 + value: 3, + options: [3, 4, '3', '4'] }, // 所选的图片的尺寸 ['original', 'compressed'] sizeType: { type: String, value: 'original', + options: ['original', 'compressed'] }, // 图片裁剪、缩放的模式 mode: { type: String, value: 'aspectFit', // 参考微信小程序 image 组件的mode属性列表 + options: ['scaleToFill', 'aspectFit', 'aspectFill', 'widthFix', 'top', 'bottom', 'center', 'left', 'right', 'top left', 'top right', 'bottom left', 'bottom right'] }, // 设置是否传入slot custom: { @@ -166,7 +170,7 @@ Component({ } } const newtempFilePaths = that.data.urls.concat(tempFilePath); - // 判断是否还能继续添加图片 + // 判断是否还能继续添加图片 if (newtempFilePaths.length === parseInt(that.data.count)) { that.setData({ showBtn: false @@ -213,7 +217,7 @@ Component({ const urls = this.data.urls; const tempFilePath = urls[index]; const tempFilePaths = this.handleSplice(urls, tempFilePath); - // 判断是否还能继续添加图片 + // 判断是否还能继续添加图片 if (tempFilePaths.length < parseInt(this.data.count)) { this.setData({ showBtn: true @@ -251,4 +255,4 @@ Component({ } }, -}); \ No newline at end of file +}); diff --git a/examples/dist/input/index.js b/examples/dist/input/index.js index aa4d2f7d..fab009b3 100644 --- a/examples/dist/input/index.js +++ b/examples/dist/input/index.js @@ -1,7 +1,6 @@ // input/input.js -// import rules from '../behaviors/rules'; import eventBus from '../utils/eventBus.js'; - +import validator from '../behaviors/validator'; Component({ /** * 组件的属性列表 @@ -9,65 +8,38 @@ Component({ options: { multipleSlots: true, }, - behaviors: ['wx://form-field'], - // behaviors: ['wx://form-field', rules], - externalClasses: ['l-class', 'l-label-class','l-error-text','l-error-text-class'], + behaviors: ['wx://form-field', validator], + externalClasses: ['l-class', 'l-label-class', 'l-error-text', 'l-error-text-class'], properties: { // 表单标题（label）的文本 - label: { - type: String, - value: '' - }, + label: String, // 是否隐藏label - hideLabel:{ - type: Boolean, - value: false - }, + hideLabel: Boolean, // 是否自定义label部分 - labelCustom: { - type: Boolean, - value: false - }, + labelCustom: Boolean, // 是否显示下划线 showRow: { type: Boolean, value: true }, // 是否必选 - required: { - type: Boolean, - value: false - }, + required: Boolean, // 占位文本 - placeholder: { - type: String, - value: '' - }, + placeholder: String, // 输入框类型 type: { type: String, - value: 'text' + value: 'text', + options: ['text', 'idcard', 'digit', 'password', 'number'] }, // 输入框的值 - value: { - type: String, - value: '' - }, + value: String, // 是否需要冒号 - colon: { - type: Boolean, - value: false - }, + colon: Boolean, // 获取焦点 - focus: { - type: Boolean, - value: false - }, + focus: Boolean, // 是否显示清除按钮 - clear: { - type: Boolean, - value: false - }, + clear: Boolean, // 最大输入长度 maxlength: { type: Number, @@ -86,18 +58,13 @@ Component({ // label标题的显示位置 left top right labelLayout: { type: String, - value: 'left' + value: 'left', + options: ['left', 'right'] }, // 是否禁用 - disabled: { - type: Boolean, - value: false - }, + disabled: Boolean, // 占位文字的样式 - placeholderStyle: { - type: String, - value: '' - }, + placeholderStyle: String, }, /** @@ -125,7 +92,7 @@ Component({ this.setData({ value }); - eventBus.emit(`lin-form-change-${this.id}`,this.id); + eventBus.emit(`lin-form-change-${this.id}`, this.id); this.triggerEvent('lininput', event.detail); }, @@ -137,7 +104,7 @@ Component({ // this.validatorData({ // value: event.detail.value // }); - eventBus.emit(`lin-form-blur-${this.id}`,this.id); + eventBus.emit(`lin-form-blur-${this.id}`, this.id); this.triggerEvent('linblur', event.detail); }, handleInputConfirm(event) { diff --git a/examples/dist/loading/index.js b/examples/dist/loading/index.js index bd07dc3b..9928c79c 100644 --- a/examples/dist/loading/index.js +++ b/examples/dist/loading/index.js @@ -1,6 +1,8 @@ import computeOffset from '../behaviors/computeOffset'; +import validator from '../behaviors/validator'; + Component({ - behaviors: [computeOffset], + behaviors: [computeOffset, validator], externalClasses: ['l-container-class', 'l-class'], properties: { // 显示与隐藏 @@ -8,7 +10,7 @@ Component({ type: Boolean, value: false }, - opacity:{ + opacity: { type: String, value: '1' }, @@ -20,7 +22,8 @@ Component({ // 类型 type: { type: String, - value: 'rotate' + value: 'rotate', + options: ['flash', 'flip', 'change', 'rotate', 'circle'] }, // 动画颜色 color: { @@ -81,4 +84,4 @@ Component({ // do nothing…… }, } -}); \ No newline at end of file +}); diff --git a/examples/dist/loadmore/index.js b/examples/dist/loadmore/index.js index 157225f0..b7c0ac7b 100644 --- a/examples/dist/loadmore/index.js +++ b/examples/dist/loadmore/index.js @@ -1,8 +1,11 @@ +import validator from '../behaviors/validator'; + Component({ - externalClasses: ['l-class','l-loading-class','l-end-class','l-line-class'], + externalClasses: ['l-class', 'l-loading-class', 'l-end-class', 'l-line-class'], options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, + bahaviors: [validator], properties: { show: Boolean, custom: Boolean, @@ -14,7 +17,8 @@ Component({ }, type: { type: String, - value: 'loading' + value: 'loading', + options: ['loading', 'end'] }, endText: { type: String, diff --git a/examples/dist/message/index.js b/examples/dist/message/index.js index 1bbca434..be931e78 100644 --- a/examples/dist/message/index.js +++ b/examples/dist/message/index.js @@ -1,7 +1,9 @@ import zIndex from '../behaviors/zIndex'; import watchShow from '../behaviors/watchShow'; +import validator from '../behaviors/validator'; + Component({ - behaviors: [zIndex, watchShow], + behaviors: [zIndex, watchShow, validator], externalClasses: ['l-class', 'l-image-class'], properties: { show: Boolean, @@ -18,7 +20,8 @@ Component({ content: String, type: { type: String, - value: 'primary' + value: 'primary', + options: ['primary', 'warning', 'success', 'error'] }, duration: { type: Number, @@ -36,7 +39,7 @@ Component({ // 解决 addListener undefined 的错误 observers: { - 'icon': function () {} + 'icon': function () { } }, attached() { @@ -72,7 +75,7 @@ Component({ this.changeStatus(); return this; }; - wx.lin.hideMessage = ()=>{ + wx.lin.hideMessage = () => { this.setData({ status: false }); diff --git a/examples/dist/popup/index.js b/examples/dist/popup/index.js index 37f7e616..233b3a10 100644 --- a/examples/dist/popup/index.js +++ b/examples/dist/popup/index.js @@ -1,9 +1,11 @@ import zIndex from '../behaviors/zIndex'; +import validator from '../behaviors/validator'; + Component({ /** * 组件的属性列表 */ - behaviors: [zIndex], + behaviors: [zIndex, validator], externalClasses: ['l-bg-class'], properties: { // 显示与隐藏 @@ -19,7 +21,8 @@ Component({ // slot的位置 contentAlign: { type: String, - value: 'center' + value: 'center', + options: ['top', 'right', 'left', 'bottom', 'center'] }, // 锁定 locked: { diff --git a/examples/dist/price/index.js b/examples/dist/price/index.js index 6ceadff2..a8f8ce22 100644 --- a/examples/dist/price/index.js +++ b/examples/dist/price/index.js @@ -1,8 +1,11 @@ +import validator from '../behaviors/validator'; + Component({ /** * 组件的属性列表 */ externalClasses: ['l-deleted-class', 'l-unit-class', 'l-value-class', 'l-class'], + behaviors: [validator], properties: { unit: { type: String, @@ -29,7 +32,8 @@ Component({ }, mode: { type: String, - value: 'number' + value: 'number', + options: ['number', 'text'] }, valueColor: String, valueSize: String, diff --git a/examples/dist/search-bar/index.js b/examples/dist/search-bar/index.js index 83957571..13d21397 100644 --- a/examples/dist/search-bar/index.js +++ b/examples/dist/search-bar/index.js @@ -1,4 +1,5 @@ -// cpn/search-bar/index.js +import validator from '../behaviors/validator'; + Component({ /** * 组件的属性列表 @@ -11,6 +12,7 @@ Component({ 'l-input-class', 'l-cancel-class' ], + bahaviors: [validator], options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, @@ -50,11 +52,13 @@ Component({ }, shape: { type: String, - value: 'primary' + value: 'primary', + options: ['circle', 'primary'] }, - TextAlign: { + textAlign: { type: String, - value: 'left' + value: 'left', + options: ['left', 'right'] }, adress: String, // 获取焦点 @@ -70,15 +74,9 @@ Component({ value: 140 }, // 是否禁用 - disabled: { - type: Boolean, - value: false - }, + disabled: Boolean, // 占位文字的样式 - placeholderStyle: { - type: String, - value: '' - } + placeholderStyle: String }, /** diff --git a/examples/dist/skeleton/index.js b/examples/dist/skeleton/index.js index affc4e24..61681a9e 100644 --- a/examples/dist/skeleton/index.js +++ b/examples/dist/skeleton/index.js @@ -1,3 +1,5 @@ +import validator from '../behaviors/validator'; + Component({ /** * 组件的属性列表 @@ -8,6 +10,7 @@ Component({ 'l-avatar-class', 'l-row-class' ], + behaviors: [validator], properties: { loading: { type: Boolean, @@ -30,7 +33,8 @@ Component({ avatarSize: String, avatarShape: { type: String, - value: 'circle' + value: 'circle', + options: ['circle', 'square'] }, rowsWidth: { type: Array, diff --git a/examples/dist/status-show/index.js b/examples/dist/status-show/index.js index 3bbe18b0..cb609d10 100644 --- a/examples/dist/status-show/index.js +++ b/examples/dist/status-show/index.js @@ -132,6 +132,10 @@ Component({ typeText: '暂时还没有相关数据哦~~' }); break; + default: + console.warn( + `${this.data.type} is not a valid value` + ); } }, diff --git a/examples/dist/steps/index.js b/examples/dist/steps/index.js index abcfc10f..ba1307ec 100755 --- a/examples/dist/steps/index.js +++ b/examples/dist/steps/index.js @@ -1,7 +1,10 @@ +import validator from '../behaviors/validator'; + Component({ externalClasses: [ 'l-class' ], + behaviors: [validator], options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, @@ -20,7 +23,8 @@ Component({ properties: { direction: { type: String, - value: 'row' + value: 'row', + options: ['row', 'colunm'] }, activeIndex: { type: Number, @@ -33,7 +37,8 @@ Component({ }, status: { type: String, - value: 'process' + value: 'process', + options: ['process', 'error'] }, dot: Boolean }, diff --git a/examples/dist/sticky-item/index.js b/examples/dist/sticky-item/index.js new file mode 100644 index 00000000..c2c52128 --- /dev/null +++ b/examples/dist/sticky-item/index.js @@ -0,0 +1,140 @@ +Component({ + externalClasses: ['l-class', 'l-header-wrapper-class', 'l-header-class', 'l-header-sticky-class', 'l-body-class'], + options: { + multipleSlots: true + }, + + relations: { + '../sticky/index': { + type: 'parent' + } + }, + + properties: { + /** + * 吸顶容器吸顶后距离视窗 顶部的距离 + */ + top: { + type: Number, + value: 0 + } + }, + + data: { + /** + * 显示模式 + */ + mode: undefined, + /** + * 当前sticky-item的索引值 + */ + index: undefined, + + /** + * sticky-item是否固定到页面顶部 + */ + isFixedTop: false, + + /** + * sticky-item组件距离页面顶部的高度 + */ + stickyItemTop: 0, + + /** + * sticky-item组件自身的高度 + */ + stickyItemHeight: 0, + + /** + * sticky-item组件包装高度 + */ + stickyItemWrapperHeight: undefined + }, + + lifetimes: { + ready: function () { + // 设置显示模式 + const parent = this.getParentComponet(); + const mode = parent.data.mode; + this.setData({mode}); + } + }, + + methods: { + + /** + * 更新sticky-item组件的position属性 + * 判断sticky-item组件是否固定到顶部 + * @param {Number} scrollTop 页面垂直滚动距离 + */ + updateStickyItemPosition(scrollTop) { + const parent = this.getParentComponet(); + const {index, stickyItemTop, stickyItemHeight, top} = this.data; + const isFixedTop = scrollTop > stickyItemTop - top && scrollTop < stickyItemHeight + stickyItemTop - top; + + // 避免频繁setData + if (this.data.isFixedTop === isFixedTop) { + return; + } + + if (isFixedTop) { + // 触发吸附事件 + parent.triggerEvent('linsticky', {index}); + } else { + // 触发脱落事件 + parent.triggerEvent('linunsticky', {index}); + } + + this.setData({isFixedTop}); + }, + + + /** + * 更新sticky-item组件的基础数据 + * @param {Number} index 当前sticky-item的索引值 + */ + updateStickyItemBaseData(index) { + // 设置索引值 + this.setData({index}); + // 从父级组件获取页面垂直滚动距离 + const parent = this.getParentComponet(); + const scrollTop = parent.data.scrollTop; + + + const query = wx.createSelectorQuery().in(this); + + /** + * 设置sticky-item组件距页面顶部的距离 + * 和sticky-item组件的高度 + */ + query + .select('.l-sticky-item') + .boundingClientRect((res) => { + this.setData({ + stickyItemTop: res.top + scrollTop, + stickyItemHeight: res.height + }); + }).exec(); + + // 设置sticky-item-header外层容器高度 + query + .select('.l-sticky-item-header') + .boundingClientRect((res) => { + this.setData({ + stickyItemWrapperHeight: res.height + }); + }).exec(); + }, + + /** + * 获取父级组件-sticky实例 + */ + getParentComponet() { + const stickys = this.getRelationNodes('../sticky/index'); + if (stickys.length === 0) { + return; + } + return stickys[0]; + } + } +}); diff --git a/examples/dist/sticky-item/index.json b/examples/dist/sticky-item/index.json new file mode 100644 index 00000000..e8cfaaf8 --- /dev/null +++ b/examples/dist/sticky-item/index.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/examples/dist/sticky-item/index.wxml b/examples/dist/sticky-item/index.wxml new file mode 100644 index 00000000..1a2921a7 --- /dev/null +++ b/examples/dist/sticky-item/index.wxml @@ -0,0 +1,16 @@ + + + + + + + + + + diff --git a/examples/dist/sticky-item/index.wxss b/examples/dist/sticky-item/index.wxss new file mode 100644 index 00000000..94929ff2 --- /dev/null +++ b/examples/dist/sticky-item/index.wxss @@ -0,0 +1 @@ +.l-sticky-item{display:flex;flex-direction:column}.l-sticky-wrapper{overflow:visible}.l-sticky-item-header{width:100%}.l-sticky-item-header-fixed{position:fixed;top:0}@supports (position:sticky){.l-sticky-item-header-sticky{position:sticky}} \ No newline at end of file diff --git a/examples/dist/sticky/index.js b/examples/dist/sticky/index.js new file mode 100644 index 00000000..94bc2265 --- /dev/null +++ b/examples/dist/sticky/index.js @@ -0,0 +1,150 @@ +import validator from '../behaviors/validator'; +Component({ + externalClasses: ['l-class'], + behaviors: [validator], + relations: { + '../sticky-item/index': { + type: 'child', + linked() { + this.checkSupportCssSticky().then((isSupportCssSticky) => { + if (!isSupportCssSticky) { + this.updateStickyItemsSizeData(); + } + }); + }, + linkChanged() { + this.checkSupportCssSticky().then((isSupportCssSticky) => { + if (!isSupportCssSticky) { + this.updateStickyItemsSizeData(); + } + }); + }, + unlinked() { + this.checkSupportCssSticky().then((isSupportCssSticky) => { + if (!isSupportCssSticky) { + this.updateStickyItemsSizeData(); + } + }); + } + } + }, + + properties: { + /** + * 吸顶容器实现模式 + * js - 使用js实现 + * css - 使用css实现，若不支持css，则回滚到js模式 + */ + mode: { + type: String, + value: 'js', + options: ['js', 'css'] + }, + + /** + * 页面垂直滚动的距离 + */ + scrollTop: Number, + }, + + observers: { + /** + * 监听页面滚动，实时更新吸顶容器位置 + */ + 'scrollTop': function () { + this.checkSupportCssSticky().then((isSupportCssSticky) => { + if (!isSupportCssSticky) { + this.updateStickyItemsPosition(); + } + }); + } + }, + + lifetimes: { + attached() { + this.checkSupportCssSticky().then((isSupportCssSticky) => { + if (!isSupportCssSticky) { + this.initSticky(); + } + }); + } + }, + + methods: { + + /** + * 创建wx.lin函数 + */ + initSticky() { + wx.lin = wx.lin || {}; + wx.lin.flushSticky = () => { + this.updateStickyItemsSizeData(); + }; + + // 传入scrollTop的值的函数 + wx.lin.setScrollTop = (scrollTop) => { + this.data.scrollTop = scrollTop; + this.checkSupportCssSticky().then((isSupportCssSticky) => { + if (!isSupportCssSticky) { + this.updateStickyItemsPosition(); + } + }); + }; + }, + + /** + * 更新所有sticky-item组件的position属性 + */ + updateStickyItemsPosition() { + const stickyItemNodes = this.getStickyItemNodes(); + for (let stickyItemNode of stickyItemNodes) { + stickyItemNode.updateStickyItemPosition(this.data.scrollTop); + } + }, + + /** + * 更新所有sticky-item组件的基础数据 + */ + updateStickyItemsSizeData() { + const stickyItemNodes = this.getStickyItemNodes(); + stickyItemNodes.forEach((item, index) => { + item.updateStickyItemBaseData(index); + }); + }, + + /** + * 获取所有的sticky-item组件 + * @return {Object} sticky-item组件集合 + */ + getStickyItemNodes() { + return this.getRelationNodes('../sticky-item/index'); + }, + + /** + * 检测当前webview内核是否支持css设置sticky + * @return {Boolean} css是否支持设置sticky + */ + checkSupportCssSticky() { + return new Promise((resolve) => { + const stickyItemNodes = this.getStickyItemNodes(); + if (stickyItemNodes.length == 0) { + resolve(false); + } + + // 根据position判断是否支持position:sticky + wx + .createSelectorQuery() + .in(stickyItemNodes[0]) + .select('.l-sticky-item-header') + .fields({computedStyle: ['position']}) + .exec((res) => { + if (res[0] === null) { + resolve(false); + } else { + resolve(res[0].position === 'sticky'); + } + }); + }); + }, + } +}); diff --git a/examples/dist/sticky/index.json b/examples/dist/sticky/index.json new file mode 100644 index 00000000..e8cfaaf8 --- /dev/null +++ b/examples/dist/sticky/index.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/examples/dist/sticky/index.wxml b/examples/dist/sticky/index.wxml new file mode 100644 index 00000000..39b9072a --- /dev/null +++ b/examples/dist/sticky/index.wxml @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/examples/dist/sticky/index.wxss b/examples/dist/sticky/index.wxss new file mode 100644 index 00000000..e69de29b diff --git a/examples/dist/tag/index.js b/examples/dist/tag/index.js index 5c89e6cc..3cac429d 100644 --- a/examples/dist/tag/index.js +++ b/examples/dist/tag/index.js @@ -1,13 +1,17 @@ +import validator from '../behaviors/validator'; + Component({ externalClasses: ['l-class', 'l-select-class', 'l-image-class'], + behaviors: [validator], properties: { // 标签标识 name: String, cell: Object, // 标签颜色 - type:{ + type: { type: String, - value: 'touch' + value: 'touch', + options: ['reading', 'touch'] }, bgColor: String, fontColor: String, @@ -15,7 +19,8 @@ Component({ // 标签形状 shape: { type: String, - value: 'square' + value: 'square', + options: ['square', 'circle'] }, // 是否为选中态 select: Boolean, @@ -24,11 +29,13 @@ Component({ // 标签大小 size: { type: String, - value: 'medium' + value: 'medium', + options: ['large', 'medium', 'mini', 'super-mini'] }, location: { type: String, - value: 'left' + value: 'left', + options: ['left', 'right'] }, icon: String, iconSize: { diff --git a/examples/pages/components/basic/pages/button/index.wxml b/examples/pages/components/basic/pages/button/index.wxml index 5585aa2b..ae44e5fa 100644 --- a/examples/pages/components/basic/pages/button/index.wxml +++ b/examples/pages/components/basic/pages/button/index.wxml @@ -19,7 +19,7 @@ 圆弧按钮 - 方形按钮 + 方形按钮 半圆按钮 diff --git a/examples/pages/components/form/pages/rules/index.js b/examples/pages/components/form/pages/rules/index.js index 753345c7..5009541f 100644 --- a/examples/pages/components/form/pages/rules/index.js +++ b/examples/pages/components/form/pages/rules/index.js @@ -41,7 +41,8 @@ Component({ type: "number", required: true, message: '请重新输入数字' - } + }, + likes: ['读书'] }, methods: { @@ -53,6 +54,22 @@ Component({ console.log('linvalidate', e) }, + changeCheckbox(e){ + const key = e.detail.key + const checked = e.detail.checked + let likes = this.data.likes + if (checked) { + likes.push(key) + } else { + likes = likes.filter(item => { + return item !== key + }) + } + this.setData({ + likes: likes + }); + }, + /** * Lifecycle function--Called when page load */ @@ -107,4 +124,4 @@ Component({ } } -}) \ No newline at end of file +}) diff --git a/examples/pages/components/form/pages/rules/index.wxml b/examples/pages/components/form/pages/rules/index.wxml index 1c111596..5df31e69 100644 --- a/examples/pages/components/form/pages/rules/index.wxml +++ b/examples/pages/components/form/pages/rules/index.wxml @@ -10,18 +10,18 @@ 爱好 - - - - + + 读书 + 写字 + 摄影 性别 - - + 男 + 女 * 输入你的自我介绍吧~~ @@ -33,4 +33,13 @@ - \ No newline at end of file + + + + var isChecked = function(item,likes) { + return likes.indexOf(item) > -1 + } + module.exports = { + isChecked: isChecked + } + diff --git a/examples/pages/components/form/pages/rules/index.wxss b/examples/pages/components/form/pages/rules/index.wxss index 9ddacf13..8e9e11cd 100644 --- a/examples/pages/components/form/pages/rules/index.wxss +++ b/examples/pages/components/form/pages/rules/index.wxss @@ -42,7 +42,7 @@ } .textarea-class { - width:auto !important; + /*width:auto !important;*/ } .error-text { @@ -50,4 +50,4 @@ color: #fff !important; border-radius: 8rpx; padding: 0 10rpx; -} \ No newline at end of file +} diff --git a/examples/pages/components/layout/pages/sticky/index.js b/examples/pages/components/layout/pages/sticky/index.js new file mode 100644 index 00000000..2cdc40b9 --- /dev/null +++ b/examples/pages/components/layout/pages/sticky/index.js @@ -0,0 +1,30 @@ +// pages/components/layout/pages/sticky/index.js +Page({ + + /** + * 页面的初始数据 + */ + data: { + + }, + + onTapBase(){ + console.log("进入") + wx.navigateTo({ + url:"/pages/components/layout/pages/sticky/pages/sticky-base/index" + }) + }, + + onTapAppoint(){ + wx.navigateTo({ + url:"/pages/components/layout/pages/sticky/pages/sticky-appoint/index" + }) + }, + + onTapDynamic(){ + wx.navigateTo({ + url:"/pages/components/layout/pages/sticky/pages/sticky-dynamic/index" + }) + } + +}) \ No newline at end of file diff --git a/examples/pages/components/layout/pages/sticky/index.json b/examples/pages/components/layout/pages/sticky/index.json new file mode 100644 index 00000000..e1eac626 --- /dev/null +++ b/examples/pages/components/layout/pages/sticky/index.json @@ -0,0 +1,16 @@ +{ + "usingComponents": { + "content-title": "/components/content-title/index", + "content-card": "/components/content-card/index", + "search-bar":"/dist/search-bar/index", + "l-grid-item": "/dist/grid-item/index", + "l-grid": "/dist/grid/index", + "l-icon":"/dist/icon/index", + "l-segment": "/dist/segment/index", + "l-segment-item": "/dist/segment-item/index", + "l-card":"/dist/card/index", + "l-button":"/dist/button/index", + "l-sticky":"/dist/sticky/index", + "l-sticky-item":"/dist/sticky-item/index" + } +} \ No newline at end of file diff --git a/examples/pages/components/layout/pages/sticky/index.wxml b/examples/pages/components/layout/pages/sticky/index.wxml new file mode 100644 index 00000000..ff425173 --- /dev/null +++ b/examples/pages/components/layout/pages/sticky/index.wxml @@ -0,0 +1,24 @@ + + + + + + + + + 基本案例 + + + + 指定吸附位置 + + + + 动态插入内容 + + + + + + + diff --git a/examples/pages/components/layout/pages/sticky/index.wxss b/examples/pages/components/layout/pages/sticky/index.wxss new file mode 100644 index 00000000..0566c856 --- /dev/null +++ b/examples/pages/components/layout/pages/sticky/index.wxss @@ -0,0 +1,107 @@ +/* pages/components/layout/pages/sticky/index.wxss */ + +.num { + color: #fc6517; + font-size: 42rpx; + font-style: italic; +} + +.text { + height: 30rpx; + font-size: 22rpx; + font-family: PingFangSC-Regular; + font-weight: 400; + color: rgba(102, 102, 102, 1); + line-height: 30rpx; + margin-top: 9rpx; +} + +.grid-item { + height: 200rpx; +} + + +page { + padding-bottom: 1000rpx; +} + +.container { + max-width: 100vw; + overflow: visible; +} + +.text { + height: 30rpx; + font-size: 22rpx; + font-family: PingFangSC-Regular; + font-weight: 400; + color: rgba(102, 102, 102, 1); + line-height: 30rpx; + margin-top: 9rpx; +} + +.grid-item { + height: 200rpx; +} + +.l-header-sticky-class { + right: 0 !important; + box-sizing: border-box !important; + padding: 0 20rpx !important; + background-color: white !important; + z-index: 1 !important; +} + +.l-container-class { + background-color: white !important; +} + + + +/* 指定吸顶位置 */ +.container-search-bar { + height: 40px; + width: 100%; + display: flex; + justify-content: center; + align-items: flex-end; + background-color: white; +} + +/* 卡片样式 */ +.card { + margin: 10rpx auto !important; +} + +.right-card { + height: 180rpx !important; + width: 220rpx !important; + border-radius: 12rpx !important; +} + +.content { + margin-top: 10rpx; + color: #666; + font-size: 26rpx; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 5; +} + +.dynamic-card-header{ + height: 40rpx; + line-height: 30rpx; + font-weight: bold; + background-color: white; + margin: 30rpx 0; + +} + +.dynamic-card-body{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} \ No newline at end of file diff --git a/examples/pages/components/layout/pages/sticky/pages/sticky-appoint/index.js b/examples/pages/components/layout/pages/sticky/pages/sticky-appoint/index.js new file mode 100644 index 00000000..ff0e290b --- /dev/null +++ b/examples/pages/components/layout/pages/sticky/pages/sticky-appoint/index.js @@ -0,0 +1,70 @@ +// pages/components/layout/pages/sticky/pages/sticky-appoint/index.js +Page({ + /** + * 页面的初始数据 + */ + data: { + grids2: [ + { + image: "cart", + text: "我的购物车" + }, + { + image: "help", + text: "帮助中心" + }, + { + image: "address", + text: "地址管理" + }, + { + image: "order", + text: "我的订单" + }, + { + image: "customer-service", + text: "联系客服" + } + ] + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad: function(options) {}, + + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady: function() {}, + + /** + * 生命周期函数--监听页面显示 + */ + onShow: function() {}, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide: function() {}, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload: function() {}, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh: function() {}, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom: function() {}, + + /** + * 用户点击右上角分享 + */ + onShareAppMessage: function() {} +}) diff --git a/examples/pages/components/layout/pages/sticky/pages/sticky-appoint/index.json b/examples/pages/components/layout/pages/sticky/pages/sticky-appoint/index.json new file mode 100644 index 00000000..39cc7359 --- /dev/null +++ b/examples/pages/components/layout/pages/sticky/pages/sticky-appoint/index.json @@ -0,0 +1,15 @@ +{ + "usingComponents": { + "content-title": "/components/content-title/index", + "content-card": "/components/content-card/index", + "l-sticky":"/dist/sticky/index", + "l-sticky-item":"/dist/sticky-item/index", + "search-bar":"/dist/search-bar/index", + "l-grid-item": "/dist/grid-item/index", + "l-grid": "/dist/grid/index", + "l-icon":"/dist/icon/index", + "l-segment": "/dist/segment/index", + "l-segment-item": "/dist/segment-item/index", + "l-card":"/dist/card/index" + } +} \ No newline at end of file diff --git a/examples/pages/components/layout/pages/sticky/pages/sticky-appoint/index.wxml b/examples/pages/components/layout/pages/sticky/pages/sticky-appoint/index.wxml new file mode 100644 index 00000000..bfa3cba2 --- /dev/null +++ b/examples/pages/components/layout/pages/sticky/pages/sticky-appoint/index.wxml @@ -0,0 +1,105 @@ + + + + + + + + + + + + + {{item.text}} + + + + + + + + + + + + + 很简单，豆瓣现在这样就给大家指了一条明路:以后凡是这种国产的风口浪尖的的片子... + + + + 很简单，豆瓣现在这样就给大家指了一条明路:以后凡是这种国产的风口浪尖的的片子... + + + + 很简单，豆瓣现在这样就给大家指了一条明路:以后凡是这种国产的风口浪尖的的片子... + + + + 很简单，豆瓣现在这样就给大家指了一条明路:以后凡是这种国产的风口浪尖的的片子... + + + + 很简单，豆瓣现在这样就给大家指了一条明路:以后凡是这种国产的风口浪尖的的片子... + + + + 很简单，豆瓣现在这样就给大家指了一条明路:以后凡是这种国产的风口浪尖的的片子... + + + + + + + + + + diff --git a/examples/pages/components/layout/pages/sticky/pages/sticky-appoint/index.wxss b/examples/pages/components/layout/pages/sticky/pages/sticky-appoint/index.wxss new file mode 100644 index 00000000..a41d497a --- /dev/null +++ b/examples/pages/components/layout/pages/sticky/pages/sticky-appoint/index.wxss @@ -0,0 +1,82 @@ + + +.container { + max-width: 100vw; + overflow: visible; +} + +.text { + height: 30rpx; + font-size: 22rpx; + font-family: PingFangSC-Regular; + font-weight: 400; + color: rgba(102, 102, 102, 1); + line-height: 30rpx; + margin-top: 9rpx; +} + +.grid-item { + height: 200rpx; +} + +.l-header-sticky-class { + right: 0 !important; + box-sizing: border-box !important; + padding: 0 20rpx !important; + background-color: white !important; + z-index: 1 !important; +} + +.l-container-class { + background-color: white !important; +} + + + +/* 指定吸顶位置 */ +.container-search-bar { + height: 40px; + width: 100%; + display: flex; + justify-content: center; + align-items: flex-end; + background-color: white; +} + +/* 卡片样式 */ +.card { + margin: 10rpx auto !important; +} + +.right-card { + height: 180rpx !important; + width: 220rpx !important; + border-radius: 12rpx !important; +} + +.content { + margin-top: 10rpx; + color: #666; + font-size: 26rpx; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 5; +} + +.dynamic-card-header{ + height: 40rpx; + line-height: 30rpx; + font-weight: bold; + background-color: white; + margin: 30rpx 0; + +} + +.dynamic-card-body{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} \ No newline at end of file diff --git a/examples/pages/components/layout/pages/sticky/pages/sticky-base/index.js b/examples/pages/components/layout/pages/sticky/pages/sticky-base/index.js new file mode 100644 index 00000000..abae370b --- /dev/null +++ b/examples/pages/components/layout/pages/sticky/pages/sticky-base/index.js @@ -0,0 +1,131 @@ +// pages/components/layout/pages/sticky/pages/stick-base/index.js +Page({ + + /** + * 页面的初始数据 + */ + data: { + addresses:[ + { + index:"A", + items:[ + "阿坝", + "阿克苏", + "阿拉尔", + "阿拉善盟", + "阿勒泰", + "阿里", + "安康", + "安庆", + "鞍山", + "安阳", + "澳门", + ] + }, + { + index:"B", + items:[ + "百色", + "白沙", + "白山", + "白银", + "蚌埠", + "保定", + "宝鸡", + "宝山", + "保亭", + "包头", + "坝上", + "巴彦淖尔", + "巴音郭楞", + "巴中", + "北海", + "北疆", + ] + }, + { + index:"C", + items:[ + "沧州", + "长白山", + "长春", + "常德", + "昌都", + "昌吉", + "昌江", + "长江三峡", + "长沙", + "长治", + "常州", + "巢湖", + "朝阳", + "潮州", + "常德", + "成都", + "澄迈", + "郴州", + "赤峰", + "池州", + "重庆", + "楚雄州", + ] + } + ], + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad: function (options) { + + }, + + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady: function () { + + }, + + /** + * 生命周期函数--监听页面显示 + */ + onShow: function () { + + }, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide: function () { + + }, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload: function () { + + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh: function () { + + }, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom: function () { + + }, + + /** + * 用户点击右上角分享 + */ + onShareAppMessage: function () { + + } +}) \ No newline at end of file diff --git a/examples/pages/components/layout/pages/sticky/pages/sticky-base/index.json b/examples/pages/components/layout/pages/sticky/pages/sticky-base/index.json new file mode 100644 index 00000000..bba5cbcc --- /dev/null +++ b/examples/pages/components/layout/pages/sticky/pages/sticky-base/index.json @@ -0,0 +1,8 @@ +{ + "usingComponents": { + "content-title": "/components/content-title/index", + "content-card": "/components/content-card/index", + "l-sticky":"/dist/sticky/index", + "l-sticky-item":"/dist/sticky-item/index" + } +} diff --git a/examples/pages/components/layout/pages/sticky/pages/sticky-base/index.wxml b/examples/pages/components/layout/pages/sticky/pages/sticky-base/index.wxml new file mode 100644 index 00000000..a837d520 --- /dev/null +++ b/examples/pages/components/layout/pages/sticky/pages/sticky-base/index.wxml @@ -0,0 +1,18 @@ + + + + + + + {{item.index}} + + + {{item}} + + + + + + + + diff --git a/examples/pages/components/layout/pages/sticky/pages/sticky-base/index.wxss b/examples/pages/components/layout/pages/sticky/pages/sticky-base/index.wxss new file mode 100644 index 00000000..0de04b95 --- /dev/null +++ b/examples/pages/components/layout/pages/sticky/pages/sticky-base/index.wxss @@ -0,0 +1,18 @@ +/* pages/components/layout/pages/sticky/pages/stick-base/index.wxss */ +/* 基本案例 */ +.index-header { + padding-left: 20rpx; + box-sizing: border-box; + color: #3863bc; + background-color: #eeeeee; +} + +.index-body-item { + padding-left: 20rpx; + height: 90rpx; + line-height: 90rpx; +} + +.index-body-item:not(:last-of-type) { + border-bottom: 1px solid #dedede; +} \ No newline at end of file diff --git a/examples/pages/components/layout/pages/sticky/pages/sticky-dynamic/index.js b/examples/pages/components/layout/pages/sticky/pages/sticky-dynamic/index.js new file mode 100644 index 00000000..4e43cafd --- /dev/null +++ b/examples/pages/components/layout/pages/sticky/pages/sticky-dynamic/index.js @@ -0,0 +1,117 @@ +// pages/components/layout/pages/sticky/pages/sticky-dynamic/index.js +Page({ + /** + * 页面的初始数据 + */ + data: { + dynamicCard: [ + { + title: "动态插入数据示例", + content: "点击下面按钮动态插入一条数据，模拟上拉加载更多的业务场景" + }, + { + title: "动态插入数据示例", + content: "点击下面按钮动态插入一条数据，模拟上拉加载更多的业务场景" + }, + { + title: "动态插入数据示例", + content: "点击下面按钮动态插入一条数据，模拟上拉加载更多的业务场景" + }, + { + title: "动态插入数据示例", + content: "点击下面按钮动态插入一条数据，模拟上拉加载更多的业务场景" + }, + { + title: "动态插入数据示例", + content: "点击下面按钮动态插入一条数据，模拟上拉加载更多的业务场景" + }, + { + title: "动态插入数据示例", + content: "点击下面按钮动态插入一条数据，模拟上拉加载更多的业务场景" + }, + { + title: "动态插入数据示例", + content: "点击下面按钮动态插入一条数据，模拟上拉加载更多的业务场景" + }, + { + title: "动态插入数据示例", + content: "点击下面按钮动态插入一条数据，模拟上拉加载更多的业务场景" + }, + { + title: "动态插入数据示例", + content: "点击下面按钮动态插入一条数据，模拟上拉加载更多的业务场景" + }, + { + title: "动态插入数据示例", + content: "点击下面按钮动态插入一条数据，模拟上拉加载更多的业务场景" + }, + { + title: "动态插入数据示例", + content: "点击下面按钮动态插入一条数据，模拟上拉加载更多的业务场景" + } + ] + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad: function(options) {}, + + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady: function() {}, + + /** + * 生命周期函数--监听页面显示 + */ + onShow: function() {}, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide: function() {}, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload: function() {}, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh: function() {}, + + onPageScroll(e) { + this.setData({ + scrollTop: e.scrollTop + }) + }, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom: function() { + setTimeout(() => { + this.setData({ + dynamicCard: this.data.dynamicCard.concat( + this.data.dynamicCard.slice(0, 10) + ) + }) + wx.lin.flushSticky() + }, 600) + }, + + linunsticky(){ + wx.showToast({title:"容器脱落！"}) + }, + + linsticky(){ + wx.showToast({title:"容器吸附！"}) + }, + + /** + * 用户点击右上角分享 + */ + onShareAppMessage: function() {} +}) diff --git a/examples/pages/components/layout/pages/sticky/pages/sticky-dynamic/index.json b/examples/pages/components/layout/pages/sticky/pages/sticky-dynamic/index.json new file mode 100644 index 00000000..87d1cb30 --- /dev/null +++ b/examples/pages/components/layout/pages/sticky/pages/sticky-dynamic/index.json @@ -0,0 +1,17 @@ +{ + "usingComponents": { + "content-title": "/components/content-title/index", + "content-card": "/components/content-card/index", + "search-bar":"/dist/search-bar/index", + "l-grid-item": "/dist/grid-item/index", + "l-grid": "/dist/grid/index", + "l-icon":"/dist/icon/index", + "l-segment": "/dist/segment/index", + "l-segment-item": "/dist/segment-item/index", + "l-card":"/dist/card/index", + "l-button":"/dist/button/index", + "l-sticky":"/dist/sticky/index", + "l-sticky-item":"/dist/sticky-item/index", + "l-loadmore":"/dist/loadmore/index" + } +} \ No newline at end of file diff --git a/examples/pages/components/layout/pages/sticky/pages/sticky-dynamic/index.wxml b/examples/pages/components/layout/pages/sticky/pages/sticky-dynamic/index.wxml new file mode 100644 index 00000000..03f005c8 --- /dev/null +++ b/examples/pages/components/layout/pages/sticky/pages/sticky-dynamic/index.wxml @@ -0,0 +1,30 @@ + + + + + + 今日新闻 + + + + {{item.content}} + + + + + + + + + diff --git a/examples/pages/components/layout/pages/sticky/pages/sticky-dynamic/index.wxss b/examples/pages/components/layout/pages/sticky/pages/sticky-dynamic/index.wxss new file mode 100644 index 00000000..17e70512 --- /dev/null +++ b/examples/pages/components/layout/pages/sticky/pages/sticky-dynamic/index.wxss @@ -0,0 +1,103 @@ +/* pages/components/layout/pages/sticky/index.wxss */ + +.num { + color: #fc6517; + font-size: 42rpx; + font-style: italic; +} + +.text { + height: 30rpx; + font-size: 22rpx; + font-family: PingFangSC-Regular; + font-weight: 400; + color: rgba(102, 102, 102, 1); + line-height: 30rpx; + margin-top: 9rpx; +} + +.grid-item { + height: 200rpx; +} + + +.container { + max-width: 100vw; + overflow: visible; +} + +.text { + height: 30rpx; + font-size: 22rpx; + font-family: PingFangSC-Regular; + font-weight: 400; + color: rgba(102, 102, 102, 1); + line-height: 30rpx; + margin-top: 9rpx; +} + +.grid-item { + height: 200rpx; +} + +.l-header-sticky-class { + right: 0 !important; + box-sizing: border-box !important; + padding: 0 20rpx !important; + background-color: white !important; + z-index: 1 !important; +} + +.l-container-class { + background-color: white !important; +} + + + +/* 指定吸顶位置 */ +.container-search-bar { + height: 40px; + width: 100%; + display: flex; + justify-content: center; + align-items: flex-end; + background-color: white; +} + +/* 卡片样式 */ +.card { + margin: 10rpx auto !important; +} + +.right-card { + height: 180rpx !important; + width: 220rpx !important; + border-radius: 12rpx !important; +} + +.content { + margin-top: 10rpx; + color: #666; + font-size: 26rpx; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 5; +} + +.dynamic-card-header{ + height: 40rpx; + line-height: 30rpx; + font-weight: bold; + background-color: white; + margin: 30rpx 0; + +} + +.dynamic-card-body{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} \ No newline at end of file diff --git a/examples/pages/navigator/content/config/layout-navi.js b/examples/pages/navigator/content/config/layout-navi.js index bb5f0eb5..b9db1072 100644 --- a/examples/pages/navigator/content/config/layout-navi.js +++ b/examples/pages/navigator/content/config/layout-navi.js @@ -7,26 +7,32 @@ const layoutNaviConfigs = [{ icon: "/images/component/grid.jpg", title: "Grid", desc: "宫格", - componentsPath: "/pages/components/layout/pages/grid/index" + componentsPath: "/pages/components/layout/pages/grid/index" }, -{ - icon: "/images/component/card.png", - title: "Card", - desc: "卡片", - componentsPath: "/pages/components/layout/pages/card/index" -}, -{ - icon: "/images/component/waterFlow.png", - title: "WaterFlow", - desc: "瀑布流", - componentsPath: "/pages/components/layout/pages/water-flow/index" -}, -{ - icon: "/images/component/album.png", - title: "Album", - desc: "相册", + { + icon: "/images/component/card.png", + title: "Card", + desc: "卡片", + componentsPath: "/pages/components/layout/pages/card/index" + }, + { + icon: "/images/component/waterFlow.png", + title: "WaterFlow", + desc: "瀑布流", + componentsPath: "/pages/components/layout/pages/water-flow/index" + }, + { + icon: "/images/component/album.png", + title: "Album", + desc: "相册", componentsPath: "/pages/components/layout/pages/album/index" -} + }, + { + icon: "/images/component/album.png", + title: "Sticky", + desc: "吸顶容器", + componentsPath: "/pages/components/layout/pages/sticky/index" + } ] export default layoutNaviConfigs; \ No newline at end of file diff --git a/package.json b/package.json index 8206e111..fac044db 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "lin-ui", - "version": "0.7.3", + "version": "0.7.4", "description": "A high quality UI components library with MiniProgram", "main": "app.js", "directories": { diff --git a/src/badge/index.js b/src/badge/index.js index 27775b7c..ea5d015d 100644 --- a/src/badge/index.js +++ b/src/badge/index.js @@ -1,5 +1,8 @@ +import validator from '../behaviors/validator'; + Component({ externalClasses: ['l-class', 'l-class-self', 'l-self-class'], + behaivors: [validator], properties: { // 红点模式 dot: { @@ -8,7 +11,8 @@ Component({ }, shape: { type: String, - value: 'horn' + value: 'horn', + options: ['horn', 'circle'] }, value: { type: String, @@ -16,7 +20,8 @@ Component({ }, mode: { type: String, - value: 'number' + value: 'number', + options: ['number', 'text'] }, // 数字最大值 maxCount: { @@ -26,7 +31,8 @@ Component({ // 数字形式 numberType: { type: String, - value: 'overflow' + value: 'overflow', + options: ['overflow', 'limit', 'ellipsis'] }, show: { type: Boolean, diff --git a/src/behaviors/rules.js b/src/behaviors/rules.js index b951893e..e64244f0 100644 --- a/src/behaviors/rules.js +++ b/src/behaviors/rules.js @@ -1,19 +1,21 @@ import Schema from '../common/async-validator/index'; +import validator from '../behaviors/validator'; /** * @param tipType String [toast , message , text] */ // eslint-disable-next-line no-undef export default Behavior({ - behaviors: [], + behaviors: [validator], properties: { // 校验 rules: { - type: [Object,Array], + type: [Object, Array], value: [] }, tipType: { type: String, - value:'toast' + value: 'toast', + options: ['toast', 'message', 'text'] } }, data: { diff --git a/src/behaviors/validator.js b/src/behaviors/validator.js new file mode 100644 index 00000000..92ff671f --- /dev/null +++ b/src/behaviors/validator.js @@ -0,0 +1,21 @@ +// eslint-disable-next-line no-undef +export default Behavior({ + definitionFilter(defFields) { + const { + properties + } = defFields; + const propsKey = Object.keys(properties); + propsKey.forEach(name => { + const { + options + } = properties[name]; + if (options) { + properties[name].observer = function (newValue) { + if (!options.includes(newValue)) { + console.error(`${name}: ${newValue} must be in the [${options}]`); + } + }; + } + }); + } +}); \ No newline at end of file diff --git a/src/button/index.js b/src/button/index.js index 8a9a7796..e5e45aa4 100644 --- a/src/button/index.js +++ b/src/button/index.js @@ -1,11 +1,14 @@ +import validator from '../behaviors/validator'; + Component({ externalClasses: [ - 'l-class', + 'l-class', 'l-label-class', - 'l-hover-class', + 'l-hover-class', 'l-img-class', 'l-icon-class' ], + behaviors: [validator], properties: { // button组建标识 name: { @@ -15,15 +18,18 @@ Component({ type: { type: String, value: 'default', + options: ['warning', 'success', 'error', 'default'] }, plain: Boolean, size: { type: String, value: 'medium', + options: ['medium', 'large', 'mini', 'long'] }, shape: { type: String, value: 'circle', + options: ['square', 'circle', 'semicircle'] }, disabled: { type: Boolean, diff --git a/src/card/index.js b/src/card/index.js index a1ad9aff..b9e589ae 100644 --- a/src/card/index.js +++ b/src/card/index.js @@ -1,24 +1,29 @@ +import validator from '../behaviors/validator'; + Component({ /** * 组件的属性列表 */ - externalClasses: ['l-class', 'l-img-class','l-title-class'], + externalClasses: ['l-class', 'l-img-class', 'l-title-class'], options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, + bahaviors: [validator], properties: { image: String, title: String, describe: String, plaintext: Boolean, full: Boolean, - position:{ - type:String, - value:'left' + position: { + type: String, + value: 'left', + options: ['left', 'right'] }, type: { type: String, - value: 'primary' + value: 'primary', + options: ['primary', 'avatar'] }, imageMode: { type: String, diff --git a/src/counter/index.js b/src/counter/index.js index 99bc9ab7..6a3a6b7d 100644 --- a/src/counter/index.js +++ b/src/counter/index.js @@ -1,7 +1,7 @@ import hover from '../behaviors/hover'; Component({ - behaviors:[hover], + behaviors: [hover], externalClasses: [ 'l-class', 'l-symbol-class', diff --git a/src/dialog/index.js b/src/dialog/index.js index d7a5a632..bbcd138b 100644 --- a/src/dialog/index.js +++ b/src/dialog/index.js @@ -1,12 +1,12 @@ import computeOffset from '../behaviors/computeOffset'; import zIndex from '../behaviors/zIndex'; import hover from '../behaviors/hover'; - +import validator from '../behaviors/validator'; Component({ /** * 组件的属性列表 */ - behaviors: [computeOffset,zIndex,hover], + behaviors: [computeOffset, zIndex, hover, validator], externalClasses: ['l-class', 'l-title-class', 'l-content-class', 'l-confirm-class', 'l-cancel-class', 'l-bg-class'], properties: { // 显示与隐藏 @@ -17,7 +17,8 @@ Component({ // 类型 【 alert: 提示框， confrim: 确认框 】 type: { type: String, - value: 'alert' + value: 'alert', + options: ['alert', 'confirm'] }, // 标题文字 title: { @@ -184,4 +185,4 @@ Component({ this.triggerEvent('lintap', detail, option); } } -}); \ No newline at end of file +}); diff --git a/src/image-picker/index.js b/src/image-picker/index.js index 63d22f5f..8487b3df 100644 --- a/src/image-picker/index.js +++ b/src/image-picker/index.js @@ -1,10 +1,11 @@ -// mask +import validator from '../behaviors/validator'; + Component({ /** * 组件的属性列表 */ externalClasses: ['l-class', 'l-item-class'], - behaviors: ['wx://form-field'], + behaviors: ['wx://form-field', validator], properties: { urls: { type: Array, @@ -28,17 +29,20 @@ Component({ // 每行可显示的个数 size: { type: [String, Number], - value: 3 + value: 3, + options: [3, 4, '3', '4'] }, // 所选的图片的尺寸 ['original', 'compressed'] sizeType: { type: String, value: 'original', + options: ['original', 'compressed'] }, // 图片裁剪、缩放的模式 mode: { type: String, value: 'aspectFit', // 参考微信小程序 image 组件的mode属性列表 + options: ['scaleToFill', 'aspectFit', 'aspectFill', 'widthFix', 'top', 'bottom', 'center', 'left', 'right', 'top left', 'top right', 'bottom left', 'bottom right'] }, // 设置是否传入slot custom: { @@ -166,7 +170,7 @@ Component({ } } const newtempFilePaths = that.data.urls.concat(tempFilePath); - // 判断是否还能继续添加图片 + // 判断是否还能继续添加图片 if (newtempFilePaths.length === parseInt(that.data.count)) { that.setData({ showBtn: false @@ -213,7 +217,7 @@ Component({ const urls = this.data.urls; const tempFilePath = urls[index]; const tempFilePaths = this.handleSplice(urls, tempFilePath); - // 判断是否还能继续添加图片 + // 判断是否还能继续添加图片 if (tempFilePaths.length < parseInt(this.data.count)) { this.setData({ showBtn: true @@ -251,4 +255,4 @@ Component({ } }, -}); \ No newline at end of file +}); diff --git a/src/input/index.js b/src/input/index.js index aa4d2f7d..fab009b3 100644 --- a/src/input/index.js +++ b/src/input/index.js @@ -1,7 +1,6 @@ // input/input.js -// import rules from '../behaviors/rules'; import eventBus from '../utils/eventBus.js'; - +import validator from '../behaviors/validator'; Component({ /** * 组件的属性列表 @@ -9,65 +8,38 @@ Component({ options: { multipleSlots: true, }, - behaviors: ['wx://form-field'], - // behaviors: ['wx://form-field', rules], - externalClasses: ['l-class', 'l-label-class','l-error-text','l-error-text-class'], + behaviors: ['wx://form-field', validator], + externalClasses: ['l-class', 'l-label-class', 'l-error-text', 'l-error-text-class'], properties: { // 表单标题（label）的文本 - label: { - type: String, - value: '' - }, + label: String, // 是否隐藏label - hideLabel:{ - type: Boolean, - value: false - }, + hideLabel: Boolean, // 是否自定义label部分 - labelCustom: { - type: Boolean, - value: false - }, + labelCustom: Boolean, // 是否显示下划线 showRow: { type: Boolean, value: true }, // 是否必选 - required: { - type: Boolean, - value: false - }, + required: Boolean, // 占位文本 - placeholder: { - type: String, - value: '' - }, + placeholder: String, // 输入框类型 type: { type: String, - value: 'text' + value: 'text', + options: ['text', 'idcard', 'digit', 'password', 'number'] }, // 输入框的值 - value: { - type: String, - value: '' - }, + value: String, // 是否需要冒号 - colon: { - type: Boolean, - value: false - }, + colon: Boolean, // 获取焦点 - focus: { - type: Boolean, - value: false - }, + focus: Boolean, // 是否显示清除按钮 - clear: { - type: Boolean, - value: false - }, + clear: Boolean, // 最大输入长度 maxlength: { type: Number, @@ -86,18 +58,13 @@ Component({ // label标题的显示位置 left top right labelLayout: { type: String, - value: 'left' + value: 'left', + options: ['left', 'right'] }, // 是否禁用 - disabled: { - type: Boolean, - value: false - }, + disabled: Boolean, // 占位文字的样式 - placeholderStyle: { - type: String, - value: '' - }, + placeholderStyle: String, }, /** @@ -125,7 +92,7 @@ Component({ this.setData({ value }); - eventBus.emit(`lin-form-change-${this.id}`,this.id); + eventBus.emit(`lin-form-change-${this.id}`, this.id); this.triggerEvent('lininput', event.detail); }, @@ -137,7 +104,7 @@ Component({ // this.validatorData({ // value: event.detail.value // }); - eventBus.emit(`lin-form-blur-${this.id}`,this.id); + eventBus.emit(`lin-form-blur-${this.id}`, this.id); this.triggerEvent('linblur', event.detail); }, handleInputConfirm(event) { diff --git a/src/loading/index.js b/src/loading/index.js index bd07dc3b..9928c79c 100644 --- a/src/loading/index.js +++ b/src/loading/index.js @@ -1,6 +1,8 @@ import computeOffset from '../behaviors/computeOffset'; +import validator from '../behaviors/validator'; + Component({ - behaviors: [computeOffset], + behaviors: [computeOffset, validator], externalClasses: ['l-container-class', 'l-class'], properties: { // 显示与隐藏 @@ -8,7 +10,7 @@ Component({ type: Boolean, value: false }, - opacity:{ + opacity: { type: String, value: '1' }, @@ -20,7 +22,8 @@ Component({ // 类型 type: { type: String, - value: 'rotate' + value: 'rotate', + options: ['flash', 'flip', 'change', 'rotate', 'circle'] }, // 动画颜色 color: { @@ -81,4 +84,4 @@ Component({ // do nothing…… }, } -}); \ No newline at end of file +}); diff --git a/src/loadmore/index.js b/src/loadmore/index.js index 157225f0..b7c0ac7b 100644 --- a/src/loadmore/index.js +++ b/src/loadmore/index.js @@ -1,8 +1,11 @@ +import validator from '../behaviors/validator'; + Component({ - externalClasses: ['l-class','l-loading-class','l-end-class','l-line-class'], + externalClasses: ['l-class', 'l-loading-class', 'l-end-class', 'l-line-class'], options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, + bahaviors: [validator], properties: { show: Boolean, custom: Boolean, @@ -14,7 +17,8 @@ Component({ }, type: { type: String, - value: 'loading' + value: 'loading', + options: ['loading', 'end'] }, endText: { type: String, diff --git a/src/message/index.js b/src/message/index.js index 1bbca434..be931e78 100644 --- a/src/message/index.js +++ b/src/message/index.js @@ -1,7 +1,9 @@ import zIndex from '../behaviors/zIndex'; import watchShow from '../behaviors/watchShow'; +import validator from '../behaviors/validator'; + Component({ - behaviors: [zIndex, watchShow], + behaviors: [zIndex, watchShow, validator], externalClasses: ['l-class', 'l-image-class'], properties: { show: Boolean, @@ -18,7 +20,8 @@ Component({ content: String, type: { type: String, - value: 'primary' + value: 'primary', + options: ['primary', 'warning', 'success', 'error'] }, duration: { type: Number, @@ -36,7 +39,7 @@ Component({ // 解决 addListener undefined 的错误 observers: { - 'icon': function () {} + 'icon': function () { } }, attached() { @@ -72,7 +75,7 @@ Component({ this.changeStatus(); return this; }; - wx.lin.hideMessage = ()=>{ + wx.lin.hideMessage = () => { this.setData({ status: false }); diff --git a/src/popup/index.js b/src/popup/index.js index 37f7e616..233b3a10 100644 --- a/src/popup/index.js +++ b/src/popup/index.js @@ -1,9 +1,11 @@ import zIndex from '../behaviors/zIndex'; +import validator from '../behaviors/validator'; + Component({ /** * 组件的属性列表 */ - behaviors: [zIndex], + behaviors: [zIndex, validator], externalClasses: ['l-bg-class'], properties: { // 显示与隐藏 @@ -19,7 +21,8 @@ Component({ // slot的位置 contentAlign: { type: String, - value: 'center' + value: 'center', + options: ['top', 'right', 'left', 'bottom', 'center'] }, // 锁定 locked: { diff --git a/src/price/index.js b/src/price/index.js index 6ceadff2..a8f8ce22 100644 --- a/src/price/index.js +++ b/src/price/index.js @@ -1,8 +1,11 @@ +import validator from '../behaviors/validator'; + Component({ /** * 组件的属性列表 */ externalClasses: ['l-deleted-class', 'l-unit-class', 'l-value-class', 'l-class'], + behaviors: [validator], properties: { unit: { type: String, @@ -29,7 +32,8 @@ Component({ }, mode: { type: String, - value: 'number' + value: 'number', + options: ['number', 'text'] }, valueColor: String, valueSize: String, diff --git a/src/search-bar/index.js b/src/search-bar/index.js index 83957571..13d21397 100644 --- a/src/search-bar/index.js +++ b/src/search-bar/index.js @@ -1,4 +1,5 @@ -// cpn/search-bar/index.js +import validator from '../behaviors/validator'; + Component({ /** * 组件的属性列表 @@ -11,6 +12,7 @@ Component({ 'l-input-class', 'l-cancel-class' ], + bahaviors: [validator], options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, @@ -50,11 +52,13 @@ Component({ }, shape: { type: String, - value: 'primary' + value: 'primary', + options: ['circle', 'primary'] }, - TextAlign: { + textAlign: { type: String, - value: 'left' + value: 'left', + options: ['left', 'right'] }, adress: String, // 获取焦点 @@ -70,15 +74,9 @@ Component({ value: 140 }, // 是否禁用 - disabled: { - type: Boolean, - value: false - }, + disabled: Boolean, // 占位文字的样式 - placeholderStyle: { - type: String, - value: '' - } + placeholderStyle: String }, /** diff --git a/src/skeleton/index.js b/src/skeleton/index.js index affc4e24..61681a9e 100644 --- a/src/skeleton/index.js +++ b/src/skeleton/index.js @@ -1,3 +1,5 @@ +import validator from '../behaviors/validator'; + Component({ /** * 组件的属性列表 @@ -8,6 +10,7 @@ Component({ 'l-avatar-class', 'l-row-class' ], + behaviors: [validator], properties: { loading: { type: Boolean, @@ -30,7 +33,8 @@ Component({ avatarSize: String, avatarShape: { type: String, - value: 'circle' + value: 'circle', + options: ['circle', 'square'] }, rowsWidth: { type: Array, diff --git a/src/status-show/index.js b/src/status-show/index.js index 3bbe18b0..cb609d10 100644 --- a/src/status-show/index.js +++ b/src/status-show/index.js @@ -132,6 +132,10 @@ Component({ typeText: '暂时还没有相关数据哦~~' }); break; + default: + console.warn( + `${this.data.type} is not a valid value` + ); } }, diff --git a/src/steps/index.js b/src/steps/index.js index abcfc10f..ba1307ec 100755 --- a/src/steps/index.js +++ b/src/steps/index.js @@ -1,7 +1,10 @@ +import validator from '../behaviors/validator'; + Component({ externalClasses: [ 'l-class' ], + behaviors: [validator], options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, @@ -20,7 +23,8 @@ Component({ properties: { direction: { type: String, - value: 'row' + value: 'row', + options: ['row', 'colunm'] }, activeIndex: { type: Number, @@ -33,7 +37,8 @@ Component({ }, status: { type: String, - value: 'process' + value: 'process', + options: ['process', 'error'] }, dot: Boolean }, diff --git a/src/sticky-item/index.js b/src/sticky-item/index.js new file mode 100644 index 00000000..c2c52128 --- /dev/null +++ b/src/sticky-item/index.js @@ -0,0 +1,140 @@ +Component({ + externalClasses: ['l-class', 'l-header-wrapper-class', 'l-header-class', 'l-header-sticky-class', 'l-body-class'], + options: { + multipleSlots: true + }, + + relations: { + '../sticky/index': { + type: 'parent' + } + }, + + properties: { + /** + * 吸顶容器吸顶后距离视窗 顶部的距离 + */ + top: { + type: Number, + value: 0 + } + }, + + data: { + /** + * 显示模式 + */ + mode: undefined, + /** + * 当前sticky-item的索引值 + */ + index: undefined, + + /** + * sticky-item是否固定到页面顶部 + */ + isFixedTop: false, + + /** + * sticky-item组件距离页面顶部的高度 + */ + stickyItemTop: 0, + + /** + * sticky-item组件自身的高度 + */ + stickyItemHeight: 0, + + /** + * sticky-item组件包装高度 + */ + stickyItemWrapperHeight: undefined + }, + + lifetimes: { + ready: function () { + // 设置显示模式 + const parent = this.getParentComponet(); + const mode = parent.data.mode; + this.setData({mode}); + } + }, + + methods: { + + /** + * 更新sticky-item组件的position属性 + * 判断sticky-item组件是否固定到顶部 + * @param {Number} scrollTop 页面垂直滚动距离 + */ + updateStickyItemPosition(scrollTop) { + const parent = this.getParentComponet(); + const {index, stickyItemTop, stickyItemHeight, top} = this.data; + const isFixedTop = scrollTop > stickyItemTop - top && scrollTop < stickyItemHeight + stickyItemTop - top; + + // 避免频繁setData + if (this.data.isFixedTop === isFixedTop) { + return; + } + + if (isFixedTop) { + // 触发吸附事件 + parent.triggerEvent('linsticky', {index}); + } else { + // 触发脱落事件 + parent.triggerEvent('linunsticky', {index}); + } + + this.setData({isFixedTop}); + }, + + + /** + * 更新sticky-item组件的基础数据 + * @param {Number} index 当前sticky-item的索引值 + */ + updateStickyItemBaseData(index) { + // 设置索引值 + this.setData({index}); + // 从父级组件获取页面垂直滚动距离 + const parent = this.getParentComponet(); + const scrollTop = parent.data.scrollTop; + + + const query = wx.createSelectorQuery().in(this); + + /** + * 设置sticky-item组件距页面顶部的距离 + * 和sticky-item组件的高度 + */ + query + .select('.l-sticky-item') + .boundingClientRect((res) => { + this.setData({ + stickyItemTop: res.top + scrollTop, + stickyItemHeight: res.height + }); + }).exec(); + + // 设置sticky-item-header外层容器高度 + query + .select('.l-sticky-item-header') + .boundingClientRect((res) => { + this.setData({ + stickyItemWrapperHeight: res.height + }); + }).exec(); + }, + + /** + * 获取父级组件-sticky实例 + */ + getParentComponet() { + const stickys = this.getRelationNodes('../sticky/index'); + if (stickys.length === 0) { + return; + } + return stickys[0]; + } + } +}); diff --git a/src/sticky-item/index.json b/src/sticky-item/index.json new file mode 100644 index 00000000..e8cfaaf8 --- /dev/null +++ b/src/sticky-item/index.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/src/sticky-item/index.less b/src/sticky-item/index.less new file mode 100644 index 00000000..5191aeb6 --- /dev/null +++ b/src/sticky-item/index.less @@ -0,0 +1,25 @@ +.l-sticky-item{ + display: flex; + flex-direction: column; +} + +.l-sticky-wrapper{ + overflow: visible; +} + +.l-sticky-item-header{ + width: 100%; +} + +.l-sticky-item-header-fixed{ + position: fixed; + top: 0; +} + +/* 判断当前webview内核是否支持sticky属性 */ +@supports(position: sticky){ + .l-sticky-item-header-sticky{ + position: sticky; + } +} + diff --git a/src/sticky-item/index.wxml b/src/sticky-item/index.wxml new file mode 100644 index 00000000..1a2921a7 --- /dev/null +++ b/src/sticky-item/index.wxml @@ -0,0 +1,16 @@ + + + + + + + + + + diff --git a/src/sticky/index.js b/src/sticky/index.js new file mode 100644 index 00000000..94bc2265 --- /dev/null +++ b/src/sticky/index.js @@ -0,0 +1,150 @@ +import validator from '../behaviors/validator'; +Component({ + externalClasses: ['l-class'], + behaviors: [validator], + relations: { + '../sticky-item/index': { + type: 'child', + linked() { + this.checkSupportCssSticky().then((isSupportCssSticky) => { + if (!isSupportCssSticky) { + this.updateStickyItemsSizeData(); + } + }); + }, + linkChanged() { + this.checkSupportCssSticky().then((isSupportCssSticky) => { + if (!isSupportCssSticky) { + this.updateStickyItemsSizeData(); + } + }); + }, + unlinked() { + this.checkSupportCssSticky().then((isSupportCssSticky) => { + if (!isSupportCssSticky) { + this.updateStickyItemsSizeData(); + } + }); + } + } + }, + + properties: { + /** + * 吸顶容器实现模式 + * js - 使用js实现 + * css - 使用css实现，若不支持css，则回滚到js模式 + */ + mode: { + type: String, + value: 'js', + options: ['js', 'css'] + }, + + /** + * 页面垂直滚动的距离 + */ + scrollTop: Number, + }, + + observers: { + /** + * 监听页面滚动，实时更新吸顶容器位置 + */ + 'scrollTop': function () { + this.checkSupportCssSticky().then((isSupportCssSticky) => { + if (!isSupportCssSticky) { + this.updateStickyItemsPosition(); + } + }); + } + }, + + lifetimes: { + attached() { + this.checkSupportCssSticky().then((isSupportCssSticky) => { + if (!isSupportCssSticky) { + this.initSticky(); + } + }); + } + }, + + methods: { + + /** + * 创建wx.lin函数 + */ + initSticky() { + wx.lin = wx.lin || {}; + wx.lin.flushSticky = () => { + this.updateStickyItemsSizeData(); + }; + + // 传入scrollTop的值的函数 + wx.lin.setScrollTop = (scrollTop) => { + this.data.scrollTop = scrollTop; + this.checkSupportCssSticky().then((isSupportCssSticky) => { + if (!isSupportCssSticky) { + this.updateStickyItemsPosition(); + } + }); + }; + }, + + /** + * 更新所有sticky-item组件的position属性 + */ + updateStickyItemsPosition() { + const stickyItemNodes = this.getStickyItemNodes(); + for (let stickyItemNode of stickyItemNodes) { + stickyItemNode.updateStickyItemPosition(this.data.scrollTop); + } + }, + + /** + * 更新所有sticky-item组件的基础数据 + */ + updateStickyItemsSizeData() { + const stickyItemNodes = this.getStickyItemNodes(); + stickyItemNodes.forEach((item, index) => { + item.updateStickyItemBaseData(index); + }); + }, + + /** + * 获取所有的sticky-item组件 + * @return {Object} sticky-item组件集合 + */ + getStickyItemNodes() { + return this.getRelationNodes('../sticky-item/index'); + }, + + /** + * 检测当前webview内核是否支持css设置sticky + * @return {Boolean} css是否支持设置sticky + */ + checkSupportCssSticky() { + return new Promise((resolve) => { + const stickyItemNodes = this.getStickyItemNodes(); + if (stickyItemNodes.length == 0) { + resolve(false); + } + + // 根据position判断是否支持position:sticky + wx + .createSelectorQuery() + .in(stickyItemNodes[0]) + .select('.l-sticky-item-header') + .fields({computedStyle: ['position']}) + .exec((res) => { + if (res[0] === null) { + resolve(false); + } else { + resolve(res[0].position === 'sticky'); + } + }); + }); + }, + } +}); diff --git a/src/sticky/index.json b/src/sticky/index.json new file mode 100644 index 00000000..e8cfaaf8 --- /dev/null +++ b/src/sticky/index.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/src/sticky/index.less b/src/sticky/index.less new file mode 100644 index 00000000..e69de29b diff --git a/src/sticky/index.wxml b/src/sticky/index.wxml new file mode 100644 index 00000000..39b9072a --- /dev/null +++ b/src/sticky/index.wxml @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/tag/index.js b/src/tag/index.js index 5c89e6cc..3cac429d 100644 --- a/src/tag/index.js +++ b/src/tag/index.js @@ -1,13 +1,17 @@ +import validator from '../behaviors/validator'; + Component({ externalClasses: ['l-class', 'l-select-class', 'l-image-class'], + behaviors: [validator], properties: { // 标签标识 name: String, cell: Object, // 标签颜色 - type:{ + type: { type: String, - value: 'touch' + value: 'touch', + options: ['reading', 'touch'] }, bgColor: String, fontColor: String, @@ -15,7 +19,8 @@ Component({ // 标签形状 shape: { type: String, - value: 'square' + value: 'square', + options: ['square', 'circle'] }, // 是否为选中态 select: Boolean, @@ -24,11 +29,13 @@ Component({ // 标签大小 size: { type: String, - value: 'medium' + value: 'medium', + options: ['large', 'medium', 'mini', 'super-mini'] }, location: { type: String, - value: 'left' + value: 'left', + options: ['left', 'right'] }, icon: String, iconSize: {