wsnet
/
pad-app
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

装船指令静态完成

dev
wangchen 2023-07-13 11:12:15 +08:00
parent 92e67a3fe8
commit 9eeb8a0cb3
10 changed files with 772 additions and 505 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
pages/index/instruct.vue
View File

@ -345,7 +345,6 @@
itemSum() { itemSum() {
return function(item) { return function(item) {
let sum = (60 / item) * 100 let sum = (60 / item) * 100
console.log(sum);
return sum return sum
}; };
} }

284
pages/index/instructDetails.vue
View File

@ -12,7 +12,7 @@
船名: 船名:
</view> </view>
<text>1123</text> <text>1123</text>
</view> </view>
<view class="col"> <view class="col">
<view class="title"> <view class="title">
@ -27,7 +27,7 @@
港口: 港口:
</view> </view>
<text>1123</text> <text>1123</text>
</view> </view>
<view class="col"> <view class="col">
<view class="title"> <view class="title">
@ -42,10 +42,10 @@
备注: 备注:
</view> </view>
<text>1123</text> <text>1123</text>
</view> </view>
<view class="col"> <view class="col">
</view> </view>
</view> </view>
<view class="row"> <view class="row">
@ -54,7 +54,7 @@
货代: 货代:
</view> </view>
<text>1123</text> <text>1123</text>
</view> </view>
<view class="col"> <view class="col">
<view class="title"> <view class="title">
@ -69,10 +69,10 @@
联系方式: 联系方式:
</view> </view>
<text>1123</text> <text>1123</text>
</view> </view>
<view class="col"> <view class="col">
</view> </view>
</view> </view>
</view> </view>
@ -201,11 +201,160 @@
<uni-td>2</uni-td> <uni-td>2</uni-td>
<uni-td>3</uni-td> <uni-td>3</uni-td>
<uni-td>4</uni-td> <uni-td>4</uni-td>
<uni-td align="center" class="blue" @click="cs">残损</uni-td> <uni-td align="center">
<view class="uni-group">
<button class="uni-button" size="mini" type="primary" @click="open">残损</button>
</view>
</uni-td>
</uni-tr> </uni-tr>
</uni-table> </uni-table>
</view> </view>
<!-- 弹出层 -->
<uni-popup ref="popup" :mask-click="false">
<view class="dialog">
<view class="dtitle">
<text>残损信息</text>
<uni-icons type="closeempty" size="30" @click="close"></uni-icons>
</view>
<view class="tableContant">
<view class="nr">
<text class="text">品牌:</text>
<text class="text">车型:</text>
<text class="text">车架号/条形码:</text>
</view>
<view class="table">
<view class="title">
<view>质损发生环节: 收车交接</view>
<view class="tag">已收车</view>
</view>
<view class="row">
<view class="col">
质损上报人员: 张星星
</view>
<view class="col">
质损上报时间: 2023/09/08 23:00
</view>
<view class="col">
质损发生位置: 舱内
</view>
</view>
<view class="row">
<view class="col">
质损概况: 磕伤
</view>
<view class="col">
损坏情况: 凹陷
</view>
<view class="col">
处置情况: 其他 这是一段关于其他的描述
</view>
</view>
<view class="imgRow">
<view class="name">
质损照片:
</view>
<view class="imgList">
<view class="img">
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
</view>
<view class="img">
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
</view>
<view class="img">
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
</view>
<view class="img">
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
</view>
</view>
</view>
<view class="imgRow">
<view class="name">
车架号照片:
</view>
<view class="imgList">
<view class="img">
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
</view>
<view class="img">
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
</view>
<view class="img">
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
</view>
</view>
</view>
</view>
<view class="table">
<view class="title">
<view>质损发生环节: 收车交接</view>
<view class="tag">已收车</view>
</view>
<view class="row">
备注：这段备注很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长
</view>
<view class="row">
<view class="col">
质损上报人员: 张星星
</view>
<view class="col">
质损上报时间: 2023/09/08 23:00
</view>
<view class="col">
质损发生位置: 舱内
</view>
</view>
<view class="row">
<view class="col">
质损概况: 磕伤
</view>
<view class="col">
损坏情况: 凹陷
</view>
<view class="col">
处置情况: 其他 这是一段关
</view>
</view>
<view class="imgRow">
<view class="name">
质损照片:
</view>
<view class="imgList">
<view class="img">
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
</view>
<view class="img">
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
</view>
<view class="img">
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
</view>
<view class="img">
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
</view>
</view>
</view>
<view class="imgRow">
<view class="name">
车架号照片:
</view>
<view class="imgList">
<view class="img">
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
</view>
<view class="img">
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
</view>
<view class="img">
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
</view>
</view>
</view>
</view>
</view>
</view>
</uni-popup>
</view> </view>
</view> </view>
</template> </template>
@ -220,18 +369,17 @@
HeadInfo HeadInfo
}, },
methods: { methods: {
cs() { open() {
console.log(1); this.$refs.popup.open('center')
},
close() {
this.$refs.popup.close()
} }
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.blue {
color: #108ee9;
}
.details { .details {
.container { .container {
padding: 20px 30px; padding: 20px 30px;
@ -274,4 +422,112 @@
} }
} }
} }
.dialog {
width: 90vh;
height: 80vh;
background-color: #fff;
border-radius: 10px;
.dtitle {
width: 100%;
height: 60px;
line-height: 60px;
border-radius: 10px 10px 0 0;
padding: 0 20px;
font-size: 18px;
font-weight: 700;
background-color: #f9f9f9;
text-align: left;
display: flex;
justify-content: space-between;
}
.tableContant {
height: calc(80vh - 60px);
overflow-y: auto;
.nr {
padding: 0 20px;
height: 60px;
line-height: 60px;
display: flex;
justify-content: flex-start;
.text {
min-width: 120px;
text-align: left;
}
}
.table {
width: calc(100% - 40px);
margin: 0 20px 20px;
padding: 0 20px;
border-bottom: 1px solid #ebebeb;
.title {
height: 40px;
line-height: 40px;
font-weight: 900;
text-align: left;
display: flex;
justify-content: flex-start;
.tag {
width: 60px;
margin: 10px 15px 0;
border-radius: 3px;
height: 20px;
line-height: 20px;
font-weight: 400;
color: #fff;
text-align: center;
background-color: #108ee9;
}
}
.row {
width: 100%;
display: flex;
justify-content: space-between;
font-size: 18px;
height: 40px;
font-size: 10px;
.col {
width: 32%;
text-align: left;
}
}
.imgRow {
margin-bottom: 25rpx;
display: flex;
justify-content: flex-start;
.name {
width: 80px;
text-align: left;
font-size: 10px;
}
.imgList {
width: calc(100% - 80px);
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
.img {
width: 100px;
margin-left: 10px;
margin-bottom: 10px;
}
}
}
}
}
}
</style> </style>

