feat: 响应体组件封装

This commit is contained in:
duanshuwen committed 2025-07-14 16:10:10 +08:00
1 parent 8766bb3720
commit e5d908701f
55 files changed
+290 -155

No files matched your search

@@ -1 +1 @@
{"version":3,"file":"ex-drawer.js","sources":["third/ex-drawer/ex-drawer.vue","C:/Program Files/HBuilderX/plugins/uniapp-cli-vite/uniComponent:/RDovd3d3L1lHQ2hhdENTL3RoaXJkL2V4LWRyYXdlci9leC1kcmF3ZXIudnVl"],"sourcesContent":["<template>\r\n\t<!-- <view class=\"ex-drawer\" @touchstart=\"containerStart\" @touchend=\"containerEnd\" @touchmove=\"containerMove\"> -->\r\n\t<!-- 移除手势 -->\n\t<view class=\"ex-drawer\"> \r\n\t\t<!-- 抽屉 -->\r\n\t\t<view class=\"ex-drawer-warp\" :class=\"{ move: move }\" :style=\"{ width: `${width}rpx`, left: `-${width}rpx`, transform: `translate3d(${differential}px,0,0)`,backfaceVisibility:`hidden`, }\">\r\n\t\t\t<!-- 抽屉内容插槽 -->\r\n\t\t\t<slot name=\"drawerContent\"></slot>\r\n\t\t</view>\r\n\t\t<!-- 主容器 -->\r\n\t\t<view class=\"ex-container-warp\" :class=\"maskShow == true ? 'container prevent' : 'container'\">\r\n\t\t\t<!-- 遮罩 -->\r\n\t\t\t<view v-show=\"maskShow\" class=\"mask\" @tap=\"close\"></view>\r\n\t\t\t<!-- 主容器内容插槽 -->\r\n\t\t\t<slot name=\"containerContent\"></slot>\r\n\t\t</view>\r\n\t</view>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n\tdata() {\r\n\t\treturn {\r\n\t\t\tmaskShow: false,\r\n\t\t\tstartX: 0,\r\n\t\t\tstartY: 0,\r\n\t\t\tmoveX: 0,\r\n\t\t\tmoveY: 0,\r\n\t\t\tstartExcursion: 0,\r\n\t\t\tdifferential: 0,\r\n\t\t\tisDirection: null,\r\n\t\t\tiswidth: null,\r\n\t\t\tmove: false\r\n\t\t};\r\n\t},\r\n\tprops: {\r\n\t\twidth: {\r\n\t\t\ttype: String,\r\n\t\t\tdefault: ''\r\n\t\t}\r\n\t},\r\n\tmethods: {\r\n\t\tcontainerStart(e) {\r\n\t\t\tthis.isDirection = null;\r\n\t\t\tthis.move = false;\r\n\t\t\tthis.startX = e.changedTouches[0].clientX;\r\n\t\t\tthis.startY = e.changedTouches[0].clientY;\r\n\t\t\tthis.startExcursion = this.differential;\r\n\t\t},\r\n\t\tcontainerMove(e) {\r\n\t\t\tthis.moveX = e.changedTouches[0].clientX;\r\n\t\t\tthis.moveY = e.changedTouches[0].clientY;\r\n\t\t\tlet X = Math.abs(this.moveX - this.startX);\r\n\t\t\tlet Y = Math.abs(this.moveY - this.startY);\r\n\t\t\tlet differential = this.startExcursion + this.moveX - this.startX;\r\n\t\t\tdifferential = Math.min(uni.upx2px(this.width), differential);\r\n\t\t\tdifferential = Math.max(0, differential);\r\n\t\t\tthis.isDirection == null ? (this.isDirection = Y / X > Math.sqrt(3) / 3) : ``;\r\n\t\t\tif (!this.isDirection) {\r\n\t\t\t\tthis.differential = differential;\r\n\t\t\t\tif(this.differential == 0 ){\r\n\t\t\t\t\tthis.containerEnd()\r\n\t\t\t\t}else{\r\n\t\t\t\t\tthis.maskShow = true\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t},\r\n\t\tcontainerEnd() {\r\n\t\t\tif (this.isDirection != null) {\r\n\t\t\t\tif (!this.isDirection) {\r\n\t\t\t\t\tthis.iswidth = this.differential > (uni.upx2px(this.width) * 2) / 6;\r\n\t\t\t\t\tthis.differential > 0 && this.differential < uni.upx2px(this.width) ? (this.move = true) : ``;\r\n\t\t\t\t}\r\n\t\t\t\tthis.differential = this.iswidth ? uni.upx2px(this.width) : 0;\r\n\t\t\t\tthis.differential == 0 ? this.maskShow = false : ``;\r\n\t\t\t}\r\n\t\t},\r\n\t\tclose(){\r\n\t\t\tif(this.maskShow){\r\n\t\t\t\tthis.move = true\r\n\t\t\t\tthis.differential = 0;\t\r\n\t\t\t\tif(this.differential == 0 ){\r\n\t\t\t\t\tthis.maskShow = false\r\n\t\t\t\t\tthis.iswidth=false\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t},\r\n\t\topen(){\r\n\t\t\tif(!this.maskShow){\r\n\t\t\t\tthis.move = true\r\n\t\t\t\tthis.differential = uni.upx2px(this.width);\t\r\n\t\t\t\tif(this.differential == uni.upx2px(this.width) ){\r\n\t\t\t\t\tthis.maskShow = true\r\n\t\t\t\t\tthis.iswidth=true\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n};\r\n</script>\r\n\r\n<style>\r\n.ex-drawer {\r\n\tdisplay: flex;\r\n\talign-items: flex-start;\r\n\tjustify-content: flex-start;\r\n}\r\n.ex-drawer-warp {\r\n\tposition: fixed;\r\n\tz-index: 1000;\r\n\ttouch-action: none;\r\n}\r\n.mask {\r\n\tposition: fixed;\r\n\tleft: 0rpx;\r\n\twidth: 100vw;\r\n\theight: 100vh;\r\n\tz-index: 999;\r\n\tbackground-color:#000000;filter:Alpha(Opacity=60);opacity:0.3;\r\n}\r\n.prevent {\r\n\ttouch-action: none;\r\n}\r\n.move {\r\n\ttransition: transform 0.3s ease;\r\n}\r\n</style>\n","import Component from 'D:/www/YGChatCS/third/ex-drawer/ex-drawer.vue'\nwx.createComponent(Component)"],"names":["uni"],"mappings":";;AAoBA,MAAK,YAAU;AAAA,EACd,OAAO;AACN,WAAO;AAAA,MACN,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,OAAO;AAAA,MACP,gBAAgB;AAAA,MAChB,cAAc;AAAA,MACd,aAAa;AAAA,MACb,SAAS;AAAA,MACT,MAAM;AAAA;EAEP;AAAA,EACD,OAAO;AAAA,IACN,OAAO;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACA;AAAA,EACD,SAAS;AAAA,IACR,eAAe,GAAG;AACjB,WAAK,cAAc;AACnB,WAAK,OAAO;AACZ,WAAK,SAAS,EAAE,eAAe,CAAC,EAAE;AAClC,WAAK,SAAS,EAAE,eAAe,CAAC,EAAE;AAClC,WAAK,iBAAiB,KAAK;AAAA,IAC3B;AAAA,IACD,cAAc,GAAG;AAChB,WAAK,QAAQ,EAAE,eAAe,CAAC,EAAE;AACjC,WAAK,QAAQ,EAAE,eAAe,CAAC,EAAE;AACjC,UAAI,IAAI,KAAK,IAAI,KAAK,QAAQ,KAAK,MAAM;AACzC,UAAI,IAAI,KAAK,IAAI,KAAK,QAAQ,KAAK,MAAM;AACzC,UAAI,eAAe,KAAK,iBAAiB,KAAK,QAAQ,KAAK;AAC3D,qBAAe,KAAK,IAAIA,cAAG,MAAC,OAAO,KAAK,KAAK,GAAG,YAAY;AAC5D,qBAAe,KAAK,IAAI,GAAG,YAAY;AACvC,Line truncated
{"version":3,"file":"ex-drawer.js","sources":["third/ex-drawer/ex-drawer.vue","E:/Program Files/HBuilderX/plugins/uniapp-cli-vite/uniComponent:/RDovWUdDaGF0Q1MvdGhpcmQvZXgtZHJhd2VyL2V4LWRyYXdlci52dWU"],"sourcesContent":["<template>\r\n\t<!-- <view class=\"ex-drawer\" @touchstart=\"containerStart\" @touchend=\"containerEnd\" @touchmove=\"containerMove\"> -->\r\n\t<!-- 移除手势 -->\n\t<view class=\"ex-drawer\"> \r\n\t\t<!-- 抽屉 -->\r\n\t\t<view class=\"ex-drawer-warp\" :class=\"{ move: move }\" :style=\"{ width: `${width}rpx`, left: `-${width}rpx`, transform: `translate3d(${differential}px,0,0)`,backfaceVisibility:`hidden`, }\">\r\n\t\t\t<!-- 抽屉内容插槽 -->\r\n\t\t\t<slot name=\"drawerContent\"></slot>\r\n\t\t</view>\r\n\t\t<!-- 主容器 -->\r\n\t\t<view class=\"ex-container-warp\" :class=\"maskShow == true ? 'container prevent' : 'container'\">\r\n\t\t\t<!-- 遮罩 -->\r\n\t\t\t<view v-show=\"maskShow\" class=\"mask\" @tap=\"close\"></view>\r\n\t\t\t<!-- 主容器内容插槽 -->\r\n\t\t\t<slot name=\"containerContent\"></slot>\r\n\t\t</view>\r\n\t</view>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n\tdata() {\r\n\t\treturn {\r\n\t\t\tmaskShow: false,\r\n\t\t\tstartX: 0,\r\n\t\t\tstartY: 0,\r\n\t\t\tmoveX: 0,\r\n\t\t\tmoveY: 0,\r\n\t\t\tstartExcursion: 0,\r\n\t\t\tdifferential: 0,\r\n\t\t\tisDirection: null,\r\n\t\t\tiswidth: null,\r\n\t\t\tmove: false\r\n\t\t};\r\n\t},\r\n\tprops: {\r\n\t\twidth: {\r\n\t\t\ttype: String,\r\n\t\t\tdefault: ''\r\n\t\t}\r\n\t},\r\n\tmethods: {\r\n\t\tcontainerStart(e) {\r\n\t\t\tthis.isDirection = null;\r\n\t\t\tthis.move = false;\r\n\t\t\tthis.startX = e.changedTouches[0].clientX;\r\n\t\t\tthis.startY = e.changedTouches[0].clientY;\r\n\t\t\tthis.startExcursion = this.differential;\r\n\t\t},\r\n\t\tcontainerMove(e) {\r\n\t\t\tthis.moveX = e.changedTouches[0].clientX;\r\n\t\t\tthis.moveY = e.changedTouches[0].clientY;\r\n\t\t\tlet X = Math.abs(this.moveX - this.startX);\r\n\t\t\tlet Y = Math.abs(this.moveY - this.startY);\r\n\t\t\tlet differential = this.startExcursion + this.moveX - this.startX;\r\n\t\t\tdifferential = Math.min(uni.upx2px(this.width), differential);\r\n\t\t\tdifferential = Math.max(0, differential);\r\n\t\t\tthis.isDirection == null ? (this.isDirection = Y / X > Math.sqrt(3) / 3) : ``;\r\n\t\t\tif (!this.isDirection) {\r\n\t\t\t\tthis.differential = differential;\r\n\t\t\t\tif(this.differential == 0 ){\r\n\t\t\t\t\tthis.containerEnd()\r\n\t\t\t\t}else{\r\n\t\t\t\t\tthis.maskShow = true\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t},\r\n\t\tcontainerEnd() {\r\n\t\t\tif (this.isDirection != null) {\r\n\t\t\t\tif (!this.isDirection) {\r\n\t\t\t\t\tthis.iswidth = this.differential > (uni.upx2px(this.width) * 2) / 6;\r\n\t\t\t\t\tthis.differential > 0 && this.differential < uni.upx2px(this.width) ? (this.move = true) : ``;\r\n\t\t\t\t}\r\n\t\t\t\tthis.differential = this.iswidth ? uni.upx2px(this.width) : 0;\r\n\t\t\t\tthis.differential == 0 ? this.maskShow = false : ``;\r\n\t\t\t}\r\n\t\t},\r\n\t\tclose(){\r\n\t\t\tif(this.maskShow){\r\n\t\t\t\tthis.move = true\r\n\t\t\t\tthis.differential = 0;\t\r\n\t\t\t\tif(this.differential == 0 ){\r\n\t\t\t\t\tthis.maskShow = false\r\n\t\t\t\t\tthis.iswidth=false\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t},\r\n\t\topen(){\r\n\t\t\tif(!this.maskShow){\r\n\t\t\t\tthis.move = true\r\n\t\t\t\tthis.differential = uni.upx2px(this.width);\t\r\n\t\t\t\tif(this.differential == uni.upx2px(this.width) ){\r\n\t\t\t\t\tthis.maskShow = true\r\n\t\t\t\t\tthis.iswidth=true\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n};\r\n</script>\r\n\r\n<style>\r\n.ex-drawer {\r\n\tdisplay: flex;\r\n\talign-items: flex-start;\r\n\tjustify-content: flex-start;\r\n}\r\n.ex-drawer-warp {\r\n\tposition: fixed;\r\n\tz-index: 1000;\r\n\ttouch-action: none;\r\n}\r\n.mask {\r\n\tposition: fixed;\r\n\tleft: 0rpx;\r\n\twidth: 100vw;\r\n\theight: 100vh;\r\n\tz-index: 999;\r\n\tbackground-color:#000000;filter:Alpha(Opacity=60);opacity:0.3;\r\n}\r\n.prevent {\r\n\ttouch-action: none;\r\n}\r\n.move {\r\n\ttransition: transform 0.3s ease;\r\n}\r\n</style>\n","import Component from 'D:/YGChatCS/third/ex-drawer/ex-drawer.vue'\nwx.createComponent(Component)"],"names":["uni"],"mappings":";;AAoBA,MAAK,YAAU;AAAA,EACd,OAAO;AACN,WAAO;AAAA,MACN,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,OAAO;AAAA,MACP,gBAAgB;AAAA,MAChB,cAAc;AAAA,MACd,aAAa;AAAA,MACb,SAAS;AAAA,MACT,MAAM;AAAA;EAEP;AAAA,EACD,OAAO;AAAA,IACN,OAAO;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACA;AAAA,EACD,SAAS;AAAA,IACR,eAAe,GAAG;AACjB,WAAK,cAAc;AACnB,WAAK,OAAO;AACZ,WAAK,SAAS,EAAE,eAAe,CAAC,EAAE;AAClC,WAAK,SAAS,EAAE,eAAe,CAAC,EAAE;AAClC,WAAK,iBAAiB,KAAK;AAAA,IAC3B;AAAA,IACD,cAAc,GAAG;AAChB,WAAK,QAAQ,EAAE,eAAe,CAAC,EAAE;AACjC,WAAK,QAAQ,EAAE,eAAe,CAAC,EAAE;AACjC,UAAI,IAAI,KAAK,IAAI,KAAK,QAAQ,KAAK,MAAM;AACzC,UAAI,IAAI,KAAK,IAAI,KAAK,QAAQ,KAAK,MAAM;AACzC,UAAI,eAAe,KAAK,iBAAiB,KAAK,QAAQ,KAAK;AAC3D,qBAAe,KAAK,IAAIA,cAAG,MAAC,OAAO,KAAK,KAAK,GAAG,YAAY;AAC5D,qBAAe,KAAK,IAAI,GAAG,YAAY;AACvC,WAAK,eAAeLine truncated