From d1448cb0ef10f358bb7bddb4e1ec268515e0b787 Mon Sep 17 00:00:00 2001 From: gaoluyang <2820782392@qq.com> Date: 星期二, 15 七月 2025 11:46:57 +0800 Subject: [PATCH] 项目初始化 --- uni_modules/uview-ui/components/u-transition/u-transition.vue | 92 ++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 92 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-transition/u-transition.vue b/uni_modules/uview-ui/components/u-transition/u-transition.vue new file mode 100644 index 0000000..22831dc --- /dev/null +++ b/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'; +// 缁勪欢鐨刴ethods鏂规硶锛岀敱浜庡唴瀹硅緝闀匡紝鍐欏湪澶栭儴鏂囦欢涓�氳繃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 + // 閬垮厤鑷畾涔夋牱寮忓奖鍝嶅埌鍔ㄧ敾灞炴�э紝鎵�浠ュ啓鍦╲iewStyle鍓嶉潰 + ...uni.$u.addStyle(customStyle), + ...viewStyle + } + } + }, + // 灏唌ixin鎸傚湪鍒扮粍浠朵腑锛寀ni.$u.mixin瀹為檯涓婁负涓�涓獀ue鏍煎紡瀵硅薄 + mixins: [uni.$u.mpMixin, uni.$u.mixin, transition, props], + watch: { + show: { + handler(newVal) { + // vue鍜宯vue鍒嗗埆鎵ц涓嶅悓鐨勬柟娉� + // #ifdef APP-NVUE + newVal ? this.nvueEnter() : this.nvueLeave() + // #endif + // #ifndef APP-NVUE + newVal ? this.vueEnter() : this.vueLeave() + // #endif + }, + // 琛ㄧず鍚屾椂鐩戝惉鍒濆鍖栨椂鐨刾rops鐨剆how鐨勬剰鎬� + 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> -- Gitblit v1.9.3