2
uni_modules/uni-popup/changelog.md
View File

@ -1,3 +1,5 @@
## 1.8.3（2023-04-17）
- 修复 uni-popup 重复打开时的 bug
## 1.8.2（2023-02-02） ## 1.8.2（2023-02-02）
- uni-popup-dialog 组件新增 inputType 属性 - uni-popup-dialog 组件新增 inputType 属性
## 1.8.1（2022-12-01） ## 1.8.1（2022-12-01）

3
uni_modules/uni-popup/components/uni-popup/uni-popup.vue
View File

@ -269,8 +269,7 @@
open(direction) { open(direction) {
// fix by mehaotian 处理快速打开关闭的情况 // fix by mehaotian 处理快速打开关闭的情况
if (this.showPopup) { if (this.showPopup) {
clearTimeout(this.timer) return
this.showPopup = false
} }
let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share'] let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share']
if (!(direction && innerType.indexOf(direction) !== -1)) { if (!(direction && innerType.indexOf(direction) !== -1)) {

2
uni_modules/uni-popup/package.json
View File

@ -1,7 +1,7 @@
{ {
"id": "uni-popup", "id": "uni-popup",
"displayName": "uni-popup 弹出层", "displayName": "uni-popup 弹出层",
"version": "1.8.2", "version": "1.8.3",
"description": " Popup 组件，提供常用的弹层", "description": " Popup 组件，提供常用的弹层",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",

32
uni_modules/uni-transition/changelog.md
View File

@ -1,20 +1,22 @@
## 1.3.2（2023-05-04）
- 修复 NVUE 平台报错的问题
## 1.3.1（2021-11-23） ## 1.3.1（2021-11-23）
- 修复 init 方法初始化问题 - 修复 init 方法初始化问题
## 1.3.0（2021-11-19） ## 1.3.0（2021-11-19）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) - 优化 组件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) - 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-transition](https://uniapp.dcloud.io/component/uniui/uni-transition)
## 1.2.1（2021-09-27） ## 1.2.1（2021-09-27）
- 修复 init 方法不生效的 Bug - 修复 init 方法不生效的 Bug
## 1.2.0（2021-07-30） ## 1.2.0（2021-07-30）
- 组件兼容 vue3，如何创建 vue3 项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) - 组件兼容 vue3，如何创建 vue3 项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.1（2021-05-12） ## 1.1.1（2021-05-12）
- 新增 示例地址 - 新增 示例地址
- 修复 示例项目缺少组件的 Bug - 修复 示例项目缺少组件的 Bug
## 1.1.0（2021-04-22） ## 1.1.0（2021-04-22）
- 新增 通过方法自定义动画 - 新增 通过方法自定义动画
- 新增 custom-class 非 NVUE 平台支持自定义 class 定制样式 - 新增 custom-class 非 NVUE 平台支持自定义 class 定制样式
- 优化 动画触发逻辑，使动画更流畅 - 优化 动画触发逻辑，使动画更流畅
- 优化 支持单独的动画类型 - 优化 支持单独的动画类型
- 优化 文档示例 - 优化 文档示例
## 1.0.2（2021-02-05） ## 1.0.2（2021-02-05）
- 调整为 uni_modules 目录规范 - 调整为 uni_modules 目录规范

225
uni_modules/uni-transition/components/uni-transition/createAnimation.js
View File

@ -1,128 +1,131 @@
// const defaultOption = { // const defaultOption = {
// duration: 300, // duration: 300,
// timingFunction: 'linear', // timingFunction: 'linear',
// delay: 0, // delay: 0,
// transformOrigin: '50% 50% 0' // transformOrigin: '50% 50% 0'
// } // }
// #ifdef APP-NVUE // #ifdef APP-NVUE
const nvueAnimation = uni.requireNativePlugin('animation') const nvueAnimation = uni.requireNativePlugin('animation')
// #endif // #endif
class MPAnimation { class MPAnimation {
constructor(options, _this) { constructor(options, _this) {
this.options = options this.options = options
this.animation = uni.createAnimation(options) // 在iOS10+QQ小程序平台下，传给原生的对象一定是个普通对象而不是Proxy对象，否则会报parameter should be Object instead of ProxyObject的错误
this.currentStepAnimates = {} this.animation = uni.createAnimation({
this.next = 0 ...options
this.$ = _this })
this.currentStepAnimates = {}
} this.next = 0
this.$ = _this
_nvuePushAnimates(type, args) {
let aniObj = this.currentStepAnimates[this.next] }
let styles = {}
if (!aniObj) { _nvuePushAnimates(type, args) {
styles = { let aniObj = this.currentStepAnimates[this.next]
styles: {}, let styles = {}
config: {} if (!aniObj) {
} styles = {
} else { styles: {},
styles = aniObj config: {}
} }
if (animateTypes1.includes(type)) { } else {
if (!styles.styles.transform) { styles = aniObj
styles.styles.transform = '' }
if (animateTypes1.includes(type)) {
if (!styles.styles.transform) {
styles.styles.transform = ''
} }
let unit = '' let unit = ''
if(type === 'rotate'){ if(type === 'rotate'){
unit = 'deg' unit = 'deg'
} }
styles.styles.transform += `${type}(${args+unit}) ` styles.styles.transform += `${type}(${args+unit}) `
} else { } else {
styles.styles[type] = `${args}` styles.styles[type] = `${args}`
} }
this.currentStepAnimates[this.next] = styles this.currentStepAnimates[this.next] = styles
} }
_animateRun(styles = {}, config = {}) { _animateRun(styles = {}, config = {}) {
let ref = this.$.$refs['ani'].ref let ref = this.$.$refs['ani'].ref
if (!ref) return if (!ref) return
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
nvueAnimation.transition(ref, { nvueAnimation.transition(ref, {
styles, styles,
...config ...config
}, res => { }, res => {
resolve() resolve()
}) })
}) })
} }
_nvueNextAnimate(animates, step = 0, fn) { _nvueNextAnimate(animates, step = 0, fn) {
let obj = animates[step] let obj = animates[step]
if (obj) { if (obj) {
let { let {
styles, styles,
config config
} = obj } = obj
this._animateRun(styles, config).then(() => { this._animateRun(styles, config).then(() => {
step += 1 step += 1
this._nvueNextAnimate(animates, step, fn) this._nvueNextAnimate(animates, step, fn)
}) })
} else { } else {
this.currentStepAnimates = {} this.currentStepAnimates = {}
typeof fn === 'function' && fn() typeof fn === 'function' && fn()
this.isEnd = true this.isEnd = true
} }
} }
step(config = {}) { step(config = {}) {
// #ifndef APP-NVUE // #ifndef APP-NVUE
this.animation.step(config) this.animation.step(config)
// #endif // #endif
// #ifdef APP-NVUE // #ifdef APP-NVUE
this.currentStepAnimates[this.next].config = Object.assign({}, this.options, config) this.currentStepAnimates[this.next].config = Object.assign({}, this.options, config)
this.currentStepAnimates[this.next].styles.transformOrigin = this.currentStepAnimates[this.next].config.transformOrigin this.currentStepAnimates[this.next].styles.transformOrigin = this.currentStepAnimates[this.next].config.transformOrigin
this.next++ this.next++
// #endif // #endif
return this return this
} }
run(fn) { run(fn) {
// #ifndef APP-NVUE // #ifndef APP-NVUE
this.$.animationData = this.animation.export() this.$.animationData = this.animation.export()
this.$.timer = setTimeout(() => { this.$.timer = setTimeout(() => {
typeof fn === 'function' && fn() typeof fn === 'function' && fn()
}, this.$.durationTime) }, this.$.durationTime)
// #endif // #endif
// #ifdef APP-NVUE // #ifdef APP-NVUE
this.isEnd = false this.isEnd = false
let ref = this.$.$refs['ani'] && this.$.$refs['ani'].ref let ref = this.$.$refs['ani'] && this.$.$refs['ani'].ref
if(!ref) return if(!ref) return
this._nvueNextAnimate(this.currentStepAnimates, 0, fn) this._nvueNextAnimate(this.currentStepAnimates, 0, fn)
this.next = 0 this.next = 0
// #endif // #endif
} }
} }
const animateTypes1 = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d', const animateTypes1 = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d',
'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY', 'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY',
'translateZ' 'translateZ'
] ]
const animateTypes2 = ['opacity', 'backgroundColor'] const animateTypes2 = ['opacity', 'backgroundColor']
const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom'] const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom']
animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => { animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => {
MPAnimation.prototype[type] = function(...args) { MPAnimation.prototype[type] = function(...args) {
// #ifndef APP-NVUE // #ifndef APP-NVUE
this.animation[type](...args) this.animation[type](...args)
// #endif // #endif
// #ifdef APP-NVUE // #ifdef APP-NVUE
this._nvuePushAnimates(type, args) this._nvuePushAnimates(type, args)
// #endif // #endif
return this return this
} }
}) })
export function createAnimation(option, _this) { export function createAnimation(option, _this) {
if(!_this) return if(!_this) return
clearTimeout(_this.timer) clearTimeout(_this.timer)
return new MPAnimation(option, _this) return new MPAnimation(option, _this)
} }

