diff --git a/.eslintrc b/.eslintrc index fd846200b092825aeaa6a15f5a0893572e1eef3b..3f77ecdf098ceed80f0c09f1626d722d72d4714c 100644 --- a/.eslintrc +++ b/.eslintrc @@ -24,7 +24,8 @@ "Page": true, "wx": true, "App": true, - "getCurrentPages":true + "getCurrentPages":true, + "Behavior": true }, "ignorePatterns": [ "dist/*", diff --git a/.github/ISSUE_TEMPLATE/bug-report.md b/.github/ISSUE_TEMPLATE/bug-report.md index c71007179d967e01c5f4cfcf6039f47d9f05cf24..2879700e0aaeea3751ee82f62b08cb981d202671 100644 --- a/.github/ISSUE_TEMPLATE/bug-report.md +++ b/.github/ISSUE_TEMPLATE/bug-report.md @@ -22,6 +22,9 @@ assignees: '' **微信小程序基础库版本:** + +**微信开发者工具版本:** + **问题描述及重现步骤:** **相关截图**: diff --git a/README.md b/README.md index 4ae32382db35c175a2b1ecda6b913598faac5465..1ac752918d7fc3812477762169fd4588532a35e6 100644 --- a/README.md +++ b/README.md @@ -32,26 +32,6 @@ --- -:collision::collision::collision:**林间有风团队招人啦**:collision::collision::collision: - -林间有风是一个致力于让 Web 开发变得简单而优雅的开源团队。 -目前团队的两款产品 Lin CMS 和 Lin UI 在 Github Star 均为 2000+ - -我们希望你: -1. 真正热爱开源,热爱编程,对开源有自己的理解 -2. 熟悉微信小程序官网文档和开发规范 -3. 熟悉 JavaScript、ES6、Vue 等前端相关生态 -4. 如果上述技术栈和你不符,但你仍然很热爱开源的话,我们也欢迎你的加入 - -你将得到的: -1. 参与大型开源项目的开发,学习团队如何严格的遵循开发规范,并享受帮助其他开发者的乐趣。 -2. 从一名普通“码农”变成真正的开发者,从枯燥的业务开发中抽身,站在更底层的角度思考问题。 -3. 为你的简历增光添彩,一个优秀的开源项目能为你本身的能力背书,在求职时也是非常亮眼的一点 - -:mailbox:简历投递邮箱:juzi214032@qq.com,主题格式 林间有风+姓名+学生/在职 - ---- - ## 目录 - [目录](#目录) diff --git a/dist/core/behaviors/doNothingBehavior.js b/dist/core/behaviors/doNothingBehavior.js new file mode 100644 index 0000000000000000000000000000000000000000..1a29b3ea4e8eacc67ed4c731fa31e782f8e4926c --- /dev/null +++ b/dist/core/behaviors/doNothingBehavior.js @@ -0,0 +1 @@ +export default Behavior({methods:{doNothing(){}}}); \ No newline at end of file diff --git a/dist/input/index.js b/dist/input/index.js index e8c56c8e67db6671d8a4d189441faa3b7122d5a2..45f0c7bea95e2ddc6706a0f4afa5bb304ac5a0cf 100644 --- a/dist/input/index.js +++ b/dist/input/index.js @@ -1 +1 @@ -import eventBus from"../core/utils/event-bus.js";import validator from"../behaviors/validator";import rules from"../behaviors/rules";Component({options:{multipleSlots:!0},behaviors:["wx://form-field",validator,rules],externalClasses:["l-class","l-label-class","l-error-text","l-error-text-class","l-input-class","l-row-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:null},labelWidth:{type:Number,value:200},labelLayout:{type:String,value:"left",options:["left","right"]},disabled:Boolean,placeholderStyle:String,showEye:{type:Boolean,value:!1}},data:{},attached(){},methods:{handleInputChange(e){const{detail:t={}}=e,{value:a=""}=t;this.setData({value:a}),eventBus.emit("lin-form-change-"+this.id,this.id),this.triggerEvent("lininput",e.detail)},handleInputFocus(e){this.triggerEvent("linfocus",e.detail)},handleInputBlur(e){this.validatorData({[this.data.name]:e.detail.value}),eventBus.emit("lin-form-blur-"+this.id,this.id),this.triggerEvent("linblur",e.detail)},handleInputConfirm(e){const{detail:t={}}=e,{value:a=""}=t;this.setData({value:a}),this.triggerEvent("linconfirm",e.detail)},onClearTap(e){this.setData({value:""}),this.triggerEvent("linclear",e.detail)},getValues(){return this.data.value},reset(){this.setData({value:""})},onTapEyeIcon(){const e=this.data.type;"text"===e?this.setData({type:"password"}):"password"===e&&this.setData({type:"text"})}}}); \ No newline at end of file +import eventBus from"../core/utils/event-bus.js";import validator from"../behaviors/validator";import rules from"../behaviors/rules";Component({options:{multipleSlots:!0},behaviors:["wx://form-field",validator,rules],externalClasses:["l-class","l-label-class","l-error-text","l-error-text-class","l-input-class","l-row-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:null},labelWidth:{type:Number,value:200},labelLayout:{type:String,value:"left",options:["left","right"]},disabled:Boolean,placeholderStyle:String,showEye:{type:Boolean,value:!1},adjustPosition:{type:Boolean,value:!0}},data:{},attached(){},methods:{handleInputChange(e){const{detail:t={}}=e,{value:a=""}=t;this.setData({value:a}),eventBus.emit("lin-form-change-"+this.id,this.id),this.triggerEvent("lininput",e.detail)},handleInputFocus(e){this.triggerEvent("linfocus",e.detail)},handleInputBlur(e){this.validatorData({[this.data.name]:e.detail.value}),eventBus.emit("lin-form-blur-"+this.id,this.id),this.triggerEvent("linblur",e.detail)},handleInputConfirm(e){const{detail:t={}}=e,{value:a=""}=t;this.setData({value:a}),this.triggerEvent("linconfirm",e.detail)},onClearTap(e){this.setData({value:""}),this.triggerEvent("linclear",e.detail)},getValues(){return this.data.value},reset(){this.setData({value:""})},onTapEyeIcon(){const e=this.data.type;"text"===e?this.setData({type:"password"}):"password"===e&&this.setData({type:"text"})}}}); \ No newline at end of file diff --git a/dist/input/index.wxml b/dist/input/index.wxml index 08a37f78b238b4623a20155b9756482ad04d539f..3b34a8262cd103f7a9ae7cda0c32a74318bb353a 100644 --- a/dist/input/index.wxml +++ b/dist/input/index.wxml @@ -10,8 +10,8 @@ - - + + diff --git a/dist/popup/index.js b/dist/popup/index.js index 7dbb14a1d41d27fa5b4b0f4e4516c53e699f82c7..a006e6963d850e90125c2bcf20e8ecfe7b712f7e 100644 --- a/dist/popup/index.js +++ b/dist/popup/index.js @@ -1 +1 @@ -import zIndex from"../behaviors/zIndex";import validator from"../behaviors/validator";import eventUtil from"../core/utils/event-util";Component({behaviors:[zIndex,validator],externalClasses:["l-bg-class","l-panel-class","l-class"],properties:{show:{type:Boolean,value:!1},animation:{type:Boolean,value:!0},transition:{type:Boolean,value:null},contentAlign:{type:String,value:"center",options:["top","right","left","bottom","center"]},direction:{type:String,value:null,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:i="center",locked:a=!1}={...t};this.setData({zIndex:e,animation:o,contentAlign:i,locked:a,show:!0})},wx.lin.hidePopup=()=>{this.setData({status:"hide"}),setTimeout(()=>{this.setData({show:!1})},300)}},doNothingMove(){},doNothingTap(){},onPopupTap(){!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"})),eventUtil.emit(this,"lintap",!0)}}}); \ No newline at end of file +import zIndex from"../behaviors/zIndex";import validator from"../behaviors/validator";import eventUtil from"../core/utils/event-util";import doNothing from"../core/behaviors/doNothingBehavior";Component({behaviors:[zIndex,validator,doNothing],externalClasses:["l-bg-class","l-panel-class","l-class"],properties:{show:{type:Boolean,value:!1},animation:{type:Boolean,value:!0},transition:{type:Boolean,value:null},contentAlign:{type:String,value:"center",options:["top","right","left","bottom","center"]},direction:{type:String,value:null,options:["top","right","left","bottom","center"]},locked:{type:Boolean,value:!1}},attached(){this._init()},pageLifetimes:{show(){this._init()}},data:{status:"hide"},observers:{show(t){t&&this.setData({status:"show"})}},methods:{_init(){wx.lin=wx.lin||{},wx.lin.showPopup=t=>{console.warn("wx.lin 方法已废弃,请使用开放函数代替 https://doc.mini.talelin.com/start/open-function.html"),this.linShow(t)},wx.lin.hidePopup=()=>{console.warn("wx.lin 方法已废弃,请使用开放函数代替 https://doc.mini.talelin.com/start/open-function.html"),this.linHide()}},onPopupTap(){!0!==this.data.locked&&this._hidePopup(),eventUtil.emit(this,"lintap")},_hidePopup(){this.data.animation?(this.setData({status:"hide"}),setTimeout(()=>{this.setData({show:!1})},300)):this.setData({show:!1,status:"hide"})},linShow(t){const{zIndex:i=99,animation:o=!0,contentAlign:e="center",locked:n=!1}={...t};this.setData({zIndex:i,animation:o,contentAlign:e,locked:n,show:!0})},linHide(){this._hidePopup()}}}); \ No newline at end of file diff --git a/dist/popup/index.wxml b/dist/popup/index.wxml index e0753280c0d8ce21e46c002476d4aaaf8efc5ec2..55930c683e81af3bac297564ca3d7fef817240d3 100644 --- a/dist/popup/index.wxml +++ b/dist/popup/index.wxml @@ -1,7 +1,7 @@ - - - - + + + + diff --git a/dist/popup/index.wxss b/dist/popup/index.wxss index 1d80b7715afada15a2423509330d8fc1a3f306d4..5849fbb803b20249ebb34e03330e3aae1011bd7b 100644 --- a/dist/popup/index.wxss +++ b/dist/popup/index.wxss @@ -1 +1 @@ -.popup-fade-center-active-show{animation:popup-center-fadein .3s forwards}.popup-fade-center-active-hide{animation:popup-center-fadeout .3s forwards}.popup-fade-top-active-show{animation:popup-top-fadein .3s forwards}.popup-fade-top-active-hide{animation:popup-top-fadeout .3s forwards}.popup-fade-left-active-show{animation:popup-left-fadein .3s forwards}.popup-fade-left-active-hide{animation:popup-left-fadeout .3s forwards}.popup-fade-right-active-show{animation:popup-right-fadein .3s forwards}.popup-fade-right-active-hide{animation:popup-right-fadeout .3s forwards}.popup-fade-bottom-active-show{animation:popup-bottom-fadein .3s forwards}.popup-fade-bottom-active-hide{animation:popup-bottom-fadeout .3s forwards}@keyframes popup-top-fadein{0%{transform:translate3d(0,-100%,0);opacity:0}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-top-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,-100%,0);opacity:.1}}@keyframes popup-left-fadein{0%{transform:translate3d(-100%,0,0);opacity:0}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-left-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(-100%,0,0);opacity:.1}}@keyframes popup-right-fadein{0%{transform:translate3d(100%,0,0);opacity:0}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-right-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(100%,0,0);opacity:.1}}@keyframes popup-bottom-fadein{0%{transform:translate3d(0,100%,0);opacity:0}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-bottom-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,100%,0);opacity:.1}}@keyframes popup-center-fadein{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}@keyframes popup-center-fadeout{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1)}100%{transform:scale(.8);opacity:0}}.container-popup{visibility:hidden;position:fixed;top:0;left:0;right:0;bottom:0}.popup-show{visibility:visible}.popup-show .container-bg{display:block;opacity:1}.container-bg{opacity:0;position:fixed;top:0;left:0;right:0;bottom:0;z-index:6;background:rgba(0,0,0,.4);transition:all .3s ease-in-out}.popup-bg{height:100%;width:100%;position:absolute;z-index:90}.popup-content{position:absolute;z-index:100;width:100%;max-width:100%;height:100%}.center{display:flex;height:100%;width:100%;flex-direction:row;align-items:center;justify-content:center}.left{display:flex;flex-direction:row;height:100%}.right{display:flex;flex-direction:row;justify-content:flex-end;height:100%}.bottom{display:flex;flex-direction:column-reverse;width:100%} \ No newline at end of file +.popup-fade-center-active-show{animation:popup-center-fadein .3s forwards}.popup-fade-center-active-hide{animation:popup-center-fadeout .3s forwards}.popup-fade-top-active-show{animation:popup-top-fadein .3s forwards}.popup-fade-top-active-hide{animation:popup-top-fadeout .3s forwards}.popup-fade-left-active-show{animation:popup-left-fadein .3s forwards}.popup-fade-left-active-hide{animation:popup-left-fadeout .3s forwards}.popup-fade-right-active-show{animation:popup-right-fadein .3s forwards}.popup-fade-right-active-hide{animation:popup-right-fadeout .3s forwards}.popup-fade-bottom-active-show{animation:popup-bottom-fadein .3s forwards}.popup-fade-bottom-active-hide{animation:popup-bottom-fadeout .3s forwards}@keyframes popup-top-fadein{0%{transform:translate3d(0,-100%,0);opacity:0}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-top-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,-100%,0);opacity:.1}}@keyframes popup-left-fadein{0%{transform:translate3d(-100%,0,0);opacity:0}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-left-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(-100%,0,0);opacity:.1}}@keyframes popup-right-fadein{0%{transform:translate3d(100%,0,0);opacity:0}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-right-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(100%,0,0);opacity:.1}}@keyframes popup-bottom-fadein{0%{transform:translate3d(0,100%,0);opacity:0}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-bottom-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,100%,0);opacity:.1}}@keyframes popup-center-fadein{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}@keyframes popup-center-fadeout{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1)}100%{transform:scale(.8);opacity:0}}@keyframes bg-fadein{0%{opacity:0}100%{opacity:1}}@keyframes bg-fadeout{0%{opacity:1}100%{opacity:0}}.container-popup{position:fixed;top:0;left:0;right:0;bottom:0}.container-bg-show{animation:bg-fadein .3s forwards}.container-bg-hide{animation:bg-fadeout .3s forwards}.container-bg{display:block;position:fixed;top:0;left:0;right:0;bottom:0;z-index:6;background:rgba(0,0,0,.4)}.popup-content{position:absolute;z-index:100;width:100%;max-width:100%;height:100%}.center{display:flex;height:100%;width:100%;flex-direction:row;align-items:center;justify-content:center}.left{display:flex;flex-direction:row;height:100%}.right{display:flex;flex-direction:row;justify-content:flex-end;height:100%}.bottom{display:flex;flex-direction:column-reverse;width:100%} \ No newline at end of file diff --git a/examples/dist/core/behaviors/doNothingBehavior.js b/examples/dist/core/behaviors/doNothingBehavior.js new file mode 100644 index 0000000000000000000000000000000000000000..47969153d1bb01a09dd44b1bd9cca4bd8b61b415 --- /dev/null +++ b/examples/dist/core/behaviors/doNothingBehavior.js @@ -0,0 +1,8 @@ +// 定义一个空内容函数,用于阻止事件冒泡 + +export default Behavior({ + methods: { + doNothing() { + } + } +}); diff --git a/examples/dist/input/index.js b/examples/dist/input/index.js index b6a46852109f5aaf472f8e8827eaee342bbf495d..378c9ec7262090b72aadb85d423a30343fd2ae28 100644 --- a/examples/dist/input/index.js +++ b/examples/dist/input/index.js @@ -71,6 +71,11 @@ Component({ showEye: { type: Boolean, value: false + }, + // 键盘弹起时,是否自动上推页面 + adjustPosition:{ + type: Boolean, + value: true } }, diff --git a/examples/dist/input/index.wxml b/examples/dist/input/index.wxml index 72703fb1a23fbfcf2fe31dbf50ca930513bf4550..30b7672609e425f667fa606ce07a4c5d9fad74c7 100644 --- a/examples/dist/input/index.wxml +++ b/examples/dist/input/index.wxml @@ -14,6 +14,7 @@ { - const { - zIndex = 99, - animation = true, - contentAlign = 'center', - locked = false - } = {...options}; - this.setData({ - zIndex, - animation, - contentAlign, - locked, - show: true - }); + console.warn('wx.lin 方法已废弃,请使用开放函数代替 https://doc.mini.talelin.com/start/open-function.html'); + this.linShow(options); }; wx.lin.hidePopup = () => { + console.warn('wx.lin 方法已废弃,请使用开放函数代替 https://doc.mini.talelin.com/start/open-function.html'); + this.linHide(); + }; + }, + + // 点击事件 + onPopupTap() { + if (this.data.locked !== true) { + this._hidePopup(); + } + + eventUtil.emit(this, 'lintap'); + }, + + _hidePopup(){ + if(this.data.animation){ this.setData({ status: 'hide' }); + // 延迟 300ms 等动画结束再去掉节点 setTimeout(() => { this.setData({ show: false }); }, 300); - }; - }, - // 阻止滑动 - doNothingMove() { - // do nothing…… - }, - doNothingTap() { - // do nathing + }else{ + this.setData({ + show: false, + status: 'hide' + }); + } }, - // 点击事件 - onPopupTap() { - let detail = true; - if (this.data.locked !== true) { - if (!this.data.show) { - this.setData({ - show: true, - status: 'show' - }); - } else { - this.setData({ - status: 'hide' - }); - setTimeout(() => { - this.setData({ - show: false, - status: 'show' - }); - }, 300); - } - } + // ================= 开放函数 ======================== + /** + * 显示 Popup + */ + linShow(options) { + const { + zIndex = 99, + animation = true, + contentAlign = 'center', + locked = false + } = {...options}; + this.setData({ + zIndex, + animation, + contentAlign, + locked, + show: true + }); + }, - eventUtil.emit(this,'lintap', detail); + /** + * 隐藏 Popup + * 会忽略 locked 属性 + */ + linHide() { + this._hidePopup(); } } }); diff --git a/examples/dist/popup/index.wxml b/examples/dist/popup/index.wxml index c56ed1eedc70db2c61f3fecf0904518258892755..a28fa38e968853004abeb95aff03d4061ce2913c 100644 --- a/examples/dist/popup/index.wxml +++ b/examples/dist/popup/index.wxml @@ -1,12 +1,11 @@ - - + catchtouchmove="doNothing"> + - + diff --git a/examples/dist/popup/index.wxss b/examples/dist/popup/index.wxss index 1d80b7715afada15a2423509330d8fc1a3f306d4..5849fbb803b20249ebb34e03330e3aae1011bd7b 100644 --- a/examples/dist/popup/index.wxss +++ b/examples/dist/popup/index.wxss @@ -1 +1 @@ -.popup-fade-center-active-show{animation:popup-center-fadein .3s forwards}.popup-fade-center-active-hide{animation:popup-center-fadeout .3s forwards}.popup-fade-top-active-show{animation:popup-top-fadein .3s forwards}.popup-fade-top-active-hide{animation:popup-top-fadeout .3s forwards}.popup-fade-left-active-show{animation:popup-left-fadein .3s forwards}.popup-fade-left-active-hide{animation:popup-left-fadeout .3s forwards}.popup-fade-right-active-show{animation:popup-right-fadein .3s forwards}.popup-fade-right-active-hide{animation:popup-right-fadeout .3s forwards}.popup-fade-bottom-active-show{animation:popup-bottom-fadein .3s forwards}.popup-fade-bottom-active-hide{animation:popup-bottom-fadeout .3s forwards}@keyframes popup-top-fadein{0%{transform:translate3d(0,-100%,0);opacity:0}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-top-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,-100%,0);opacity:.1}}@keyframes popup-left-fadein{0%{transform:translate3d(-100%,0,0);opacity:0}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-left-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(-100%,0,0);opacity:.1}}@keyframes popup-right-fadein{0%{transform:translate3d(100%,0,0);opacity:0}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-right-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(100%,0,0);opacity:.1}}@keyframes popup-bottom-fadein{0%{transform:translate3d(0,100%,0);opacity:0}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-bottom-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,100%,0);opacity:.1}}@keyframes popup-center-fadein{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}@keyframes popup-center-fadeout{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1)}100%{transform:scale(.8);opacity:0}}.container-popup{visibility:hidden;position:fixed;top:0;left:0;right:0;bottom:0}.popup-show{visibility:visible}.popup-show .container-bg{display:block;opacity:1}.container-bg{opacity:0;position:fixed;top:0;left:0;right:0;bottom:0;z-index:6;background:rgba(0,0,0,.4);transition:all .3s ease-in-out}.popup-bg{height:100%;width:100%;position:absolute;z-index:90}.popup-content{position:absolute;z-index:100;width:100%;max-width:100%;height:100%}.center{display:flex;height:100%;width:100%;flex-direction:row;align-items:center;justify-content:center}.left{display:flex;flex-direction:row;height:100%}.right{display:flex;flex-direction:row;justify-content:flex-end;height:100%}.bottom{display:flex;flex-direction:column-reverse;width:100%} \ No newline at end of file +.popup-fade-center-active-show{animation:popup-center-fadein .3s forwards}.popup-fade-center-active-hide{animation:popup-center-fadeout .3s forwards}.popup-fade-top-active-show{animation:popup-top-fadein .3s forwards}.popup-fade-top-active-hide{animation:popup-top-fadeout .3s forwards}.popup-fade-left-active-show{animation:popup-left-fadein .3s forwards}.popup-fade-left-active-hide{animation:popup-left-fadeout .3s forwards}.popup-fade-right-active-show{animation:popup-right-fadein .3s forwards}.popup-fade-right-active-hide{animation:popup-right-fadeout .3s forwards}.popup-fade-bottom-active-show{animation:popup-bottom-fadein .3s forwards}.popup-fade-bottom-active-hide{animation:popup-bottom-fadeout .3s forwards}@keyframes popup-top-fadein{0%{transform:translate3d(0,-100%,0);opacity:0}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-top-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,-100%,0);opacity:.1}}@keyframes popup-left-fadein{0%{transform:translate3d(-100%,0,0);opacity:0}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-left-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(-100%,0,0);opacity:.1}}@keyframes popup-right-fadein{0%{transform:translate3d(100%,0,0);opacity:0}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-right-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(100%,0,0);opacity:.1}}@keyframes popup-bottom-fadein{0%{transform:translate3d(0,100%,0);opacity:0}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-bottom-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,100%,0);opacity:.1}}@keyframes popup-center-fadein{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}@keyframes popup-center-fadeout{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1)}100%{transform:scale(.8);opacity:0}}@keyframes bg-fadein{0%{opacity:0}100%{opacity:1}}@keyframes bg-fadeout{0%{opacity:1}100%{opacity:0}}.container-popup{position:fixed;top:0;left:0;right:0;bottom:0}.container-bg-show{animation:bg-fadein .3s forwards}.container-bg-hide{animation:bg-fadeout .3s forwards}.container-bg{display:block;position:fixed;top:0;left:0;right:0;bottom:0;z-index:6;background:rgba(0,0,0,.4)}.popup-content{position:absolute;z-index:100;width:100%;max-width:100%;height:100%}.center{display:flex;height:100%;width:100%;flex-direction:row;align-items:center;justify-content:center}.left{display:flex;flex-direction:row;height:100%}.right{display:flex;flex-direction:row;justify-content:flex-end;height:100%}.bottom{display:flex;flex-direction:column-reverse;width:100%} \ No newline at end of file diff --git a/examples/pages/components/view/pages/popup/pupop-nav.js b/examples/pages/components/view/pages/popup/pupop-nav.js index cffb4f8973537fbe8c1a891a85d3254fa3628015..11a0dab51f8f112c14e70e76b2543a958592eb79 100644 --- a/examples/pages/components/view/pages/popup/pupop-nav.js +++ b/examples/pages/components/view/pages/popup/pupop-nav.js @@ -3,7 +3,7 @@ const pupopNaviConfigs = [{ type: 0, config: { show: true, - animation: 'show', + animation: true, zIndex: 99, contentAlign: 'center', locked: false, @@ -14,7 +14,7 @@ const pupopNaviConfigs = [{ type: 1, config: { show: true, - animation: 'hide', + animation: false, zIndex: 99, contentAlign: 'center', locked: false, @@ -26,7 +26,7 @@ const pupopNaviConfigs = [{ type: 2, config: { show: true, - animation: 'show', + animation: true, zIndex: 99, contentAlign: 'top', locked: false, @@ -37,7 +37,7 @@ const pupopNaviConfigs = [{ type: 3, config: { show: true, - animation: 'show', + animation: true, zIndex: 99, contentAlign: 'right', locked: false, @@ -48,7 +48,7 @@ const pupopNaviConfigs = [{ type: 4, config: { show: true, - animation: 'show', + animation: true, zIndex: 99, contentAlign: 'bottom', locked: false, @@ -59,7 +59,7 @@ const pupopNaviConfigs = [{ type: 5, config: { show: true, - animation: 'show', + animation: true, zIndex: 99, contentAlign: 'left', locked: false, @@ -70,7 +70,7 @@ const pupopNaviConfigs = [{ type: 6, config: { show: true, - animation: 'show', + animation: true, zIndex: 99, contentAlign: 'bottom', locked: true, diff --git a/src/core/behaviors/doNothingBehavior.js b/src/core/behaviors/doNothingBehavior.js new file mode 100644 index 0000000000000000000000000000000000000000..47969153d1bb01a09dd44b1bd9cca4bd8b61b415 --- /dev/null +++ b/src/core/behaviors/doNothingBehavior.js @@ -0,0 +1,8 @@ +// 定义一个空内容函数,用于阻止事件冒泡 + +export default Behavior({ + methods: { + doNothing() { + } + } +}); diff --git a/src/input/index.js b/src/input/index.js index b6a46852109f5aaf472f8e8827eaee342bbf495d..378c9ec7262090b72aadb85d423a30343fd2ae28 100644 --- a/src/input/index.js +++ b/src/input/index.js @@ -71,6 +71,11 @@ Component({ showEye: { type: Boolean, value: false + }, + // 键盘弹起时,是否自动上推页面 + adjustPosition:{ + type: Boolean, + value: true } }, diff --git a/src/input/index.wxml b/src/input/index.wxml index 72703fb1a23fbfcf2fe31dbf50ca930513bf4550..30b7672609e425f667fa606ce07a4c5d9fad74c7 100644 --- a/src/input/index.wxml +++ b/src/input/index.wxml @@ -14,6 +14,7 @@ { - const { - zIndex = 99, - animation = true, - contentAlign = 'center', - locked = false - } = {...options}; - this.setData({ - zIndex, - animation, - contentAlign, - locked, - show: true - }); + console.warn('wx.lin 方法已废弃,请使用开放函数代替 https://doc.mini.talelin.com/start/open-function.html'); + this.linShow(options); }; wx.lin.hidePopup = () => { + console.warn('wx.lin 方法已废弃,请使用开放函数代替 https://doc.mini.talelin.com/start/open-function.html'); + this.linHide(); + }; + }, + + // 点击事件 + onPopupTap() { + if (this.data.locked !== true) { + this._hidePopup(); + } + + eventUtil.emit(this, 'lintap'); + }, + + _hidePopup(){ + if(this.data.animation){ this.setData({ status: 'hide' }); + // 延迟 300ms 等动画结束再去掉节点 setTimeout(() => { this.setData({ show: false }); }, 300); - }; - }, - // 阻止滑动 - doNothingMove() { - // do nothing…… - }, - doNothingTap() { - // do nathing + }else{ + this.setData({ + show: false, + status: 'hide' + }); + } }, - // 点击事件 - onPopupTap() { - let detail = true; - if (this.data.locked !== true) { - if (!this.data.show) { - this.setData({ - show: true, - status: 'show' - }); - } else { - this.setData({ - status: 'hide' - }); - setTimeout(() => { - this.setData({ - show: false, - status: 'show' - }); - }, 300); - } - } + // ================= 开放函数 ======================== + /** + * 显示 Popup + */ + linShow(options) { + const { + zIndex = 99, + animation = true, + contentAlign = 'center', + locked = false + } = {...options}; + this.setData({ + zIndex, + animation, + contentAlign, + locked, + show: true + }); + }, - eventUtil.emit(this,'lintap', detail); + /** + * 隐藏 Popup + * 会忽略 locked 属性 + */ + linHide() { + this._hidePopup(); } } }); diff --git a/src/popup/index.less b/src/popup/index.less index 3b55fb5242175e090ed27c698cf7a77b70ff6732..d3b2f04d3fda09b820737a2ae6f58b2a4b6172dc 100644 --- a/src/popup/index.less +++ b/src/popup/index.less @@ -77,8 +77,27 @@ each(@animationPostions,{ } } +@keyframes bg-fadein { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@keyframes bg-fadeout { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + } +} + .container-popup { - visibility: hidden; position: fixed; top: 0; left: 0; @@ -86,17 +105,16 @@ each(@animationPostions,{ bottom: 0; } -.popup-show { - visibility: visible; +.container-bg-show { + animation: bg-fadein 0.3s forwards; } -.popup-show .container-bg { - display: block; - opacity: 1; +.container-bg-hide { + animation: bg-fadeout 0.3s forwards; } .container-bg { - opacity: 0; + display: block; position: fixed; top: 0; left: 0; @@ -104,14 +122,6 @@ each(@animationPostions,{ bottom: 0; z-index: 6; background: rgba(0, 0, 0, 0.4); - transition: all 0.3s ease-in-out; -} - -.popup-bg { - height: 100%; - width: 100%; - position: absolute; - z-index: 90; } .popup-content { diff --git a/src/popup/index.wxml b/src/popup/index.wxml index c56ed1eedc70db2c61f3fecf0904518258892755..a28fa38e968853004abeb95aff03d4061ce2913c 100644 --- a/src/popup/index.wxml +++ b/src/popup/index.wxml @@ -1,12 +1,11 @@ - - + catchtouchmove="doNothing"> + - +