From 9eeb8a0cb33cefa1b2d5ef288d6c382bc6129972 Mon Sep 17 00:00:00 2001 From: wangchen Date: Thu, 13 Jul 2023 11:12:15 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A3=85=E8=88=B9=E6=8C=87=E4=BB=A4=E9=9D=99?= =?UTF-8?q?=E6=80=81=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/index/instruct.vue | 1 - pages/index/instructDetails.vue | 284 ++++++++- uni_modules/uni-popup/changelog.md | 2 + .../components/uni-popup/uni-popup.vue | 3 +- uni_modules/uni-popup/package.json | 2 +- uni_modules/uni-transition/changelog.md | 32 +- .../uni-transition/createAnimation.js | 225 ++++---- .../uni-transition/uni-transition.vue | 539 +++++++++--------- uni_modules/uni-transition/package.json | 169 +++--- uni_modules/uni-transition/readme.md | 20 +- 10 files changed, 772 insertions(+), 505 deletions(-) diff --git a/pages/index/instruct.vue b/pages/index/instruct.vue index e07b478..477fde0 100644 --- a/pages/index/instruct.vue +++ b/pages/index/instruct.vue @@ -345,7 +345,6 @@ itemSum() { return function(item) { let sum = (60 / item) * 100 - console.log(sum); return sum }; } diff --git a/pages/index/instructDetails.vue b/pages/index/instructDetails.vue index 65c99c5..6314da3 100644 --- a/pages/index/instructDetails.vue +++ b/pages/index/instructDetails.vue @@ -12,7 +12,7 @@ 船名: 1123 - + @@ -27,7 +27,7 @@ 港口: 1123 - + @@ -42,10 +42,10 @@ 备注: 1123 - + - + @@ -54,7 +54,7 @@ 货代: 1123 - + @@ -69,10 +69,10 @@ 联系方式: 1123 - + - + @@ -201,11 +201,160 @@ 2 3 4 - 残损 + + + + + + + + + + 残损信息 + + + + + 品牌: + 车型: + 车架号/条形码: + + + + 质损发生环节: 收车交接 + 已收车 + + + + 质损上报人员: 张星星 + + + 质损上报时间: 2023/09/08 23:00 + + + 质损发生位置: 舱内 + + + + + 质损概况: 磕伤 + + + 损坏情况: 凹陷 + + + 处置情况: 其他 这是一段关于其他的描述 + + + + + 质损照片: + + + + + + + + + + + + + + + + + + + 车架号照片: + + + + + + + + + + + + + + + + + 质损发生环节: 收车交接 + 已收车 + + + 备注：这段备注很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长 + + + + 质损上报人员: 张星星 + + + 质损上报时间: 2023/09/08 23:00 + + + 质损发生位置: 舱内 + + + + + 质损概况: 磕伤 + + + 损坏情况: 凹陷 + + + 处置情况: 其他 这是一段关 + + + + + 质损照片: + + + + + + + + + + + + + + + + + + + 车架号照片: + + + + + + + + + + + + + + + + + @@ -220,18 +369,17 @@ HeadInfo }, methods: { - cs() { - console.log(1); + open() { + this.$refs.popup.open('center') + }, + close() { + this.$refs.popup.close() } } } \ No newline at end of file diff --git a/uni_modules/uni-popup/changelog.md b/uni_modules/uni-popup/changelog.md index 41abeb4..bc59f07 100644 --- a/uni_modules/uni-popup/changelog.md +++ b/uni_modules/uni-popup/changelog.md @@ -1,3 +1,5 @@ +## 1.8.3（2023-04-17） +- 修复 uni-popup 重复打开时的 bug ## 1.8.2（2023-02-02） - uni-popup-dialog 组件新增 inputType 属性 ## 1.8.1（2022-12-01） diff --git a/uni_modules/uni-popup/components/uni-popup/uni-popup.vue b/uni_modules/uni-popup/components/uni-popup/uni-popup.vue index db90c59..54afee2 100644 --- a/uni_modules/uni-popup/components/uni-popup/uni-popup.vue +++ b/uni_modules/uni-popup/components/uni-popup/uni-popup.vue @@ -269,8 +269,7 @@ open(direction) { // fix by mehaotian 处理快速打开关闭的情况 if (this.showPopup) { - clearTimeout(this.timer) - this.showPopup = false + return } let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share'] if (!(direction && innerType.indexOf(direction) !== -1)) { diff --git a/uni_modules/uni-popup/package.json b/uni_modules/uni-popup/package.json index 8a17034..f40556b 100644 --- a/uni_modules/uni-popup/package.json +++ b/uni_modules/uni-popup/package.json @@ -1,7 +1,7 @@ { "id": "uni-popup", "displayName": "uni-popup 弹出层", - "version": "1.8.2", + "version": "1.8.3", "description": " Popup 组件，提供常用的弹层", "keywords": [ "uni-ui", diff --git a/uni_modules/uni-transition/changelog.md b/uni_modules/uni-transition/changelog.md index ad489f1..70c1cd4 100644 --- a/uni_modules/uni-transition/changelog.md +++ b/uni_modules/uni-transition/changelog.md @@ -1,20 +1,22 @@ +## 1.3.2（2023-05-04） +- 修复 NVUE 平台报错的问题 ## 1.3.1（2021-11-23） - 修复 init 方法初始化问题 ## 1.3.0（2021-11-19） - 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) - 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-transition](https://uniapp.dcloud.io/component/uniui/uni-transition) -## 1.2.1（2021-09-27） -- 修复 init 方法不生效的 Bug -## 1.2.0（2021-07-30） -- 组件兼容 vue3，如何创建 vue3 项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) -## 1.1.1（2021-05-12） -- 新增 示例地址 -- 修复 示例项目缺少组件的 Bug -## 1.1.0（2021-04-22） -- 新增 通过方法自定义动画 -- 新增 custom-class 非 NVUE 平台支持自定义 class 定制样式 -- 优化 动画触发逻辑，使动画更流畅 -- 优化 支持单独的动画类型 -- 优化 文档示例 -## 1.0.2（2021-02-05） -- 调整为 uni_modules 目录规范 +## 1.2.1（2021-09-27） +- 修复 init 方法不生效的 Bug +## 1.2.0（2021-07-30） +- 组件兼容 vue3，如何创建 vue3 项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) +## 1.1.1（2021-05-12） +- 新增 示例地址 +- 修复 示例项目缺少组件的 Bug +## 1.1.0（2021-04-22） +- 新增 通过方法自定义动画 +- 新增 custom-class 非 NVUE 平台支持自定义 class 定制样式 +- 优化 动画触发逻辑，使动画更流畅 +- 优化 支持单独的动画类型 +- 优化 文档示例 +## 1.0.2（2021-02-05） +- 调整为 uni_modules 目录规范 diff --git a/uni_modules/uni-transition/components/uni-transition/createAnimation.js b/uni_modules/uni-transition/components/uni-transition/createAnimation.js index af47dbc..8f89b18 100644 --- a/uni_modules/uni-transition/components/uni-transition/createAnimation.js +++ b/uni_modules/uni-transition/components/uni-transition/createAnimation.js @@ -1,128 +1,131 @@ -// const defaultOption = { -// duration: 300, -// timingFunction: 'linear', -// delay: 0, -// transformOrigin: '50% 50% 0' -// } -// #ifdef APP-NVUE -const nvueAnimation = uni.requireNativePlugin('animation') -// #endif -class MPAnimation { - constructor(options, _this) { - this.options = options - this.animation = uni.createAnimation(options) - this.currentStepAnimates = {} - this.next = 0 - this.$ = _this - - } - - _nvuePushAnimates(type, args) { - let aniObj = this.currentStepAnimates[this.next] - let styles = {} - if (!aniObj) { - styles = { - styles: {}, - config: {} - } - } else { - styles = aniObj - } - if (animateTypes1.includes(type)) { - if (!styles.styles.transform) { - styles.styles.transform = '' +// const defaultOption = { +// duration: 300, +// timingFunction: 'linear', +// delay: 0, +// transformOrigin: '50% 50% 0' +// } +// #ifdef APP-NVUE +const nvueAnimation = uni.requireNativePlugin('animation') +// #endif +class MPAnimation { + constructor(options, _this) { + this.options = options + // 在iOS10+QQ小程序平台下，传给原生的对象一定是个普通对象而不是Proxy对象，否则会报parameter should be Object instead of ProxyObject的错误 + this.animation = uni.createAnimation({ + ...options + }) + this.currentStepAnimates = {} + this.next = 0 + this.$ = _this + + } + + _nvuePushAnimates(type, args) { + let aniObj = this.currentStepAnimates[this.next] + let styles = {} + if (!aniObj) { + styles = { + styles: {}, + config: {} + } + } else { + styles = aniObj + } + if (animateTypes1.includes(type)) { + if (!styles.styles.transform) { + styles.styles.transform = '' } let unit = '' if(type === 'rotate'){ unit = 'deg' - } - styles.styles.transform += `${type}(${args+unit}) ` - } else { - styles.styles[type] = `${args}` - } - this.currentStepAnimates[this.next] = styles - } - _animateRun(styles = {}, config = {}) { - let ref = this.$.$refs['ani'].ref - if (!ref) return + } + styles.styles.transform += `${type}(${args+unit}) ` + } else { + styles.styles[type] = `${args}` + } + this.currentStepAnimates[this.next] = styles + } + _animateRun(styles = {}, config = {}) { + let ref = this.$.$refs['ani'].ref + if (!ref) return return new Promise((resolve, reject) => { - nvueAnimation.transition(ref, { - styles, - ...config - }, res => { - resolve() - }) - }) - } - - _nvueNextAnimate(animates, step = 0, fn) { - let obj = animates[step] - if (obj) { - let { - styles, - config - } = obj - this._animateRun(styles, config).then(() => { - step += 1 - this._nvueNextAnimate(animates, step, fn) - }) - } else { - this.currentStepAnimates = {} - typeof fn === 'function' && fn() - this.isEnd = true - } - } - + nvueAnimation.transition(ref, { + styles, + ...config + }, res => { + resolve() + }) + }) + } + + _nvueNextAnimate(animates, step = 0, fn) { + let obj = animates[step] + if (obj) { + let { + styles, + config + } = obj + this._animateRun(styles, config).then(() => { + step += 1 + this._nvueNextAnimate(animates, step, fn) + }) + } else { + this.currentStepAnimates = {} + typeof fn === 'function' && fn() + this.isEnd = true + } + } + step(config = {}) { // #ifndef APP-NVUE - this.animation.step(config) - // #endif - // #ifdef APP-NVUE + this.animation.step(config) + // #endif + // #ifdef APP-NVUE this.currentStepAnimates[this.next].config = Object.assign({}, this.options, config) this.currentStepAnimates[this.next].styles.transformOrigin = this.currentStepAnimates[this.next].config.transformOrigin - this.next++ - // #endif - return this - } - - run(fn) { + this.next++ + // #endif + return this + } + + run(fn) { // #ifndef APP-NVUE - this.$.animationData = this.animation.export() + this.$.animationData = this.animation.export() this.$.timer = setTimeout(() => { - typeof fn === 'function' && fn() - }, this.$.durationTime) - // #endif - // #ifdef APP-NVUE + typeof fn === 'function' && fn() + }, this.$.durationTime) + // #endif + // #ifdef APP-NVUE this.isEnd = false let ref = this.$.$refs['ani'] && this.$.$refs['ani'].ref - if(!ref) return - this._nvueNextAnimate(this.currentStepAnimates, 0, fn) - this.next = 0 - // #endif - } -} - - -const animateTypes1 = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d', - 'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY', - 'translateZ' -] -const animateTypes2 = ['opacity', 'backgroundColor'] -const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom'] -animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => { - MPAnimation.prototype[type] = function(...args) { + if(!ref) return + this._nvueNextAnimate(this.currentStepAnimates, 0, fn) + this.next = 0 + // #endif + } +} + + +const animateTypes1 = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d', + 'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY', + 'translateZ' +] +const animateTypes2 = ['opacity', 'backgroundColor'] +const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom'] +animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => { + MPAnimation.prototype[type] = function(...args) { // #ifndef APP-NVUE this.animation[type](...args) - // #endif - // #ifdef APP-NVUE - this._nvuePushAnimates(type, args) - // #endif - return this - } -}) - + // #endif + // #ifdef APP-NVUE + this._nvuePushAnimates(type, args) + // #endif + return this + } +}) + export function createAnimation(option, _this) { - if(!_this) return - clearTimeout(_this.timer) - return new MPAnimation(option, _this) + if(!_this) return + clearTimeout(_this.timer) + return new MPAnimation(option, _this) } diff --git a/uni_modules/uni-transition/components/uni-transition/uni-transition.vue b/uni_modules/uni-transition/components/uni-transition/uni-transition.vue index be5e794..bfbba93 100644 --- a/uni_modules/uni-transition/components/uni-transition/uni-transition.vue +++ b/uni_modules/uni-transition/components/uni-transition/uni-transition.vue @@ -1,277 +1,286 @@ - - - - + return this + }, + /** + * ref 触发 执行动画 + */ + run(fn) { + if (!this.animation) return + this.animation.run(fn) + }, + // 开始过度动画 + open() { + clearTimeout(this.timer) + this.transform = '' + this.isShow = true + let { opacity, transform } = this.styleInit(false) + if (typeof opacity !== 'undefined') { + this.opacity = opacity + } + this.transform = transform + // 确保动态样式已经生效后，执行动画，如果不加 nextTick ，会导致 wx 动画执行异常 + this.$nextTick(() => { + // TODO 定时器保证动画完全执行，目前有些问题，后面会取消定时器 + this.timer = setTimeout(() => { + this.animation = createAnimation(this.config, this) + this.tranfromInit(false).step() + this.animation.run() + this.$emit('change', { + detail: this.isShow + }) + }, 20) + }) + }, + // 关闭过度动画 + close(type) { + if (!this.animation) return + this.tranfromInit(true) + .step() + .run(() => { + this.isShow = false + this.animationData = null + this.animation = null + let { opacity, transform } = this.styleInit(false) + this.opacity = opacity || 1 + this.transform = transform + this.$emit('change', { + detail: this.isShow + }) + }) + }, + // 处理动画开始前的默认样式 + styleInit(type) { + let styles = { + transform: '' + } + let buildStyle = (type, mode) => { + if (mode === 'fade') { + styles.opacity = this.animationType(type)[mode] + } else { + styles.transform += this.animationType(type)[mode] + ' ' + } + } + if (typeof this.modeClass === 'string') { + buildStyle(type, this.modeClass) + } else { + this.modeClass.forEach(mode => { + buildStyle(type, mode) + }) + } + return styles + }, + // 处理内置组合动画 + tranfromInit(type) { + let buildTranfrom = (type, mode) => { + let aniNum = null + if (mode === 'fade') { + aniNum = type ? 0 : 1 + } else { + aniNum = type ? '-100%' : '0' + if (mode === 'zoom-in') { + aniNum = type ? 0.8 : 1 + } + if (mode === 'zoom-out') { + aniNum = type ? 1.2 : 1 + } + if (mode === 'slide-right') { + aniNum = type ? '100%' : '0' + } + if (mode === 'slide-bottom') { + aniNum = type ? '100%' : '0' + } + } + this.animation[this.animationMode()[mode]](aniNum) + } + if (typeof this.modeClass === 'string') { + buildTranfrom(type, this.modeClass) + } else { + this.modeClass.forEach(mode => { + buildTranfrom(type, mode) + }) + } + + return this.animation + }, + animationType(type) { + return { + fade: type ? 1 : 0, + 'slide-top': `translateY(${type ? '0' : '-100%'})`, + 'slide-right': `translateX(${type ? '0' : '100%'})`, + 'slide-bottom': `translateY(${type ? '0' : '100%'})`, + 'slide-left': `translateX(${type ? '0' : '-100%'})`, + 'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`, + 'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})` + } + }, + // 内置动画类型与实际动画对应字典 + animationMode() { + return { + fade: 'opacity', + 'slide-top': 'translateY', + 'slide-right': 'translateX', + 'slide-bottom': 'translateY', + 'slide-left': 'translateX', + 'zoom-in': 'scale', + 'zoom-out': 'scale' + } + }, + // 驼峰转中横线 + toLine(name) { + return name.replace(/([A-Z])/g, '-$1').toLowerCase() + } + } +} + + diff --git a/uni_modules/uni-transition/package.json b/uni_modules/uni-transition/package.json index 379e9aa..ea995a2 100644 --- a/uni_modules/uni-transition/package.json +++ b/uni_modules/uni-transition/package.json @@ -1,87 +1,84 @@ -{ - "id": "uni-transition", - "displayName": "uni-transition 过渡动画", - "version": "1.3.1", - "description": "元素的简单过渡动画", - "keywords": [ - "uni-ui", - "uniui", - "动画", - "过渡", - "过渡动画" -], - "repository": "https://github.com/dcloudio/uni-ui", - "engines": { - "HBuilderX": "" - }, - "directories": { - "example": "../../temps/example_temps" - }, - "dcloudext": { - "category": [ - "前端组件", - "通用组件" - ], - "sale": { - "regular": { - "price": "0.00" - }, - "sourcecode": { - "price": "0.00" - } - }, - "contact": { - "qq": "" - }, - "declaration": { - "ads": "无", - "data": "无", - "permissions": "无" - }, - "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" - }, - "uni_modules": { - "dependencies": ["uni-scss"], - "encrypt": [], - "platforms": { - "cloud": { - "tcb": "y", - "aliyun": "y" - }, - "client": { - "App": { - "app-vue": "y", - "app-nvue": "y" - }, - "H5-mobile": { - "Safari": "y", - "Android Browser": "y", - "微信浏览器(Android)": "y", - "QQ浏览器(Android)": "y" - }, - "H5-pc": { - "Chrome": "y", - "IE": "y", - "Edge": "y", - "Firefox": "y", - "Safari": "y" - }, - "小程序": { - "微信": "y", - "阿里": "y", - "百度": "y", - "字节跳动": "y", - "QQ": "y" - }, - "快应用": { - "华为": "u", - "联盟": "u" - }, - "Vue": { - "vue2": "y", - "vue3": "y" - } - } - } - } +{ + "id": "uni-transition", + "displayName": "uni-transition 过渡动画", + "version": "1.3.2", + "description": "元素的简单过渡动画", + "keywords": [ + "uni-ui", + "uniui", + "动画", + "过渡", + "过渡动画" +], + "repository": "https://github.com/dcloudio/uni-ui", + "engines": { + "HBuilderX": "" + }, + "directories": { + "example": "../../temps/example_temps" + }, +"dcloudext": { + "sale": { + "regular": { + "price": "0.00" + }, + "sourcecode": { + "price": "0.00" + } + }, + "contact": { + "qq": "" + }, + "declaration": { + "ads": "无", + "data": "无", + "permissions": "无" + }, + "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", + "type": "component-vue" + }, + "uni_modules": { + "dependencies": ["uni-scss"], + "encrypt": [], + "platforms": { + "cloud": { + "tcb": "y", + "aliyun": "y" + }, + "client": { + "App": { + "app-vue": "y", + "app-nvue": "y" + }, + "H5-mobile": { + "Safari": "y", + "Android Browser": "y", + "微信浏览器(Android)": "y", + "QQ浏览器(Android)": "y" + }, + "H5-pc": { + "Chrome": "y", + "IE": "y", + "Edge": "y", + "Firefox": "y", + "Safari": "y" + }, + "小程序": { + "微信": "y", + "阿里": "y", + "百度": "y", + "字节跳动": "y", + "QQ": "y" + }, + "快应用": { + "华为": "u", + "联盟": "u" + }, + "Vue": { + "vue2": "y", + "vue3": "y" + } + } + } + } } \ No newline at end of file diff --git a/uni_modules/uni-transition/readme.md b/uni_modules/uni-transition/readme.md index 1e104fe..2f8a77e 100644 --- a/uni_modules/uni-transition/readme.md +++ b/uni_modules/uni-transition/readme.md @@ -1,11 +1,11 @@ - - -## Transition 过渡动画 -> **组件名：uni-transition** -> 代码块： `uTransition` - - -元素过渡动画 - -### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-transition) + + +## Transition 过渡动画 +> **组件名：uni-transition** +> 代码块： `uTransition` + + +元素过渡动画 + +### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-transition) #### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 \ No newline at end of file