539
uni_modules/uni-transition/components/uni-transition/uni-transition.vue
View File

@ -1,277 +1,286 @@
<template> <template>
<view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view> <!-- #ifndef APP-NVUE -->
</template> <view v-show="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view>
<!-- #endif -->
<script> <!-- #ifdef APP-NVUE -->
import { createAnimation } from './createAnimation' <view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view>
<!-- #endif -->
/** </template>
* Transition 过渡动画
* @description 简单过渡动画组件 <script>
* @tutorial https://ext.dcloud.net.cn/plugin?id=985 import { createAnimation } from './createAnimation'
* @property {Boolean} show = [false|true] 控制组件显示或隐藏
* @property {Array|String} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型 /**
* @value fade 渐隐渐出过渡 * Transition 过渡动画
* @value slide-top 由上至下过渡 * @description 简单过渡动画组件
* @value slide-right 由右至左过渡 * @tutorial https://ext.dcloud.net.cn/plugin?id=985
* @value slide-bottom 由下至上过渡 * @property {Boolean} show = [false|true] 控制组件显示或隐藏
* @value slide-left 由左至右过渡 * @property {Array|String} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
* @value zoom-in 由小到大过渡 * @value fade 渐隐渐出过渡
* @value zoom-out 由大到小过渡 * @value slide-top 由上至下过渡
* @property {Number} duration 过渡动画持续时间 * @value slide-right 由右至左过渡
* @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red` * @value slide-bottom 由下至上过渡
*/ * @value slide-left 由左至右过渡
export default { * @value zoom-in 由小到大过渡
name: 'uniTransition', * @value zoom-out 由大到小过渡
emits:['click','change'], * @property {Number} duration 过渡动画持续时间
props: { * @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
show: { */
type: Boolean, export default {
default: false name: 'uniTransition',
}, emits:['click','change'],
modeClass: { props: {
type: [Array, String], show: {
default() { type: Boolean,
return 'fade' default: false
} },
}, modeClass: {
duration: { type: [Array, String],
type: Number, default() {
default: 300 return 'fade'
}, }
styles: { },
type: Object, duration: {
default() { type: Number,
return {} default: 300
} },
styles: {
type: Object,
default() {
return {}
}
}, },
customClass:{ customClass:{
type: String, type: String,
default: '' default: ''
} },
}, onceRender:{
data() { type:Boolean,
return { default:false
isShow: false, },
transform: '', },
opacity: 1, data() {
animationData: {}, return {
durationTime: 300, isShow: false,
config: {} transform: '',
} opacity: 1,
}, animationData: {},
watch: { durationTime: 300,
show: { config: {}
handler(newVal) { }
if (newVal) { },
this.open() watch: {
} else { show: {
// 避免上来就执行 close,导致动画错乱 handler(newVal) {
if (this.isShow) { if (newVal) {
this.close() this.open()
} } else {
} // 避免上来就执行 close,导致动画错乱
}, if (this.isShow) {
immediate: true this.close()
} }
}, }
computed: { },
// 生成样式数据 immediate: true
stylesObject() { }
let styles = { },
...this.styles, computed: {
'transition-duration': this.duration / 1000 + 's' // 生成样式数据
} stylesObject() {
let transform = '' let styles = {
for (let i in styles) { ...this.styles,
let line = this.toLine(i) 'transition-duration': this.duration / 1000 + 's'
transform += line + ':' + styles[i] + ';' }
} let transform = ''
return transform for (let i in styles) {
}, let line = this.toLine(i)
// 初始化动画条件 transform += line + ':' + styles[i] + ';'
transformStyles() { }
return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject return transform
} },
}, // 初始化动画条件
created() { transformStyles() {
// 动画默认配置 return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject
this.config = { }
duration: this.duration, },
timingFunction: 'ease', created() {
transformOrigin: '50% 50%', // 动画默认配置
delay: 0 this.config = {
} duration: this.duration,
this.durationTime = this.duration timingFunction: 'ease',
}, transformOrigin: '50% 50%',
methods: { delay: 0
/** }
* ref 触发 初始化动画 this.durationTime = this.duration
*/ },
init(obj = {}) { methods: {
if (obj.duration) { /**
this.durationTime = obj.duration * ref 触发 初始化动画
} */
this.animation = createAnimation(Object.assign(this.config, obj),this) init(obj = {}) {
}, if (obj.duration) {
/** this.durationTime = obj.duration
* 点击组件触发回调 }
*/ this.animation = createAnimation(Object.assign(this.config, obj),this)
onClick() { },
this.$emit('click', { /**
detail: this.isShow * 点击组件触发回调
}) */
}, onClick() {
/** this.$emit('click', {
* ref 触发 动画分组 detail: this.isShow
* @param {Object} obj })
*/ },
step(obj, config = {}) { /**
* ref 触发 动画分组
* @param {Object} obj
*/
step(obj, config = {}) {
if (!this.animation) return if (!this.animation) return
for (let i in obj) { for (let i in obj) {
try { try {
if(typeof obj[i] === 'object'){ if(typeof obj[i] === 'object'){
this.animation[i](...obj[i]) this.animation[i](...obj[i])
}else{ }else{
this.animation[i](obj[i]) this.animation[i](obj[i])
} }
} catch (e) { } catch (e) {
console.error(`方法 ${i} 不存在`) console.error(`方法 ${i} 不存在`)
} }
} }
this.animation.step(config) this.animation.step(config)
return this return this
}, },
/** /**
* ref 触发 执行动画 * ref 触发 执行动画
*/ */
run(fn) { run(fn) {
if (!this.animation) return if (!this.animation) return
this.animation.run(fn) this.animation.run(fn)
}, },
// 开始过度动画 // 开始过度动画
open() { open() {
clearTimeout(this.timer) clearTimeout(this.timer)
this.transform = '' this.transform = ''
this.isShow = true this.isShow = true
let { opacity, transform } = this.styleInit(false) let { opacity, transform } = this.styleInit(false)
if (typeof opacity !== 'undefined') { if (typeof opacity !== 'undefined') {
this.opacity = opacity this.opacity = opacity
} }
this.transform = transform this.transform = transform
// 确保动态样式已经生效后，执行动画，如果不加 nextTick ，会导致 wx 动画执行异常 // 确保动态样式已经生效后，执行动画，如果不加 nextTick ，会导致 wx 动画执行异常
this.$nextTick(() => { this.$nextTick(() => {
// TODO 定时器保证动画完全执行，目前有些问题，后面会取消定时器 // TODO 定时器保证动画完全执行，目前有些问题，后面会取消定时器
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
this.animation = createAnimation(this.config, this) this.animation = createAnimation(this.config, this)
this.tranfromInit(false).step() this.tranfromInit(false).step()
this.animation.run() this.animation.run()
this.$emit('change', { this.$emit('change', {
detail: this.isShow detail: this.isShow
}) })
}, 20) }, 20)
}) })
}, },
// 关闭过度动画 // 关闭过度动画
close(type) { close(type) {
if (!this.animation) return if (!this.animation) return
this.tranfromInit(true) this.tranfromInit(true)
.step() .step()
.run(() => { .run(() => {
this.isShow = false this.isShow = false
this.animationData = null this.animationData = null
this.animation = null this.animation = null
let { opacity, transform } = this.styleInit(false) let { opacity, transform } = this.styleInit(false)
this.opacity = opacity || 1 this.opacity = opacity || 1
this.transform = transform this.transform = transform
this.$emit('change', { this.$emit('change', {
detail: this.isShow detail: this.isShow
}) })
}) })
}, },
// 处理动画开始前的默认样式 // 处理动画开始前的默认样式
styleInit(type) { styleInit(type) {
let styles = { let styles = {
transform: '' transform: ''
} }
let buildStyle = (type, mode) => { let buildStyle = (type, mode) => {
if (mode === 'fade') { if (mode === 'fade') {
styles.opacity = this.animationType(type)[mode] styles.opacity = this.animationType(type)[mode]
} else { } else {
styles.transform += this.animationType(type)[mode] + ' ' styles.transform += this.animationType(type)[mode] + ' '
} }
} }
if (typeof this.modeClass === 'string') { if (typeof this.modeClass === 'string') {
buildStyle(type, this.modeClass) buildStyle(type, this.modeClass)
} else { } else {
this.modeClass.forEach(mode => { this.modeClass.forEach(mode => {
buildStyle(type, mode) buildStyle(type, mode)
}) })
} }
return styles return styles
}, },
// 处理内置组合动画 // 处理内置组合动画
tranfromInit(type) { tranfromInit(type) {
let buildTranfrom = (type, mode) => { let buildTranfrom = (type, mode) => {
let aniNum = null let aniNum = null
if (mode === 'fade') { if (mode === 'fade') {
aniNum = type ? 0 : 1 aniNum = type ? 0 : 1
} else { } else {
aniNum = type ? '-100%' : '0' aniNum = type ? '-100%' : '0'
if (mode === 'zoom-in') { if (mode === 'zoom-in') {
aniNum = type ? 0.8 : 1 aniNum = type ? 0.8 : 1
} }
if (mode === 'zoom-out') { if (mode === 'zoom-out') {
aniNum = type ? 1.2 : 1 aniNum = type ? 1.2 : 1
} }
if (mode === 'slide-right') { if (mode === 'slide-right') {
aniNum = type ? '100%' : '0' aniNum = type ? '100%' : '0'
} }
if (mode === 'slide-bottom') { if (mode === 'slide-bottom') {
aniNum = type ? '100%' : '0' aniNum = type ? '100%' : '0'
} }
} }
this.animation[this.animationMode()[mode]](aniNum) this.animation[this.animationMode()[mode]](aniNum)
} }
if (typeof this.modeClass === 'string') { if (typeof this.modeClass === 'string') {
buildTranfrom(type, this.modeClass) buildTranfrom(type, this.modeClass)
} else { } else {
this.modeClass.forEach(mode => { this.modeClass.forEach(mode => {
buildTranfrom(type, mode) buildTranfrom(type, mode)
}) })
} }
return this.animation return this.animation
}, },
animationType(type) { animationType(type) {
return { return {
fade: type ? 1 : 0, fade: type ? 1 : 0,
'slide-top': `translateY(${type ? '0' : '-100%'})`, 'slide-top': `translateY(${type ? '0' : '-100%'})`,
'slide-right': `translateX(${type ? '0' : '100%'})`, 'slide-right': `translateX(${type ? '0' : '100%'})`,
'slide-bottom': `translateY(${type ? '0' : '100%'})`, 'slide-bottom': `translateY(${type ? '0' : '100%'})`,
'slide-left': `translateX(${type ? '0' : '-100%'})`, 'slide-left': `translateX(${type ? '0' : '-100%'})`,
'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`, 'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})` 'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
} }
}, },
// 内置动画类型与实际动画对应字典 // 内置动画类型与实际动画对应字典
animationMode() { animationMode() {
return { return {
fade: 'opacity', fade: 'opacity',
'slide-top': 'translateY', 'slide-top': 'translateY',
'slide-right': 'translateX', 'slide-right': 'translateX',
'slide-bottom': 'translateY', 'slide-bottom': 'translateY',
'slide-left': 'translateX', 'slide-left': 'translateX',
'zoom-in': 'scale', 'zoom-in': 'scale',
'zoom-out': 'scale' 'zoom-out': 'scale'
} }
}, },
// 驼峰转中横线 // 驼峰转中横线
toLine(name) { toLine(name) {
return name.replace(/([A-Z])/g, '-$1').toLowerCase() return name.replace(/([A-Z])/g, '-$1').toLowerCase()
} }
} }
} }
</script> </script>
<style></style> <style></style>

169
uni_modules/uni-transition/package.json
View File

@ -1,87 +1,84 @@
{ {
"id": "uni-transition", "id": "uni-transition",
"displayName": "uni-transition 过渡动画", "displayName": "uni-transition 过渡动画",
"version": "1.3.1", "version": "1.3.2",
"description": "元素的简单过渡动画", "description": "元素的简单过渡动画",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",
"uniui", "uniui",
"动画", "动画",
"过渡", "过渡",
"过渡动画" "过渡动画"
], ],
"repository": "https://github.com/dcloudio/uni-ui", "repository": "https://github.com/dcloudio/uni-ui",
"engines": { "engines": {
"HBuilderX": "" "HBuilderX": ""
}, },
"directories": { "directories": {
"example": "../../temps/example_temps" "example": "../../temps/example_temps"
}, },
"dcloudext": { "dcloudext": {
"category": [ "sale": {
"前端组件", "regular": {
"通用组件" "price": "0.00"
], },
"sale": { "sourcecode": {
"regular": { "price": "0.00"
"price": "0.00" }
}, },
"sourcecode": { "contact": {
"price": "0.00" "qq": ""
} },
}, "declaration": {
"contact": { "ads": "无",
"qq": "" "data": "无",
}, "permissions": "无"
"declaration": { },
"ads": "无", "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
"data": "无", "type": "component-vue"
"permissions": "无" },
}, "uni_modules": {
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" "dependencies": ["uni-scss"],
}, "encrypt": [],
"uni_modules": { "platforms": {
"dependencies": ["uni-scss"], "cloud": {
"encrypt": [], "tcb": "y",
"platforms": { "aliyun": "y"
"cloud": { },
"tcb": "y", "client": {
"aliyun": "y" "App": {
}, "app-vue": "y",
"client": { "app-nvue": "y"
"App": { },
"app-vue": "y", "H5-mobile": {
"app-nvue": "y" "Safari": "y",
}, "Android Browser": "y",
"H5-mobile": { "微信浏览器(Android)": "y",
"Safari": "y", "QQ浏览器(Android)": "y"
"Android Browser": "y", },
"微信浏览器(Android)": "y", "H5-pc": {
"QQ浏览器(Android)": "y" "Chrome": "y",
}, "IE": "y",
"H5-pc": { "Edge": "y",
"Chrome": "y", "Firefox": "y",
"IE": "y", "Safari": "y"
"Edge": "y", },
"Firefox": "y", "小程序": {
"Safari": "y" "微信": "y",
}, "阿里": "y",
"小程序": { "百度": "y",
"微信": "y", "字节跳动": "y",
"阿里": "y", "QQ": "y"
"百度": "y", },
"字节跳动": "y", "快应用": {
"QQ": "y" "华为": "u",
}, "联盟": "u"
"快应用": { },
"华为": "u", "Vue": {
"联盟": "u" "vue2": "y",
}, "vue3": "y"
"Vue": { }
"vue2": "y", }
"vue3": "y" }
} }
}
}
}
} }

20
uni_modules/uni-transition/readme.md
View File

@ -1,11 +1,11 @@
## Transition 过渡动画 ## Transition 过渡动画
> **组件名：uni-transition** > **组件名：uni-transition**
> 代码块： `uTransition` > 代码块： `uTransition`
元素过渡动画 元素过渡动画
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-transition) ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-transition)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 #### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839