dykj-football/uni_modules/uview-plus/components/u-transition/u-transition.vue
2024-04-17 15:27:43 +08:00

97 lines
2.8 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view
v-if="inited"
class="u-transition"
ref="u-transition"
@tap="clickHandler"
:class="classes"
:style="[mergeStyle]"
@touchmove="noop"
>
<slot />
</view>
</template>
<script>
import props from './props';
import mpMixin from '../../libs/mixin/mpMixin';
import mixin from '../../libs/mixin/mixin';
import { addStyle } from '../../libs/function/index';
// 组件的methods方法由于内容较长写在外部文件中通过mixin引入
import transition from "./transition.js";
/**
* transition 动画组件
* @description
* @tutorial
* @property {String} show 是否展示组件 (默认 false
* @property {String} mode 使用的动画模式 (默认 'fade'
* @property {String | Number} duration 动画的执行时间单位ms (默认 '300'
* @property {String} timingFunction 使用的动画过渡函数 (默认 'ease-out'
* @property {Object} customStyle 自定义样式
* @event {Function} before-enter 进入前触发
* @event {Function} enter 进入中触发
* @event {Function} after-enter 进入后触发
* @event {Function} before-leave 离开前触发
* @event {Function} leave 离开中触发
* @event {Function} after-leave 离开后触发
* @example
*/
export default {
name: 'u-transition',
data() {
return {
inited: false, // 是否显示/隐藏组件
viewStyle: {}, // 组件内部的样式
status: '', // 记录组件动画的状态
transitionEnded: false, // 组件是否结束的标记
display: false, // 组件是否展示
classes: '', // 应用的类名
}
},
emits: ['click', 'beforeEnter', 'enter', 'afterEnter', 'beforeLeave', 'leave', 'afterLeave'],
computed: {
mergeStyle() {
const { viewStyle, customStyle } = this
return {
// #ifndef APP-NVUE
transitionDuration: `${this.duration}ms`,
// display: `${this.display ? '' : 'none'}`,
transitionTimingFunction: this.timingFunction,
// #endif
// 避免自定义样式影响到动画属性所以写在viewStyle前面
...addStyle(customStyle),
...viewStyle
}
}
},
// 将mixin挂在到组件中实际上为一个vue格式对象。
mixins: [mpMixin, mixin, transition, props],
watch: {
show: {
handler(newVal) {
// vue和nvue分别执行不同的方法
// #ifdef APP-NVUE
newVal ? this.nvueEnter() : this.nvueLeave()
// #endif
// #ifndef APP-NVUE
newVal ? this.vueEnter() : this.vueLeave()
// #endif
},
// 表示同时监听初始化时的props的show的意思
immediate: true
}
}
}
</script>
<style lang="scss" scoped>
@import '../../libs/css/components.scss';
/* #ifndef APP-NVUE */
// vue版本动画相关的样式抽离在外部文件
@import './vue.ani-style.scss';
/* #endif */
.u-transition {}
</style>