bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

 minipro_standard/uni_modules/uview-ui/components/u-transition/u-transition.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,92 @@
<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.js';
// ç»„件的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: '', // åº”用的类名
      }
   },
   computed: {
       mergeStyle() {
           const { viewStyle, customStyle } = this
           return {
               // #ifndef APP-NVUE
               transitionDuration: `${this.duration}ms`,
               // display: `${this.display ? '' : 'none'}`,
            transitionTimingFunction: this.timingFunction,
               // #endif
            // é¿å…è‡ªå®šä¹‰æ ·å¼å½±å“åˆ°åŠ¨ç”»å±žæ€§ï¼Œæ‰€ä»¥å†™åœ¨viewStyle前面
               ...uni.$u.addStyle(customStyle),
               ...viewStyle
           }
       }
   },
   // å°†mixin挂在到组件中，uni.$u.mixin实际上为一个vue格式对象
   mixins: [uni.$u.mpMixin, uni.$u.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>