增加新模块
This commit is contained in:
何江明
+29
@@ -0,0 +1,29 @@
|
||||
"use strict";
|
||||
const uni_modules_uviewPlus_libs_vue = require("../../libs/vue.js");
|
||||
const uni_modules_uviewPlus_libs_config_props = require("../../libs/config/props.js");
|
||||
const props = uni_modules_uviewPlus_libs_vue.defineMixin({
|
||||
props: {
|
||||
// 是否展示组件
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.transition.show
|
||||
},
|
||||
// 使用的动画模式
|
||||
mode: {
|
||||
type: String,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.transition.mode
|
||||
},
|
||||
// 动画的执行时间，单位ms
|
||||
duration: {
|
||||
type: [String, Number],
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.transition.duration
|
||||
},
|
||||
// 使用的动画过渡函数
|
||||
timingFunction: {
|
||||
type: String,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.transition.timingFunction
|
||||
}
|
||||
}
|
||||
});
|
||||
exports.props = props;
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/uview-plus/components/u-transition/props.js.map
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
"use strict";
|
||||
const Transition = {
|
||||
// transition动画组件的props
|
||||
transition: {
|
||||
show: false,
|
||||
mode: "fade",
|
||||
duration: "300",
|
||||
timingFunction: "ease-out"
|
||||
}
|
||||
};
|
||||
exports.Transition = Transition;
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/uview-plus/components/u-transition/transition.js.map
|
||||
Vendored
+63
@@ -0,0 +1,63 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const uni_modules_uviewPlus_libs_function_index = require("../../libs/function/index.js");
|
||||
const getClassNames = (name) => ({
|
||||
enter: `u-${name}-enter u-${name}-enter-active`,
|
||||
"enter-to": `u-${name}-enter-to u-${name}-enter-active`,
|
||||
leave: `u-${name}-leave u-${name}-leave-active`,
|
||||
"leave-to": `u-${name}-leave-to u-${name}-leave-active`
|
||||
});
|
||||
const transitionMixin = {
|
||||
methods: {
|
||||
// 组件被点击发出事件
|
||||
clickHandler() {
|
||||
this.$emit("click");
|
||||
},
|
||||
// vue版本的组件进场处理
|
||||
async vueEnter() {
|
||||
const classNames = getClassNames(this.mode);
|
||||
this.status = "enter";
|
||||
this.$emit("beforeEnter");
|
||||
this.inited = true;
|
||||
this.display = true;
|
||||
this.classes = classNames.enter;
|
||||
await common_vendor.nextTick$1();
|
||||
{
|
||||
await uni_modules_uviewPlus_libs_function_index.sleep(20);
|
||||
this.$emit("enter");
|
||||
this.transitionEnded = false;
|
||||
this.$emit("afterEnter");
|
||||
this.classes = classNames["enter-to"];
|
||||
}
|
||||
},
|
||||
// 动画离场处理
|
||||
async vueLeave() {
|
||||
if (!this.display)
|
||||
return;
|
||||
const classNames = getClassNames(this.mode);
|
||||
this.status = "leave";
|
||||
this.$emit("beforeLeave");
|
||||
this.classes = classNames.leave;
|
||||
await common_vendor.nextTick$1();
|
||||
{
|
||||
this.transitionEnded = false;
|
||||
this.$emit("leave");
|
||||
setTimeout(this.onTransitionEnd, this.duration);
|
||||
this.classes = classNames["leave-to"];
|
||||
}
|
||||
},
|
||||
// 完成过渡后触发
|
||||
onTransitionEnd() {
|
||||
if (this.transitionEnded)
|
||||
return;
|
||||
this.transitionEnded = true;
|
||||
this.$emit(this.status === "leave" ? "afterLeave" : "afterEnter");
|
||||
if (!this.show && this.display) {
|
||||
this.display = false;
|
||||
this.inited = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
exports.transitionMixin = transitionMixin;
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/uview-plus/components/u-transition/transitionMixin.js.map
|
||||
Vendored
+64
@@ -0,0 +1,64 @@
|
||||
"use strict";
|
||||
const uni_modules_uviewPlus_components_uTransition_props = require("./props.js");
|
||||
const uni_modules_uviewPlus_libs_mixin_mpMixin = require("../../libs/mixin/mpMixin.js");
|
||||
const uni_modules_uviewPlus_libs_mixin_mixin = require("../../libs/mixin/mixin.js");
|
||||
const uni_modules_uviewPlus_libs_function_index = require("../../libs/function/index.js");
|
||||
const uni_modules_uviewPlus_components_uTransition_transitionMixin = require("./transitionMixin.js");
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const _sfc_main = {
|
||||
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 {
|
||||
transitionDuration: `${this.duration}ms`,
|
||||
// display: `${this.display ? '' : 'none'}`,
|
||||
transitionTimingFunction: this.timingFunction,
|
||||
// 避免自定义样式影响到动画属性，所以写在viewStyle前面
|
||||
...uni_modules_uviewPlus_libs_function_index.addStyle(customStyle),
|
||||
...viewStyle
|
||||
};
|
||||
}
|
||||
},
|
||||
// 将mixin挂在到组件中，实际上为一个vue格式对象。
|
||||
mixins: [uni_modules_uviewPlus_libs_mixin_mpMixin.mpMixin, uni_modules_uviewPlus_libs_mixin_mixin.mixin, uni_modules_uviewPlus_components_uTransition_transitionMixin.transitionMixin, uni_modules_uviewPlus_components_uTransition_props.props],
|
||||
watch: {
|
||||
show: {
|
||||
handler(newVal) {
|
||||
newVal ? this.vueEnter() : this.vueLeave();
|
||||
},
|
||||
// 表示同时监听初始化时的props的show的意思
|
||||
immediate: true
|
||||
}
|
||||
}
|
||||
};
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return common_vendor.e({
|
||||
a: $data.inited
|
||||
}, $data.inited ? {
|
||||
b: common_vendor.o((...args) => _ctx.clickHandler && _ctx.clickHandler(...args)),
|
||||
c: common_vendor.n($data.classes),
|
||||
d: common_vendor.s($options.mergeStyle),
|
||||
e: common_vendor.o((...args) => _ctx.noop && _ctx.noop(...args))
|
||||
} : {});
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-5cec8177"]]);
|
||||
wx.createComponent(Component);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/uview-plus/components/u-transition/u-transition.js.map
|
||||
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
<view wx:if="{{a}}" ref="u-transition" bindtap="{{b}}" class="{{['u-transition', 'data-v-5cec8177', c]}}" style="{{d}}" bindtouchmove="{{e}}"><slot/></view>
|
||||
Vendored
+143
@@ -0,0 +1,143 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/* uni.scss */
|
||||
/**
|
||||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
.u-empty.data-v-5cec8177,
|
||||
.u-empty__wrap.data-v-5cec8177,
|
||||
.u-tabs.data-v-5cec8177,
|
||||
.u-tabs__wrapper.data-v-5cec8177,
|
||||
.u-tabs__wrapper__scroll-view-wrapper.data-v-5cec8177,
|
||||
.u-tabs__wrapper__scroll-view.data-v-5cec8177,
|
||||
.u-tabs__wrapper__nav.data-v-5cec8177,
|
||||
.u-tabs__wrapper__nav__line.data-v-5cec8177,
|
||||
.up-empty.data-v-5cec8177,
|
||||
.up-empty__wrap.data-v-5cec8177,
|
||||
.up-tabs.data-v-5cec8177,
|
||||
.up-tabs__wrapper.data-v-5cec8177,
|
||||
.up-tabs__wrapper__scroll-view-wrapper.data-v-5cec8177,
|
||||
.up-tabs__wrapper__scroll-view.data-v-5cec8177,
|
||||
.up-tabs__wrapper__nav.data-v-5cec8177,
|
||||
.up-tabs__wrapper__nav__line.data-v-5cec8177 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
flex-basis: auto;
|
||||
align-items: stretch;
|
||||
align-content: flex-start;
|
||||
}
|
||||
/**
|
||||
* vue版本动画内置的动画模式有如下：
|
||||
* fade：淡入
|
||||
* zoom：缩放
|
||||
* fade-zoom：缩放淡入
|
||||
* fade-up：上滑淡入
|
||||
* fade-down：下滑淡入
|
||||
* fade-left：左滑淡入
|
||||
* fade-right：右滑淡入
|
||||
* slide-up：上滑进入
|
||||
* slide-down：下滑进入
|
||||
* slide-left：左滑进入
|
||||
* slide-right：右滑进入
|
||||
*/
|
||||
.u-fade-enter-active.data-v-5cec8177,
|
||||
.u-fade-leave-active.data-v-5cec8177 {
|
||||
transition-property: opacity;
|
||||
}
|
||||
.u-fade-enter.data-v-5cec8177,
|
||||
.u-fade-leave-to.data-v-5cec8177 {
|
||||
opacity: 0;
|
||||
}
|
||||
.u-fade-zoom-enter.data-v-5cec8177,
|
||||
.u-fade-zoom-leave-to.data-v-5cec8177 {
|
||||
transform: scale(0.95);
|
||||
opacity: 0;
|
||||
}
|
||||
.u-fade-zoom-enter-active.data-v-5cec8177,
|
||||
.u-fade-zoom-leave-active.data-v-5cec8177 {
|
||||
transition-property: transform, opacity;
|
||||
}
|
||||
.u-fade-down-enter-active.data-v-5cec8177,
|
||||
.u-fade-down-leave-active.data-v-5cec8177,
|
||||
.u-fade-left-enter-active.data-v-5cec8177,
|
||||
.u-fade-left-leave-active.data-v-5cec8177,
|
||||
.u-fade-right-enter-active.data-v-5cec8177,
|
||||
.u-fade-right-leave-active.data-v-5cec8177,
|
||||
.u-fade-up-enter-active.data-v-5cec8177,
|
||||
.u-fade-up-leave-active.data-v-5cec8177 {
|
||||
transition-property: opacity, transform;
|
||||
}
|
||||
.u-fade-up-enter.data-v-5cec8177,
|
||||
.u-fade-up-leave-to.data-v-5cec8177 {
|
||||
transform: translate3d(0, 100%, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
.u-fade-down-enter.data-v-5cec8177,
|
||||
.u-fade-down-leave-to.data-v-5cec8177 {
|
||||
transform: translate3d(0, -100%, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
.u-fade-left-enter.data-v-5cec8177,
|
||||
.u-fade-left-leave-to.data-v-5cec8177 {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
.u-fade-right-enter.data-v-5cec8177,
|
||||
.u-fade-right-leave-to.data-v-5cec8177 {
|
||||
transform: translate3d(100%, 0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
.u-slide-down-enter-active.data-v-5cec8177,
|
||||
.u-slide-down-leave-active.data-v-5cec8177,
|
||||
.u-slide-left-enter-active.data-v-5cec8177,
|
||||
.u-slide-left-leave-active.data-v-5cec8177,
|
||||
.u-slide-right-enter-active.data-v-5cec8177,
|
||||
.u-slide-right-leave-active.data-v-5cec8177,
|
||||
.u-slide-up-enter-active.data-v-5cec8177,
|
||||
.u-slide-up-leave-active.data-v-5cec8177 {
|
||||
transition-property: transform;
|
||||
}
|
||||
.u-slide-up-enter.data-v-5cec8177,
|
||||
.u-slide-up-leave-to.data-v-5cec8177 {
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
.u-slide-down-enter.data-v-5cec8177,
|
||||
.u-slide-down-leave-to.data-v-5cec8177 {
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
.u-slide-left-enter.data-v-5cec8177,
|
||||
.u-slide-left-leave-to.data-v-5cec8177 {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
.u-slide-right-enter.data-v-5cec8177,
|
||||
.u-slide-right-leave-to.data-v-5cec8177 {
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
.u-zoom-enter-active.data-v-5cec8177,
|
||||
.u-zoom-leave-active.data-v-5cec8177 {
|
||||
transition-property: transform;
|
||||
}
|
||||
.u-zoom-enter.data-v-5cec8177,
|
||||
.u-zoom-leave-to.data-v-5cec8177 {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
Reference in New Issue
Block a user