From 94e7353eac0eab03f8ef5f979109f0f2befa1438 Mon Sep 17 00:00:00 2001 From: cunjinli <562275936@qq.com> Date: Thu, 24 Oct 2019 10:02:24 +0800 Subject: [PATCH] =?UTF-8?q?v0.2=E7=89=88=E6=9C=AC=E6=9B=B4=E6=96=B0:=201.?= =?UTF-8?q?=20fix=20bug=202.=20=E3=80=90=E5=A2=9E=E5=BC=BA=E3=80=91=20?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=BB=84=E4=BB=B6=20form-page=20=E8=A1=A8?= =?UTF-8?q?=E5=8D=95=E9=A1=B5=203.=20=E3=80=90=E5=A2=9E=E5=BC=BA=E3=80=91?= =?UTF-8?q?=20=E5=A2=9E=E5=8A=A0=E7=BB=84=E4=BB=B6=20actionsheet=20?= =?UTF-8?q?=E6=A8=A1=E6=8B=9F=E5=8E=9F=E7=94=9Factionsheet=204.=20?= =?UTF-8?q?=E3=80=90=E4=BC=98=E5=8C=96=E3=80=91=20=E4=BC=98=E5=8C=96=20sli?= =?UTF-8?q?deview=20=E5=8F=B3=E6=BB=91=E6=93=8D=E4=BD=9CUI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/actionsheet/actionsheet.json | 4 + src/actionsheet/actionsheet.less | 13 + src/actionsheet/actionsheet.ts | 71 +++ src/actionsheet/actionsheet.wxml | 50 ++ src/badge/badge.json | 1 + src/cell/cell.ts | 16 + src/cell/cell.wxml | 12 +- src/cells/cells.ts | 19 +- src/cells/cells.wxml | 8 +- src/checkbox-group/checkbox-group.ts | 7 + src/checkbox/checkbox.wxml | 2 +- src/form-page/form-page.json | 4 + src/form-page/form-page.less | 3 + src/form-page/form-page.ts | 32 ++ src/form-page/form-page.wxml | 33 ++ src/form/form-validator.ts | 2 +- src/form/form.ts | 2 +- src/form/validator.ts | 4 + src/gallery/gallery.ts | 2 +- src/gallery/gallery.wxml | 2 +- .../half-screen-dialog.less | 25 + src/half-screen-dialog/half-screen-dialog.ts | 32 +- .../half-screen-dialog.wxml | 62 ++- src/icon/base64.ts | 61 +++ src/icon/icon.json | 4 + src/icon/icon.less | 14 + src/icon/icon.ts | 52 ++ src/icon/icon.wxml | 14 + src/icon/icondata.ts | 83 +++ src/index.json | 4 + src/searchbar/searchbar.ts | 33 +- src/slideview/slideview.ts | 27 +- src/slideview/slideview.wxml | 10 +- src/slideview/slideview.wxs | 98 +++- src/uploader/uploader.ts | 2 +- src/uploader/uploader.wxml | 2 +- tools/demo/app.json | 4 +- tools/demo/example/actionsheet/actionsheet.js | 24 +- .../demo/example/actionsheet/actionsheet.json | 7 +- .../demo/example/actionsheet/actionsheet.wxml | 15 +- .../demo/example/actionsheet/actionsheet.wxss | 16 +- tools/demo/example/cell/cell.wxml | 2 +- tools/demo/example/flex/flex.wxss | 2 +- tools/demo/example/form-page/form-page.js | 4 + tools/demo/example/form-page/form-page.json | 6 + tools/demo/example/form-page/form-page.wxml | 41 ++ tools/demo/example/form-page/form-page.wxss | 2 + tools/demo/example/form/form.js | 8 +- tools/demo/example/form/form.json | 1 + tools/demo/example/form/form.wxml | 204 ++++---- .../half-screen-dialog/half-screen-dialog.js | 39 ++ .../half-screen-dialog.json | 5 + .../half-screen-dialog.wxml | 39 ++ .../half-screen-dialog.wxss | 21 + tools/demo/example/icons/icons.js | 493 +++++++++++++++++- tools/demo/example/icons/icons.json | 4 +- tools/demo/example/icons/icons.wxml | 55 +- tools/demo/example/icons/icons.wxss | 41 +- tools/demo/example/index.js | 4 +- tools/demo/example/loading/loading.js | 5 + tools/demo/example/loading/loading.wxml | 1 + tools/demo/example/searchbar/searchbar.js | 6 +- tools/demo/example/slideview/slideview.wxml | 4 +- tools/demo/example/slideview/slideview.wxss | 4 +- 64 files changed, 1603 insertions(+), 264 deletions(-) create mode 100644 src/actionsheet/actionsheet.json create mode 100644 src/actionsheet/actionsheet.less create mode 100644 src/actionsheet/actionsheet.ts create mode 100644 src/actionsheet/actionsheet.wxml create mode 100644 src/form-page/form-page.json create mode 100644 src/form-page/form-page.less create mode 100644 src/form-page/form-page.ts create mode 100644 src/form-page/form-page.wxml create mode 100644 src/icon/base64.ts create mode 100644 src/icon/icon.json create mode 100644 src/icon/icon.less create mode 100644 src/icon/icon.ts create mode 100644 src/icon/icon.wxml create mode 100644 src/icon/icondata.ts create mode 100644 tools/demo/example/form-page/form-page.js create mode 100644 tools/demo/example/form-page/form-page.json create mode 100644 tools/demo/example/form-page/form-page.wxml create mode 100644 tools/demo/example/form-page/form-page.wxss create mode 100755 tools/demo/example/half-screen-dialog/half-screen-dialog.js create mode 100644 tools/demo/example/half-screen-dialog/half-screen-dialog.json create mode 100755 tools/demo/example/half-screen-dialog/half-screen-dialog.wxml create mode 100755 tools/demo/example/half-screen-dialog/half-screen-dialog.wxss diff --git a/src/actionsheet/actionsheet.json b/src/actionsheet/actionsheet.json new file mode 100644 index 0000000..e8cfaaf --- /dev/null +++ b/src/actionsheet/actionsheet.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/src/actionsheet/actionsheet.less b/src/actionsheet/actionsheet.less new file mode 100644 index 0000000..8ebd2b1 --- /dev/null +++ b/src/actionsheet/actionsheet.less @@ -0,0 +1,13 @@ +@import "../weui-wxss/src/style/widget/weui-tips/weui-mask.wxss"; +@import "../weui-wxss/src/style/widget/weui-tips/weui-actionsheet.wxss"; + +.weui-mask.weui-mask_hidden { + opacity: 0; + transform: scale3d(1, 1, 0) +} +.weui-mask{ + opacity: 1; + transform: scale3d(1, 1, 1); + transition: all 0.3s; +} + diff --git a/src/actionsheet/actionsheet.ts b/src/actionsheet/actionsheet.ts new file mode 100644 index 0000000..eaf4ce9 --- /dev/null +++ b/src/actionsheet/actionsheet.ts @@ -0,0 +1,71 @@ +Component({ + options: { + multipleSlots: true, // 在组件定义时的选项中启用多slot支持 + addGlobalClass: true + }, + properties: { + title: { // 标题 + type: String, + value: '' + }, + showCancel: { // 是否显示取消按钮 + type: Boolean, + value: true + }, + cancelText: { // 取消按钮文案 + type: String, + value: '取消' + }, + maskClass: { // 遮罩层class + type: String, + value: '' + }, + extClass: { // 弹出窗 class + type: String, + value: '' + }, + maskClosable: { // 点击遮罩 关闭 actionsheet + type: Boolean, + value: true, + }, + mask: { // 是否需要 遮罩层 + type: Boolean, + value: true + }, + show: { // 是否开启 actionsheet + type: Boolean, + value: false + }, + actions: { // actions 列表 + type: Array, + value: [], // {text, extClass} + observer: '_groupChange' + } + }, + + methods: { + _groupChange(e) { + // 支持 一维数组 写法 + if(e.length > 0 && typeof e[0] !== 'string' && !(e[0] instanceof Array)) { + this.setData({ + actions: [this.data.actions] + }) + } + }, + buttonTap(e) { + const { value, groupindex, index } = e.currentTarget.dataset + this.triggerEvent('actiontap', { value, groupindex, index }) + }, + closeActionSheet(e) { + const { type } = e.currentTarget.dataset + if(this.data.maskClosable || type) { + // 点击 action 里面的 取消 + this.setData({ + show: false + }) + // 关闭回调事件 + this.triggerEvent('close') + } + } + } +}) diff --git a/src/actionsheet/actionsheet.wxml b/src/actionsheet/actionsheet.wxml new file mode 100644 index 0000000..62d10f7 --- /dev/null +++ b/src/actionsheet/actionsheet.wxml @@ -0,0 +1,50 @@ + + var join = function(a,b) { + return a+b + }; + var isNotSlot = function(v) { + return typeof v !== 'string' + } + module.exports = { + join: join, + isNotSlot: isNotSlot + } + + + + + + + + {{title}} + + + + + + + {{item.text}} + + + + + + + {{cancelText}} + + diff --git a/src/badge/badge.json b/src/badge/badge.json index 3928faa..7e37c03 100755 --- a/src/badge/badge.json +++ b/src/badge/badge.json @@ -1,3 +1,4 @@ { + "component": true, "usingComponents": {} } \ No newline at end of file diff --git a/src/cell/cell.ts b/src/cell/cell.ts index 27ad2e1..43989a6 100644 --- a/src/cell/cell.ts +++ b/src/cell/cell.ts @@ -20,6 +20,10 @@ Component({ type: String, value: '' }, + bodyClass: { + type: String, + value: '' + }, icon: { type: String, value: '', @@ -55,6 +59,18 @@ Component({ inline: { // 左右布局样式还是上下布局 type: Boolean, value: true + }, + hasHeader: { + type: Boolean, + value: true + }, + hasFooter: { + type: Boolean, + value: true + }, + hasBody: { + type: Boolean, + value: true } }, relations: { diff --git a/src/cell/cell.wxml b/src/cell/cell.wxml index 5f7ee4a..6d61dbc 100644 --- a/src/cell/cell.wxml +++ b/src/cell/cell.wxml @@ -1,6 +1,6 @@ - + @@ -20,13 +20,13 @@ - + {{value}} - + {{footer}} @@ -36,7 +36,7 @@ - + @@ -56,13 +56,13 @@ - + {{value}} - + {{footer}} diff --git a/src/cells/cells.ts b/src/cells/cells.ts index d50966f..611bae9 100644 --- a/src/cells/cells.ts +++ b/src/cells/cells.ts @@ -20,7 +20,9 @@ Component({ data: { firstItem: null, checkboxCount: 0, - checkboxIsMulti: false + checkboxIsMulti: false, + outerClass: '', + childClass: '', }, relations: { '../cell/cell': { @@ -34,6 +36,9 @@ Component({ } }, }, + '../form-page/form-page': { + type: 'ancestor', + }, '../checkbox-group/checkbox-group': { type: 'descendant', linked(target) { @@ -55,6 +60,16 @@ Component({ this.setData({ checkboxIsMulti: multi }) - } + }, + setCellsClass(className) { + this.setData({ + childClass: className + }) + }, + setOuterClass(className) { + this.setData({ + outerClass: className + }) + }, } }) \ No newline at end of file diff --git a/src/cells/cells.wxml b/src/cells/cells.wxml index 8e126cb..8c2a6ed 100644 --- a/src/cells/cells.wxml +++ b/src/cells/cells.wxml @@ -1,8 +1,8 @@ - + {{title}} - + - {{footer}} - + {{footer}} + \ No newline at end of file diff --git a/src/checkbox-group/checkbox-group.ts b/src/checkbox-group/checkbox-group.ts index 14b9017..2ed1e30 100644 --- a/src/checkbox-group/checkbox-group.ts +++ b/src/checkbox-group/checkbox-group.ts @@ -54,6 +54,7 @@ Component({ if (!this.data.parentCell) { this.data.parentCell = target } + this.setParentCellsClass() }, unlinked(target) { this.data.parentCell = null; // 方便内存回收 @@ -85,6 +86,12 @@ Component({ this.triggerEvent('change', {value: val}, {}) } }, + setParentCellsClass() { + const className = this.data.multi ? 'weui-cells_checkbox' : '' + if (this.data.parentCell) { + this.data.parentCell.setCellsClass(className) + } + }, _multiChange(multi) { this.data.targetList.forEach(target => { target.setMulti(multi) diff --git a/src/checkbox/checkbox.wxml b/src/checkbox/checkbox.wxml index 6e1723f..342c472 100644 --- a/src/checkbox/checkbox.wxml +++ b/src/checkbox/checkbox.wxml @@ -1,4 +1,4 @@ - + diff --git a/src/form-page/form-page.json b/src/form-page/form-page.json new file mode 100644 index 0000000..e8cfaaf --- /dev/null +++ b/src/form-page/form-page.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/src/form-page/form-page.less b/src/form-page/form-page.less new file mode 100644 index 0000000..dde5cc7 --- /dev/null +++ b/src/form-page/form-page.less @@ -0,0 +1,3 @@ +@import "../weui-wxss/src/style/widget/weui-page/weui-form.wxss"; + + diff --git a/src/form-page/form-page.ts b/src/form-page/form-page.ts new file mode 100644 index 0000000..9e13c88 --- /dev/null +++ b/src/form-page/form-page.ts @@ -0,0 +1,32 @@ +Component({ + options: { + addGlobalClass: true, + multipleSlots: true, + }, + properties: { + title: { // Msg 标题 + type: String, + value: '', + }, + subtitle: { // icon 的 type + type: String, + value: '' + }, + }, + relations: { + '../cells/cells': { + type: 'descendant', + linked(target) { + if (!this.data.firstItem) { + this.data.firstItem = target + } + if (target !== this.data.firstItem) { + target.setOuterClass('weui-cells__group_wxss') + } + }, + }, + }, + data: { + firstItem: null + }, +}) \ No newline at end of file diff --git a/src/form-page/form-page.wxml b/src/form-page/form-page.wxml new file mode 100644 index 0000000..9f067aa --- /dev/null +++ b/src/form-page/form-page.wxml @@ -0,0 +1,33 @@ + + + + {{title}} + {{subtitle}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/form/form-validator.ts b/src/form/form-validator.ts index 3366336..e4ed6dc 100644 --- a/src/form/form-validator.ts +++ b/src/form/form-validator.ts @@ -5,7 +5,7 @@ const toString = Object.prototype.toString const validateSingleRule = (rule: any, value:any, param:any = null, models = null) => { let message = '' for (const ruleKey in rule) { - if (ruleKey === 'validator' || ruleKey === 'name' || ruleKey === 'message') continue + if (ruleKey === 'name' || ruleKey === 'message') continue const validateMethod = typeof rule.validator !== 'undefined' ? rule.validator : Validator[ruleKey] if (typeof validateMethod === 'function') { message = validateMethod(rule, value, param, models) diff --git a/src/form/form.ts b/src/form/form.ts index 42cf38e..bde44f6 100755 --- a/src/form/form.ts +++ b/src/form/form.ts @@ -34,7 +34,7 @@ Component({ observer: '_rulesChange' }, extClass: { - type: Boolean, + type: String, value: '' } }, diff --git a/src/form/validator.ts b/src/form/validator.ts index 179409e..4e75b8f 100644 --- a/src/form/validator.ts +++ b/src/form/validator.ts @@ -17,6 +17,7 @@ const defaultMessage = { } export default { required: (r, val, param, models) => { + if (r.required === false) return if (!val) return sprintf(r.message || defaultMessage.required, r.name) }, minlength: (r, val) => { @@ -47,10 +48,12 @@ export default { if (val < range[0] || val > range[1]) return sprintf(r.message || defaultMessage.range, range[0], range[1]) }, mobile: (r, val) => { + if (r.mobile === false) return val = val || '' if (val.length !== 11) return sprintf(r.message || defaultMessage.mobile) }, email: function( r, value ) { + if (r.email === false) return // contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/ if (!/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value)) { return sprintf(r.message || defaultMessage.email) @@ -59,6 +62,7 @@ export default { // http://docs.jquery.com/Plugins/Validation/Methods/url url: function( r, value ) { + if (r.url === false) return // contributed by Scott Gonzalez: http://projects.scottsplayground.com/iri/ if (!/^(https?|s?ftp|weixin):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value)) { return r.message || defaultMessage.url diff --git a/src/gallery/gallery.ts b/src/gallery/gallery.ts index 5a4ef2e..ef89d1a 100644 --- a/src/gallery/gallery.ts +++ b/src/gallery/gallery.ts @@ -10,7 +10,7 @@ Component({ this.setData({currentImgs: newVal}) } }, - delete: { // 是否显示delete按钮 + showDelete: { // 是否显示delete按钮 type: Boolean, value: true }, diff --git a/src/gallery/gallery.wxml b/src/gallery/gallery.wxml index 4f074fb..2529a71 100644 --- a/src/gallery/gallery.wxml +++ b/src/gallery/gallery.wxml @@ -7,7 +7,7 @@ - + 删除 diff --git a/src/half-screen-dialog/half-screen-dialog.less b/src/half-screen-dialog/half-screen-dialog.less index 30b023d..0ad92f0 100644 --- a/src/half-screen-dialog/half-screen-dialog.less +++ b/src/half-screen-dialog/half-screen-dialog.less @@ -1 +1,26 @@ @import "../weui-wxss/src/style/widget/weui-tips/weui-half-screen-dialog.wxss"; +@import "../weui-wxss/src/style/widget/weui-tips/weui-mask.wxss"; + +.weui-mask, .weui-half-screen-dialog { + transition: all .3s; +} + +.weui-hidden { + .weui-mask { + visibility: hidden; + opacity: 0; + } + .weui-half-screen-dialog { + transform: translateY(100%); + } +} + +.weui-show { + .weui-mask { + opacity: 1; + visibility: visible; + } + .weui-half-screen-dialog { + transform: translateY(0%); + } +} \ No newline at end of file diff --git a/src/half-screen-dialog/half-screen-dialog.ts b/src/half-screen-dialog/half-screen-dialog.ts index 67abcdc..3dcddbf 100644 --- a/src/half-screen-dialog/half-screen-dialog.ts +++ b/src/half-screen-dialog/half-screen-dialog.ts @@ -4,11 +4,15 @@ Component({ addGlobalClass: true, }, properties: { - title: { // 弹窗标题，也可以通过 slot 自定义 + closabled: { // 是否具有关闭标签 + type: Boolean, + value: true + }, + title: { // 标题，也可以通过 slot 自定义 type: String, value: '' }, - subTitle: { // 弹窗标题，也可以通过 slot 自定义 + subTitle: { // 副标题，也可以通过 slot 自定义 type: String, value: '' }, @@ -16,6 +20,14 @@ Component({ type: String, value: '' }, + desc: { + type: String, + value: '' + }, + tips: { + type: String, + value: '' + }, maskClosable: { type: Boolean, value: true, @@ -34,4 +46,20 @@ Component({ value: [] // {text, extClass} } }, + methods: { + close(e) { + const { type } = e.currentTarget.dataset + if(this.data.maskClosable || type === 'close') { + this.setData({ + show: false + }) + // 关闭弹窗回调事件 + this.triggerEvent('close') + } + }, + buttonTap(e) { + const { index } = e.currentTarget.dataset + this.triggerEvent('buttontap', {index, item: this.data.buttons[index]}, {}) + }, + } }) diff --git a/src/half-screen-dialog/half-screen-dialog.wxml b/src/half-screen-dialog/half-screen-dialog.wxml index ae4f5a9..7a74a5c 100644 --- a/src/half-screen-dialog/half-screen-dialog.wxml +++ b/src/half-screen-dialog/half-screen-dialog.wxml @@ -1,27 +1,43 @@ - - - - - 关闭 + + + + + + 关闭 + + + + {{title}} + {{subTitle}} + + + + + + + 更多 + - - 标题 - 标题 + + + {{desc}} + {{tips}} + + - - 更多 + + + + + + - - - 辅助描述内容，可根据实际需要安排 - - - 辅助提示内容，可根据实际需要安排 - - - - - - - + \ No newline at end of file diff --git a/src/icon/base64.ts b/src/icon/base64.ts new file mode 100644 index 0000000..5b15e2d --- /dev/null +++ b/src/icon/base64.ts @@ -0,0 +1,61 @@ +var b64chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'; +var cb_encode = function(ccc) { + var padlen = [0, 2, 1][ccc.length % 3], + ord = ccc.charCodeAt(0) << 16 + | ((ccc.length > 1 ? ccc.charCodeAt(1) : 0) << 8) + | ((ccc.length > 2 ? ccc.charCodeAt(2) : 0)), + chars = [ + b64chars.charAt( ord >>> 18), + b64chars.charAt((ord >>> 12) & 63), + padlen >= 2 ? '=' : b64chars.charAt((ord >>> 6) & 63), + padlen >= 1 ? '=' : b64chars.charAt(ord & 63) + ]; + return chars.join(''); +}; +// @ts-ignore +var btoa = global.btoa ? function(b) { + // @ts-ignore + return global.btoa(b); +} : function(b) { + return b.replace(/[\s\S]{1,3}/g, cb_encode); +}; +var fromCharCode = String.fromCharCode; +var cb_utob = function(c) { + var cc + if (c.length < 2) { + cc = c.charCodeAt(0); + return cc < 0x80 ? c + : cc < 0x800 ? (fromCharCode(0xc0 | (cc >>> 6)) + + fromCharCode(0x80 | (cc & 0x3f))) + : (fromCharCode(0xe0 | ((cc >>> 12) & 0x0f)) + + fromCharCode(0x80 | ((cc >>> 6) & 0x3f)) + + fromCharCode(0x80 | ( cc & 0x3f))); + } else { + cc = 0x10000 + + (c.charCodeAt(0) - 0xD800) * 0x400 + + (c.charCodeAt(1) - 0xDC00); + return (fromCharCode(0xf0 | ((cc >>> 18) & 0x07)) + + fromCharCode(0x80 | ((cc >>> 12) & 0x3f)) + + fromCharCode(0x80 | ((cc >>> 6) & 0x3f)) + + fromCharCode(0x80 | ( cc & 0x3f))); + } +}; +var re_utob = /[\uD800-\uDBFF][\uDC00-\uDFFFF]|[^\x00-\x7F]/g; +var utob = function(u) { + return u.replace(re_utob, cb_utob); +}; +var _encode = function(u) { + const isUint8Array = Object.prototype.toString.call(u) === '[object Uint8Array]'; + return isUint8Array ? u.toString('base64') + : btoa(utob(String(u))); +} +var encode = function(u, urisafe = false) { + return !urisafe + ? _encode(u) + : _encode(String(u)).replace(/[+\/]/g, function(m0) { + return m0 == '+' ? '-' : '_'; + }).replace(/=/g, ''); +}; +export default { + encode +} \ No newline at end of file diff --git a/src/icon/icon.json b/src/icon/icon.json new file mode 100644 index 0000000..e8cfaaf --- /dev/null +++ b/src/icon/icon.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/src/icon/icon.less b/src/icon/icon.less new file mode 100644 index 0000000..ce7c63c --- /dev/null +++ b/src/icon/icon.less @@ -0,0 +1,14 @@ +.weui-icon { + vertical-align: middle; + display: inline-block; + background: black; + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + -moz-mask-repeat: no-repeat; + mask-size: cover; + -webkit-mask-size: cover; + -moz-mask-size: cover; +} +// .weui-icon { +// display: inline-block; +// } \ No newline at end of file diff --git a/src/icon/icon.ts b/src/icon/icon.ts new file mode 100644 index 0000000..bc2d673 --- /dev/null +++ b/src/icon/icon.ts @@ -0,0 +1,52 @@ +import Base64 from './base64' +import iconData from './icondata' + +Component({ + options: { + addGlobalClass: true + }, + properties: { + extClass: { + type: String, + value: '' + }, + type: { + type: String, + value: 'outline', + observer: '_genSrcByType' + }, + icon: { + type: String, + value: '', + observer: '_genSrcByIcon' + }, + size: { + type: Number, + value: 20 + }, + color: { + type: String, + value: '#000000' + } + }, + data: { + src: '', + height: 20, + width: 20, + }, + methods: { + _genSrcByIcon(v) { + this._genSrc(iconData[v][this.data.type]) + }, + _genSrcByType(v) { + this._genSrc(iconData[this.data.icon][v]) + }, + _genSrc(rawData) { + if(!rawData) return // type 不存在 + const base64 = Base64.encode(rawData) + this.setData({ + src: 'data:image/svg+xml;base64,' + base64 + }) + } + }, +}) diff --git a/src/icon/icon.wxml b/src/icon/icon.wxml new file mode 100644 index 0000000..dba5634 --- /dev/null +++ b/src/icon/icon.wxml @@ -0,0 +1,14 @@ + + var double = function(a) { + return 2*a + }; + var ifSpecialIcon = function(v) { + return v === 'arrow' || v === 'back' + } + module.exports = { + double: double, + ifSpecialIcon: ifSpecialIcon + } + + + diff --git a/src/icon/icondata.ts b/src/icon/icondata.ts new file mode 100644 index 0000000..0669844 --- /dev/null +++ b/src/icon/icondata.ts @@ -0,0 +1,83 @@ +export default { + "add-friends": { outline: `3.Icons/Outlined/add-friendsCreated with Sketch. `, field: ` 3.Icons/Filled/add-friends Created with Sketch. ` }, + "add": { outline: ` 3.Icons/Outlined/add Created with Sketch. `, field: ` 3.Icons/Filled/add Created with Sketch. ` }, + "add2": { outline: ` 3.Icons/Outlined/add2 Created with Sketch. `, field: ` 3.Icons/Filled/add2 Created with Sketch. ` }, + "album": { outline: ` 3.Icons/Outlined/album Created with Sketch. `, field: ` 3.Icons/Filled/album Created with Sketch. ` }, + "arrow": { outline: ` 3.Icons/Outlined/arrow Created with Sketch. `, field: ` 3.Icons/Filled/arrow Created with Sketch. ` }, + "at": { outline: ` 3.Icons/Outlined/at Created with Sketch. `, field: ` 3.Icons/Filled/at Created with Sketch. ` }, + "back": { outline: ` 3.Icons/Outlined/back Created with Sketch. `, field: ` 3.Icons/Filled/back Created with Sketch. ` }, + "back2": { outline: ` 3.Icons/Outlined/back2 Created with Sketch. `, field: ` 3.Icons/Filled/back2 Created with Sketch. ` }, + "bellring-off": { outline: ` 3.Icons/Outlined/bellring_off Created with Sketch. `, field: ` 3.Icons/Filled/bell-ring_off Created with Sketch. ` }, + "bellring-on": { outline: ` 3.Icons/Outlined/bellring_on Created with Sketch. `, field: ` 3.Icons/Filled/bell-ring_on Created with Sketch. ` }, + "camera": { outline: ` 3.Icons/Outlined/camera Created with Sketch. `, field: ` 3.Icons/Filled/camera Created with Sketch. ` }, + "cellphone": { outline: ` 3.Icons/Outlined/cellphone Created with Sketch. `, field: ` 3.Icons/Filled/cellphone Created with Sketch. ` }, + "clip": { outline: ` 3.Icons/Outlined/clip Created with Sketch. `, field: ` 3.Icons/Filled/clip Created with Sketch. ` }, + "close": { outline: ` 3.Icons/Outlined/close Created with Sketch. `, field: ` 3.Icons/Filled/close Created with Sketch. ` }, + "close2": { outline: ` 3.Icons/Outlined/close2 Created with Sketch. `, field: ` 3.Icons/Filled/close2 Created with Sketch. ` }, + "comment": { outline: ` 3.Icons/Outlined/comment Created with Sketch. `, field: ` 3.Icons/Filled/comment Created with Sketch. ` }, + "contacts": { outline: ` 3.Icons/Outlined/contacts Created with Sketch. `, field: ` 3.Icons/Filled/contacts Created with Sketch. ` }, + "copy": { outline: ` 3.Icons/Outlined/copy Created with Sketch. `, field: ` 3.Icons/Filled/copy Created with Sketch. ` }, + "delete-on": { outline: ` 3.Icons/Outlined/delete_on Created with Sketch. `, field: ` 3.Icons/Filled/delete_on Created with Sketch. ` }, + "delete": { outline: ` 3.Icons/Outlined/delete Created with Sketch. `, field: ` 3.Icons/Filled/delete Created with Sketch. ` }, + "discover": { outline: ` 3.Icons/Outlined/discover Created with Sketch. `, field: ` 3.Icons/Filled/discover Created with Sketch. ` }, + "display": { outline: ` 3.Icons/Outlined/display Created with Sketch. `, field: ` 3.Icons/Filled/display Created with Sketch. ` }, + "done": { outline: ` 3.Icons/Outlined/done Created with Sketch. `, field: ` 3.Icons/Filled/done Created with Sketch. ` }, + "done2": { outline: ` 3.Icons/Outlined/done2 Created with Sketch. `, field: ` 3.Icons/Filled/done2 Created with Sketch. ` }, + "download": { outline: ` 3.Icons/Outlined/download Created with Sketch. `, field: ` 3.Icons/Filled/download Created with Sketch. ` }, + "email": { outline: ` 3.Icons/Outlined/email Created with Sketch. `, field: ` 3.Icons/Filled/email Created with Sketch. ` }, + "error": { outline: ` 3.Icons/Outlined/error Created with Sketch. `, field: ` 3.Icons/Filled/error Created with Sketch. ` }, + "eyes-off": { outline: ` 3.Icons/Outlined/eyes_off Created with Sketch. `, field: ` 3.Icons/Filled/eyes_off Created with Sketch. ` }, + "eyes-on": { outline: ` 3.Icons/Outlined/eyes_on Created with Sketch. `, field: ` 3.Icons/Filled/eyes_on Created with Sketch. ` }, + "folder": { outline: ` 3.Icons/Outlined/folder Created with Sketch. `, field: ` 3.Icons/Filled/folder Created with Sketch. ` }, + "group-detail": { outline: ` 3.Icons/Outlined/group-detail Created with Sketch. `, field: ` 3.Icons/Filled/group-detail Created with Sketch. ` }, + "help": { outline: ` 3.Icons/Outlined/help Created with Sketch. `, field: ` 3.Icons/Filled/help Created with Sketch. ` }, + "home": { outline: ` 3.Icons/Outlined/home Created with Sketch. `, field: ` 3.Icons/Filled/home Created with Sketch. ` }, + "imac": { outline: ` 3.Icons/Outlined/imac Created with Sketch. `, field: ` 3.Icons/Filled/imac Created with Sketch. ` }, + "info": { outline: ` 3.Icons/Outlined/info Created with Sketch. `, field: ` 3.Icons/Filled/info Created with Sketch. ` }, + "keyboard": { outline: ` 3.Icons/Outlined/keyboard Created with Sketch. `, field: ` 3.Icons/Filled/keyboard Created with Sketch. ` }, + "like": { outline: ` 3.Icons/Outlined/like Created with Sketch. `, field: ` 3.Icons/Filled/like Created with Sketch. ` }, + "link": { outline: ` 3.Icons/Outlined/link Created with Sketch. `, field: ` 3.Icons/Filled/link Created with Sketch. ` }, + "location": { outline: ` 3.Icons/Outlined/location Created with Sketch. `, field: ` 3.Icons/Filled/location Created with Sketch. ` }, + "lock": { outline: ` 3.Icons/Outlined/lock Created with Sketch. `, field: ` 3.Icons/Filled/lock Created with Sketch. ` }, + "max-window": { outline: ` 3.Icons/Outlined/max-window Created with Sketch. `, field: ` 3.Icons/Filled/max-window Created with Sketch. ` }, + "me": { outline: ` 3.Icons/Outlined/me Created with Sketch. `, field: ` 3.Icons/Filled/me Created with Sketch. ` }, + "mike": { outline: ` 3.Icons/Outlined/mike Created with Sketch. `, field: ` 3.Icons/Filled/mike Created with Sketch. ` }, + "mike2": { outline: ` 3.Icons/Outlined/mike2 Created with Sketch. `, field: ` 3.Icons/Filled/mike2 Created with Sketch. ` }, + "mobile-contacts": { outline: ` 3.Icons/Outlined/mobile-contacts Created with Sketch. `, field: ` 3.Icons/Filled/mobile-contacts Created with Sketch. ` }, + "more": { outline: ` 3.Icons/Outlined/more Created with Sketch. `, field: ` 3.Icons/Filled/more Created with Sketch. ` }, + "more2": { outline: ` 3.Icons/Outlined/more2 Created with Sketch. `, field: ` 3.Icons/Filled/more2 Created with Sketch. ` }, + "mosaic": { outline: ` 3.Icons/Outlined/mosaic Created with Sketch. `, field: ` 3.Icons/Filled/mask Created with Sketch. ` }, + "music-off": { outline: ` 3.Icons/Outlined/music_off Created with Sketch. `, field: ` 3.Icons/Filled/music-off Created with Sketch. ` }, + "music": { outline: ` 3.Icons/Outlined/music Created with Sketch. `, field: ` 3.Icons/Filled/music Created with Sketch. ` }, + "note": { outline: ` 3.Icons/Outlined/note Created with Sketch. `, field: ` 3.Icons/Filled/note Created with Sketch. ` }, + "pad": { outline: ` 3.Icons/Outlined/pad Created with Sketch. `, field: ` 3.Icons/Filled/pad Created with Sketch. ` }, + "pause": { outline: ` 3.Icons/Outlined/pause Created with Sketch. `, field: ` 3.Icons/Filled/pause Created with Sketch. ` }, + "pencil": { outline: ` 3.Icons/Outlined/pencil Created with Sketch. `, field: ` 3.Icons/Filled/pencil Created with Sketch. ` }, + "photo-wall": { outline: ` 3.Icons/Outlined/photo-wall Created with Sketch. `, field: ` 3.Icons/Filled/photo-wall Created with Sketch. ` }, + "play": { outline: ` 3.Icons/Outlined/play Created with Sketch. `, field: ` 3.Icons/Filled/play Created with Sketch. ` }, + "play2": { outline: ` 3.Icons/Outlined/play2 Created with Sketch. `, field: ` 3.Icons/Filled/play2 Created with Sketch. ` }, + "previous": { outline: ` 3.Icons/Outlined/previous Created with Sketch. `, field: ` 3.Icons/Filled/previous Created with Sketch. ` }, + "previous2": { outline: ` 3.Icons/Outlined/previous2 Created with Sketch. `, field: ` 3.Icons/Filled/previous2 Created with Sketch. ` }, + "qr-code": { outline: ` 3.Icons/Outlined/qr-code Created with Sketch. `, field: ` 3.Icons/Filled/qr-code Created with Sketch. ` }, + "refresh": { outline: ` 3.Icons/Outlined/refresh Created with Sketch. `, field: ` 3.Icons/Filled/refresh Created with Sketch. ` }, + "report-problem": { outline: ` 3.Icons/Outlined/report_problem Created with Sketch. `, field: ` 3.Icons/Filled/report-problem Created with Sketch. ` }, + "search": { outline: ` 3.Icons/Outlined/search Created with Sketch. `, field: ` 3.Icons/Filled/search Created with Sketch. ` }, + "sending": { outline: ` 3.Icons/Outlined/sending Created with Sketch. `, field: ` 3.Icons/Filled/sending Created with Sketch. ` }, + "setting": { outline: ` 3.Icons/Outlined/setting Created with Sketch. `, field: ` 3.Icons/Filled/setting Created with Sketch. ` }, + "share": { outline: ` 3.Icons/Outlined/share Created with Sketch. `, field: ` 3.Icons/Filled/share Created with Sketch. ` }, + "shop": { outline: ` 3.Icons/Outlined/shop Created with Sketch. `, field: ` 3.Icons/Filled/shop Created with Sketch. ` }, + "star": { outline: ` 3.Icons/Outlined/star Created with Sketch. `, field: ` 3.Icons/Filled/star Created with Sketch. ` }, + "sticker": { outline: ` 3.Icons/Outlined/sticker Created with Sketch. `, field: ` 3.Icons/Filled/sticker Created with Sketch. ` }, + "tag": { outline: ` 3.Icons/Outlined/tag Created with Sketch. `, field: ` 3.Icons/Filled/tag Created with Sketch. ` }, + "text": { outline: ` 3.Icons/Outlined/text Created with Sketch. `, field: ` 3.Icons/Filled/text Created with Sketch. ` }, + "time": { outline: ` 3.Icons/Outlined/time Created with Sketch. `, field: ` 3.Icons/Filled/time Created with Sketch. ` }, + "transfer-text": { outline: ` 3.Icons/Outlined/transfer-text Created with Sketch. `, field: ` 3.Icons/Filled/transfer-text Created with Sketch. ` }, + "transfer2": { outline: ` 3.Icons/Outlined/transfer2 Created with Sketch. `, field: ` 3.Icons/Filled/transfer2 Created with Sketch. ` }, + "translate": { outline: ` 3.Icons/Outlined/translate Created with Sketch. `, field: ` 3.Icons/Filled/translate Created with Sketch. ` }, + "tv": { outline: ` 3.Icons/Outlined/tv Created with Sketch. `, field: ` 3.Icons/Filled/tv Created with Sketch. ` }, + "video-call": { outline: ` 3.Icons/Outlined/video-call Created with Sketch. `, field: ` 3.Icons/Filled/video-call Created with Sketch. ` }, + "voice": { outline: ` 3.Icons/Outlined/voice Created with Sketch. `, field: ` 3.Icons/Filled/voice Created with Sketch. ` }, + "volume-down": { outline: ` 3.Icons/Outlined/volume_down Created with Sketch. `, field: ` 3.Icons/Filled/volume-down Created with Sketch. ` }, + "volume-off": { outline: ` 3.Icons/Outlined/volume_off Created with Sketch. `, field: ` 3.Icons/Filled/volume-off Created with Sketch. ` }, + "volume-up": { outline: ` 3.Icons/Outlined/volume_up Created with Sketch. `, field: ` 3.Icons/Filled/volume-up Created with Sketch. ` }, +} \ No newline at end of file diff --git a/src/index.json b/src/index.json index 829e4ba..d3b37ef 100755 --- a/src/index.json +++ b/src/index.json @@ -1,12 +1,16 @@ { "usingComponents": { + "actionsheet": "./actionsheet/actionsheet", + "form-page": "./form-page/form-page", "navigation-bar": "./navigation-bar/navigation-bar", "form": "./form/form", "cell": "./cell/cell", + "icon": "./icon/icon", "toptips": "./toptips/toptips", "loading": "./loading/loading", "tabbar": "./tabbar/tabbar", "cells": "./cells/cells", + "half-screen-dialog": "./half-screen-dialog/half-screen-dialog", "slideview": "./slideview/slideview", "msg": "./msg/msg", "dialog": "./dialog/dialog", diff --git a/src/searchbar/searchbar.ts b/src/searchbar/searchbar.ts index b72c319..3b14e2c 100755 --- a/src/searchbar/searchbar.ts +++ b/src/searchbar/searchbar.ts @@ -42,7 +42,9 @@ Component({ }, lastSearch: Date.now(), lifetimes: { + // @ts-ignore attached() { + // @ts-ignore if (this.data.focus) { this.setData({ searchState: true, @@ -52,15 +54,22 @@ Component({ }, methods: { clearInput() { + // @ts-ignore this.setData({ value: '', }) + // @ts-ignore this.triggerEvent('clear') - this.inputChange({detail: {value: ''}}, true) }, + // @ts-ignore inputFocus(e) { + // this.setData({ + // searchState: true + // }) + // @ts-ignore this.triggerEvent('focus', e.detail) }, + // @ts-ignore inputBlur(e) { this.setData({ focus: false, @@ -78,13 +87,12 @@ Component({ searchState: false, }) }, - inputChange(e, dontTriggerInput) { + // @ts-ignore + inputChange(e) { this.setData({ value: e.detail.value }) - if (!dontTriggerInput) { - this.triggerEvent('input', e.detail) - } + this.triggerEvent('input', e.detail) if (Date.now() - this.lastSearch < this.data.throttle) { return } @@ -92,15 +100,18 @@ Component({ return } this.lastSearch = Date.now() - this.data.search(e.detail.value).then(json => { - this.setData({ - result: json + this.timerId = setTimeout(() => { + this.data.search(e.detail.value).then(json => { + this.setData({ + result: json + }) + }).catch(err => { + console.log('search error', err) }) - }).catch(err => { - console.log('search error', err) - }) + }, this.data.throttle) }, + // @ts-ignore selectResult(e) { const {index} = e.currentTarget.dataset const item = this.data.result[index] diff --git a/src/slideview/slideview.ts b/src/slideview/slideview.ts index c2e2fca..c10f911 100755 --- a/src/slideview/slideview.ts +++ b/src/slideview/slideview.ts @@ -13,7 +13,7 @@ Component({ }, buttons: { type: Array, - value: [], // type, text, src + value: [], // type, data, text, src, extClass observer: function(newVal) { this.addClassNameForButton() } @@ -26,6 +26,22 @@ Component({ type: Boolean, value: false }, + show: { + type: Boolean, + value: false + }, + duration: { + type: Number, + value: 350, // 动画市场，单位ms + }, + throttle: { + type: Number, + value: 40, + }, + rebounce: { + type: Number, + value: 0, // 回弹距离 + }, }, /** @@ -46,6 +62,7 @@ Component({ methods: { updateRight() { // 获取右侧滑动显示区域的宽度 + const data:any = this.data const query = wx.createSelectorQuery().in(this) query.select('.left').boundingClientRect((res) => { console.log('right res', res) @@ -56,7 +73,10 @@ Component({ size: { buttons: rects, button: res, - // disable: this.data.disable + show: data.show, + disable: data.disable, + throttle: data.throttle, + rebounce: data.rebounce } }) }).exec() @@ -87,6 +107,9 @@ Component({ }, show() { this.triggerEvent('show', {}, {}) + }, + transitionEnd() { + console.log('transitiion end') } } }) diff --git a/src/slideview/slideview.wxml b/src/slideview/slideview.wxml index b021d3a..f906edf 100755 --- a/src/slideview/slideview.wxml +++ b/src/slideview/slideview.wxml @@ -1,7 +1,13 @@ - - + + diff --git a/src/slideview/slideview.wxs b/src/slideview/slideview.wxs index 9c2b088..c62d085 100755 --- a/src/slideview/slideview.wxs +++ b/src/slideview/slideview.wxs @@ -8,6 +8,8 @@ var touchstart = function(event, ownerInstance) { // console.log('touchstart', JSON.stringify(event)) st.isMoving = true st.startX = event.touches[0].pageX + st.startY = event.touches[0].pageY + st.firstAngle = 0 } var touchmove = function(event, ownerInstance) { var ins = event.instance @@ -15,6 +17,14 @@ var touchmove = function(event, ownerInstance) { if (!st.size || !st.isMoving) return // console.log('touchmove', JSON.stringify(event)) var pagex = event.touches[0].pageX - st.startX + var pagey = event.touches[0].pageY - st.startY + // 左侧45度角为界限，大于45度则允许水平滑动 + if (st.firstAngle === 0) { + st.firstAngle = Math.abs(pagex) - Math.abs(pagey) + } + if (st.firstAngle < 0) { + return + } var movex = pagex > 0 ? Math.min(st.max, pagex) : Math.max(-st.max, pagex) // 往回滑动的情况 if (st.out) { @@ -37,7 +47,7 @@ var touchmove = function(event, ownerInstance) { }) transformTotal += transform } - return + return false } if (movex > 0) movex = 0 ins.setStyle({ @@ -59,11 +69,17 @@ var touchmove = function(event, ownerInstance) { st.size.buttons[i].transformx = transformx transformTotal += transform } + return false // 禁止垂直方向的滑动 } var touchend = function(event, ownerInstance) { var ins = event.instance var st = ins.getState() if (!st.size || !st.isMoving) return + // 左侧45度角为界限，大于45度则允许水平滑动 + if (st.firstAngle < 0) { + return + } + var duration = st.duration / 1000 st.isMoving = false // console.log('touchend', JSON.stringify(event)) var btns = ownerInstance.selectAllComponents('.btn') @@ -74,22 +90,34 @@ var touchend = function(event, ownerInstance) { st.out = false ins.setStyle({ 'transform': 'translate3d(0px, 0, 0)', - 'transition': 'transform 0.4s' + 'transition': 'transform ' + (duration) + 's' }) for (;i >= 0; i--) { btns[i].setStyle({ 'transform': 'translate3d(0px, 0, 0)', - 'transition': 'transform 0.4s' + 'transition': 'transform ' + (duration) + 's' }) } ownerInstance.callMethod('hide') return } + showButtons(ins, ownerInstance, duration) + ownerInstance.callMethod('show') +} +var REBOUNCE_TIME = 0.2 +var showButtons = function(ins, ownerInstance, withDuration) { + var st = ins.getState() + if (!st.size) return + var rebounceTime = st.rebounce ? REBOUNCE_TIME : 0 var movex = st.max st.out = true + var btns = ownerInstance.selectAllComponents('.btn') + var rebounce = st.rebounce || 0 + var len = btns.length + var i = len - 1 ins.setStyle({ - 'transform': 'translate3d(' + (-movex) + 'px, 0, 0)', - 'transition': 'transform 0.4s' + 'transform': 'translate3d(' + (-movex - rebounce) + 'px, 0, 0)', + 'transition': 'transform ' + (withDuration) + 's' }) st.transformx = -movex var transformTotal = 0 @@ -98,34 +126,35 @@ var touchend = function(event, ownerInstance) { var transformx = (-(transform + transformTotal)) btns[i].setStyle({ 'transform': 'translate3d(' + transformx + 'px, 0, 0)', - 'transition': 'transform 0.4s' + 'transition': 'transform ' + (withDuration ? withDuration + rebounceTime : withDuration) + 's' }) st.size.buttons[i].transformx = transformx transformTotal += transform } - ownerInstance.callMethod('show') } -var hideButton = function(event, ownerInstance) { +var innerHideButton = function(ownerInstance) { var ins = ownerInstance.selectComponent('.left') var st = ins.getState() if (!st.size) return - // console.log('hideButton', JSON.stringify(event)) + var duration = st.duration ? st.duration / 1000 : 0 var btns = ownerInstance.selectAllComponents('.btn') var len = btns.length var i = len - 1 - // console.log('len size', len) ins.setStyle({ 'transform': 'translate3d(0px, 0, 0)', - 'transition': 'transform 0.4s' + 'transition': 'transform ' + (duration) + 's' }) st.transformx = 0 for (;i >= 0; i--) { btns[i].setStyle({ 'transform': 'translate3d(0px, 0, 0)', - 'transition': 'transform 0.5s' + 'transition': 'transform ' + (duration) + 's' }) st.size.buttons[i].transformx = 0 } +} +var hideButton = function(event, ownerInstance) { + innerHideButton(ownerInstance) ownerInstance.callMethod('buttonTapByWxs', {index: event.currentTarget.dataset.index, data: event.currentTarget.dataset.data}) return false } @@ -149,7 +178,8 @@ var sizeReady = function(newVal, oldVal, ownerInstance, ins) { newVal.buttons[i].max = total newVal.buttons[i].transformx = 0 } - st.throttle = 40 // 固定值 + st.throttle = st.size.throttle || 40 // 固定值 + st.rebounce = st.size.rebounce st.max = max ownerInstance.selectComponent('.right').setStyle({ 'line-height': newVal.button.height + 'px', @@ -157,17 +187,57 @@ var sizeReady = function(newVal, oldVal, ownerInstance, ins) { width: max + 'px' }) // console.log('st size', JSON.stringify(newVal)) + if (!st.size.disable && st.size.show) { + showButtons(ins, ownerInstance) + } } } var disableChange = function(newVal, oldVal, ownerInstance, ins) { var st = ins.getState() st.disable = newVal } +var durationChange = function(newVal, oldVal, ownerInstance, ins) { + var st = ins.getState() + st.duration = newVal || 400 +} +var showChange = function(newVal, oldVal, ownerInstance, ins) { + var st = ins.getState() + st.show = newVal + if (st.disable) return + // console.log('show change') + if (st.show) { + showButtons(ins, ownerInstance, st.duration) + } else { + innerHideButton(ownerInstance) + } +} +var rebounceChange = function(newVal, oldVal, ownerInstance, ins) { + var st = ins.getState() + // console.log('rebounce', st.rebounce) + st.rebounce = newVal +} +var transitionEnd = function(event, ownerInstance) { + // console.log('transition') + var ins = event.instance + var st = ins.getState() + // 回弹效果 + if (st.out && st.rebounce) { + console.log('transition rebounce', st.rebounce) + ins.setStyle({ + 'transform': 'translate3d(' + (-st.max) + 'px, 0, 0)', + 'transition': 'transform ' + REBOUNCE_TIME +'s' + }) + } +} module.exports = { touchstart: touchstart, touchmove: touchmove, touchend: touchend, hideButton: hideButton, sizeReady: sizeReady, - disableChange: disableChange + disableChange: disableChange, + durationChange: durationChange, + showChange: showChange, + rebounceChange: rebounceChange, + transitionEnd: transitionEnd } \ No newline at end of file diff --git a/src/uploader/uploader.ts b/src/uploader/uploader.ts index feeba73..95e11af 100644 --- a/src/uploader/uploader.ts +++ b/src/uploader/uploader.ts @@ -48,7 +48,7 @@ Component({ type: String, value: '', }, - delete: { // 是否显示delete按钮 + showDelete: { // 是否显示delete按钮 type: Boolean, value: true }, diff --git a/src/uploader/uploader.wxml b/src/uploader/uploader.wxml index c514de7..9828c8d 100644 --- a/src/uploader/uploader.wxml +++ b/src/uploader/uploader.wxml @@ -33,4 +33,4 @@ - + diff --git a/tools/demo/app.json b/tools/demo/app.json index 782c46f..f02783f 100644 --- a/tools/demo/app.json +++ b/tools/demo/app.json @@ -6,6 +6,7 @@ "example/cell/cell", "example/slideview/slideview", "example/form/form", + "example/form-page/form-page", "example/slider/slider", "example/uploader/uploader", @@ -50,5 +51,6 @@ "uploadFile": 10000, "downloadFile": 10000 }, - "debug": true + "debug": true, + "style": "v2" } diff --git a/tools/demo/example/actionsheet/actionsheet.js b/tools/demo/example/actionsheet/actionsheet.js index 8f02eac..31af82a 100644 --- a/tools/demo/example/actionsheet/actionsheet.js +++ b/tools/demo/example/actionsheet/actionsheet.js @@ -8,5 +8,27 @@ Page({ } } }); + }, + data: { + showDialog: false, + groups: [ + { text: '示例菜单', value: 1 }, + { text: '示例菜单', value: 2 }, + { text: '负向菜单', type: 'warn', value: 3 } + ] + }, + openDialog: function () { + this.setData({ + showDialog: true + }) + }, + closeDialog: function () { + this.setData({ + showDialog: false + }) + }, + btnClick(e) { + console.log(e) + this.closeDialog() } -}); \ No newline at end of file +}); diff --git a/tools/demo/example/actionsheet/actionsheet.json b/tools/demo/example/actionsheet/actionsheet.json index 8835af0..41c38c2 100644 --- a/tools/demo/example/actionsheet/actionsheet.json +++ b/tools/demo/example/actionsheet/actionsheet.json @@ -1,3 +1,6 @@ { - "usingComponents": {} -} \ No newline at end of file + "usingComponents": { + "mp-actionSheet": "../../components/actionsheet/actionsheet", + "mp-icon": "../../components/icon/icon" + } +} diff --git a/tools/demo/example/actionsheet/actionsheet.wxml b/tools/demo/example/actionsheet/actionsheet.wxml index 0f4e01d..e19c215 100644 --- a/tools/demo/example/actionsheet/actionsheet.wxml +++ b/tools/demo/example/actionsheet/actionsheet.wxml @@ -1,11 +1,22 @@ ActionSheet - 弹出式菜单，采用小程序原生的actionsheet + 弹出式菜单 - + + + + + 前往图中包含的小程序： + + + 小程序名称 + + + + diff --git a/tools/demo/example/actionsheet/actionsheet.wxss b/tools/demo/example/actionsheet/actionsheet.wxss index 2cf9f67..8850cc7 100644 --- a/tools/demo/example/actionsheet/actionsheet.wxss +++ b/tools/demo/example/actionsheet/actionsheet.wxss @@ -1,5 +1,17 @@ @import '../common.wxss'; -page{ - background-color: #FFFFFF; + +.custom-action { + padding: 16px 0; + text-align: center; + +} +.custom-action .custom-action_desc { + color: #999999 +} + +.custom-action .custom-action_name { + margin: 10px 5px; + line-height: 1; + vertical-align: middle; } \ No newline at end of file diff --git a/tools/demo/example/cell/cell.wxml b/tools/demo/example/cell/cell.wxml index e6204a9..1ca0e61 100644 --- a/tools/demo/example/cell/cell.wxml +++ b/tools/demo/example/cell/cell.wxml @@ -10,7 +10,7 @@ 标题文字（使用slot） 说明文字 - + diff --git a/tools/demo/example/flex/flex.wxss b/tools/demo/example/flex/flex.wxss index ef5909f..17cbc60 100644 --- a/tools/demo/example/flex/flex.wxss +++ b/tools/demo/example/flex/flex.wxss @@ -4,7 +4,7 @@ margin: 5px; padding: 0 10px; text-align: center; - background-color: #F7F7F7; + background-color: #fff; height: 2.3em; line-height: 2.3em; color: rgba(0,0,0,.3); diff --git a/tools/demo/example/form-page/form-page.js b/tools/demo/example/form-page/form-page.js new file mode 100644 index 0000000..8ed1f59 --- /dev/null +++ b/tools/demo/example/form-page/form-page.js @@ -0,0 +1,4 @@ +Component({ + data: {}, + methods: {} +}); \ No newline at end of file diff --git a/tools/demo/example/form-page/form-page.json b/tools/demo/example/form-page/form-page.json new file mode 100644 index 0000000..f15a008 --- /dev/null +++ b/tools/demo/example/form-page/form-page.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "mp-form-page": "../../components/form-page/form-page" + } +} \ No newline at end of file diff --git a/tools/demo/example/form-page/form-page.wxml b/tools/demo/example/form-page/form-page.wxml new file mode 100644 index 0000000..98f6bb5 --- /dev/null +++ b/tools/demo/example/form-page/form-page.wxml @@ -0,0 +1,41 @@ + + + 表单标题 + 表单描述示意 + + + + 输入框 + + + + + + + + + + + + + + + + + + + 点击下一步即表示同意用户协议 + + + + + + 底部链接文本 + + Copyright © 2008-2019 weui.io + + + diff --git a/tools/demo/example/form-page/form-page.wxss b/tools/demo/example/form-page/form-page.wxss new file mode 100644 index 0000000..31bcdf1 --- /dev/null +++ b/tools/demo/example/form-page/form-page.wxss @@ -0,0 +1,2 @@ +@import '../common.wxss'; +page{height:100%;} diff --git a/tools/demo/example/form/form.js b/tools/demo/example/form/form.js index 9e3f8e8..e19bed9 100644 --- a/tools/demo/example/form/form.js +++ b/tools/demo/example/form/form.js @@ -37,7 +37,7 @@ Component({ }, rules: [{ name: 'radio', - rules: {required: true, message: '单选列表是必选项'}, + rules: {required: false, message: '单选列表是必选项'}, }, { name: 'checkbox', rules: {required: true, message: '多选列表是必选项'}, @@ -55,7 +55,11 @@ Component({ rules: {required: true, message: '验证码必填'}, }, { name: 'idcard', - rules: {required: true, message: 'idcard必填'}, + rules: {validator: function(rule, value, param, modeels) { + if (!value || value.length !== 18) { + return 'idcard格式不正确' + } + }}, }] }, methods: { diff --git a/tools/demo/example/form/form.json b/tools/demo/example/form/form.json index aeb521f..d536890 100644 --- a/tools/demo/example/form/form.json +++ b/tools/demo/example/form/form.json @@ -1,6 +1,7 @@ { "component": true, "usingComponents": { + "mp-form-page": "../../components/form-page/form-page", "mp-toptips": "../../components/toptips/toptips", "mp-cells": "../../components/cells/cells", "mp-cell": "../../components/cell/cell", diff --git a/tools/demo/example/form/form.wxml b/tools/demo/example/form/form.wxml index 9aca65b..790c5fb 100644 --- a/tools/demo/example/form/form.wxml +++ b/tools/demo/example/form/form.wxml @@ -1,129 +1,99 @@ - - - Form - 表单输入 - - - - - - - - - - - - - - - - - - - - - - - - 获取验证码 - - - - {{date}} - - - - - - - - - - - - - - - 开关 - - - 标题文字 - - - - - - 文本框 - - - - - - - - - 文本域 - - - -