登录
This commit is contained in:
1173
unpackage/dist/dev/mp-weixin/uni_modules/uni-icons/components/uni-icons/icons.js
vendored
Normal file
1173
unpackage/dist/dev/mp-weixin/uni_modules/uni-icons/components/uni-icons/icons.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
64
unpackage/dist/dev/mp-weixin/uni_modules/uni-icons/components/uni-icons/uni-icons.js
vendored
Normal file
64
unpackage/dist/dev/mp-weixin/uni_modules/uni-icons/components/uni-icons/uni-icons.js
vendored
Normal file
@@ -0,0 +1,64 @@
|
||||
"use strict";
|
||||
const uni_modules_uniIcons_components_uniIcons_icons = require("./icons.js");
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
require("../../../../app.js");
|
||||
const getVal = (val) => {
|
||||
const reg = /^[0-9]*$/g;
|
||||
return typeof val === "number" || reg.test(val) ? val + "px" : val;
|
||||
};
|
||||
const _sfc_main = {
|
||||
name: "UniIcons",
|
||||
emits: ["click"],
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "#333333"
|
||||
},
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 16
|
||||
},
|
||||
customPrefix: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
icons: uni_modules_uniIcons_components_uniIcons_icons.icons.glyphs
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
unicode() {
|
||||
let code = this.icons.find((v) => v.font_class === this.type);
|
||||
if (code) {
|
||||
return unescape(`%u${code.unicode}`);
|
||||
}
|
||||
return "";
|
||||
},
|
||||
iconSize() {
|
||||
return getVal(this.size);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
_onClick() {
|
||||
this.$emit("click");
|
||||
}
|
||||
}
|
||||
};
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return {
|
||||
a: $props.color,
|
||||
b: $options.iconSize,
|
||||
c: common_vendor.n("uniui-" + $props.type),
|
||||
d: common_vendor.n($props.customPrefix),
|
||||
e: common_vendor.n($props.customPrefix ? $props.type : ""),
|
||||
f: common_vendor.o((...args) => $options._onClick && $options._onClick(...args))
|
||||
};
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:/项目2023/视力表/vision-record/uni_modules/uni-icons/components/uni-icons/uni-icons.vue"]]);
|
||||
wx.createComponent(Component);
|
4
unpackage/dist/dev/mp-weixin/uni_modules/uni-icons/components/uni-icons/uni-icons.json
vendored
Normal file
4
unpackage/dist/dev/mp-weixin/uni_modules/uni-icons/components/uni-icons/uni-icons.json
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
1
unpackage/dist/dev/mp-weixin/uni_modules/uni-icons/components/uni-icons/uni-icons.wxml
vendored
Normal file
1
unpackage/dist/dev/mp-weixin/uni_modules/uni-icons/components/uni-icons/uni-icons.wxml
vendored
Normal file
@@ -0,0 +1 @@
|
||||
<text style="{{'color:' + a + ';' + ('font-size:' + b)}}" class="{{['uni-icons', c, d, e]}}" bindtap="{{f}}"></text>
|
532
unpackage/dist/dev/mp-weixin/uni_modules/uni-icons/components/uni-icons/uni-icons.wxss
vendored
Normal file
532
unpackage/dist/dev/mp-weixin/uni_modules/uni-icons/components/uni-icons/uni-icons.wxss
vendored
Normal file
File diff suppressed because one or more lines are too long
370
unpackage/dist/dev/mp-weixin/uni_modules/uni-popup/components/uni-popup/uni-popup.js
vendored
Normal file
370
unpackage/dist/dev/mp-weixin/uni_modules/uni-popup/components/uni-popup/uni-popup.js
vendored
Normal file
@@ -0,0 +1,370 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const _sfc_main = {
|
||||
name: "uniPopup",
|
||||
components: {},
|
||||
emits: ["change", "maskClick"],
|
||||
props: {
|
||||
// 开启动画
|
||||
animation: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 弹出层类型,可选值,top: 顶部弹出层;bottom:底部弹出层;center:全屏弹出层
|
||||
// message: 消息提示 ; dialog : 对话框
|
||||
type: {
|
||||
type: String,
|
||||
default: "center"
|
||||
},
|
||||
// maskClick
|
||||
isMaskClick: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
// TODO 2 个版本后废弃属性 ,使用 isMaskClick
|
||||
maskClick: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: "none"
|
||||
},
|
||||
safeArea: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
maskBackgroundColor: {
|
||||
type: String,
|
||||
default: "rgba(0, 0, 0, 0.4)"
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
/**
|
||||
* 监听type类型
|
||||
*/
|
||||
type: {
|
||||
handler: function(type) {
|
||||
if (!this.config[type])
|
||||
return;
|
||||
this[this.config[type]](true);
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
isDesktop: {
|
||||
handler: function(newVal) {
|
||||
if (!this.config[newVal])
|
||||
return;
|
||||
this[this.config[this.type]](true);
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
/**
|
||||
* 监听遮罩是否可点击
|
||||
* @param {Object} val
|
||||
*/
|
||||
maskClick: {
|
||||
handler: function(val) {
|
||||
this.mkclick = val;
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
isMaskClick: {
|
||||
handler: function(val) {
|
||||
this.mkclick = val;
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
// H5 下禁止底部滚动
|
||||
showPopup(show) {
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
duration: 300,
|
||||
ani: [],
|
||||
showPopup: false,
|
||||
showTrans: false,
|
||||
popupWidth: 0,
|
||||
popupHeight: 0,
|
||||
config: {
|
||||
top: "top",
|
||||
bottom: "bottom",
|
||||
center: "center",
|
||||
left: "left",
|
||||
right: "right",
|
||||
message: "top",
|
||||
dialog: "center",
|
||||
share: "bottom"
|
||||
},
|
||||
maskClass: {
|
||||
position: "fixed",
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
backgroundColor: "rgba(0, 0, 0, 0.4)"
|
||||
},
|
||||
transClass: {
|
||||
position: "fixed",
|
||||
left: 0,
|
||||
right: 0
|
||||
},
|
||||
maskShow: true,
|
||||
mkclick: true,
|
||||
popupstyle: this.isDesktop ? "fixforpc-top" : "top"
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isDesktop() {
|
||||
return this.popupWidth >= 500 && this.popupHeight >= 500;
|
||||
},
|
||||
bg() {
|
||||
if (this.backgroundColor === "" || this.backgroundColor === "none") {
|
||||
return "transparent";
|
||||
}
|
||||
return this.backgroundColor;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const fixSize = () => {
|
||||
const {
|
||||
windowWidth,
|
||||
windowHeight,
|
||||
windowTop,
|
||||
safeArea,
|
||||
screenHeight,
|
||||
safeAreaInsets
|
||||
} = common_vendor.index.getSystemInfoSync();
|
||||
this.popupWidth = windowWidth;
|
||||
this.popupHeight = windowHeight + (windowTop || 0);
|
||||
if (safeArea && this.safeArea) {
|
||||
this.safeAreaInsets = screenHeight - safeArea.bottom;
|
||||
} else {
|
||||
this.safeAreaInsets = 0;
|
||||
}
|
||||
};
|
||||
fixSize();
|
||||
},
|
||||
// TODO vue3
|
||||
unmounted() {
|
||||
this.setH5Visible();
|
||||
},
|
||||
created() {
|
||||
if (this.isMaskClick === null && this.maskClick === null) {
|
||||
this.mkclick = true;
|
||||
} else {
|
||||
this.mkclick = this.isMaskClick !== null ? this.isMaskClick : this.maskClick;
|
||||
}
|
||||
if (this.animation) {
|
||||
this.duration = 300;
|
||||
} else {
|
||||
this.duration = 0;
|
||||
}
|
||||
this.messageChild = null;
|
||||
this.clearPropagation = false;
|
||||
this.maskClass.backgroundColor = this.maskBackgroundColor;
|
||||
},
|
||||
methods: {
|
||||
setH5Visible() {
|
||||
},
|
||||
/**
|
||||
* 公用方法,不显示遮罩层
|
||||
*/
|
||||
closeMask() {
|
||||
this.maskShow = false;
|
||||
},
|
||||
/**
|
||||
* 公用方法,遮罩层禁止点击
|
||||
*/
|
||||
disableMask() {
|
||||
this.mkclick = false;
|
||||
},
|
||||
// TODO nvue 取消冒泡
|
||||
clear(e) {
|
||||
e.stopPropagation();
|
||||
this.clearPropagation = true;
|
||||
},
|
||||
open(direction) {
|
||||
if (this.showPopup) {
|
||||
return;
|
||||
}
|
||||
let innerType = ["top", "center", "bottom", "left", "right", "message", "dialog", "share"];
|
||||
if (!(direction && innerType.indexOf(direction) !== -1)) {
|
||||
direction = this.type;
|
||||
}
|
||||
if (!this.config[direction]) {
|
||||
console.error("缺少类型:", direction);
|
||||
return;
|
||||
}
|
||||
this[this.config[direction]]();
|
||||
this.$emit("change", {
|
||||
show: true,
|
||||
type: direction
|
||||
});
|
||||
},
|
||||
close(type) {
|
||||
this.showTrans = false;
|
||||
this.$emit("change", {
|
||||
show: false,
|
||||
type: this.type
|
||||
});
|
||||
clearTimeout(this.timer);
|
||||
this.timer = setTimeout(() => {
|
||||
this.showPopup = false;
|
||||
}, 300);
|
||||
},
|
||||
// TODO 处理冒泡事件,头条的冒泡事件有问题 ,先这样兼容
|
||||
touchstart() {
|
||||
this.clearPropagation = false;
|
||||
},
|
||||
onTap() {
|
||||
if (this.clearPropagation) {
|
||||
this.clearPropagation = false;
|
||||
return;
|
||||
}
|
||||
this.$emit("maskClick");
|
||||
if (!this.mkclick)
|
||||
return;
|
||||
this.close();
|
||||
},
|
||||
/**
|
||||
* 顶部弹出样式处理
|
||||
*/
|
||||
top(type) {
|
||||
this.popupstyle = this.isDesktop ? "fixforpc-top" : "top";
|
||||
this.ani = ["slide-top"];
|
||||
this.transClass = {
|
||||
position: "fixed",
|
||||
left: 0,
|
||||
right: 0,
|
||||
backgroundColor: this.bg
|
||||
};
|
||||
if (type)
|
||||
return;
|
||||
this.showPopup = true;
|
||||
this.showTrans = true;
|
||||
this.$nextTick(() => {
|
||||
if (this.messageChild && this.type === "message") {
|
||||
this.messageChild.timerClose();
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 底部弹出样式处理
|
||||
*/
|
||||
bottom(type) {
|
||||
this.popupstyle = "bottom";
|
||||
this.ani = ["slide-bottom"];
|
||||
this.transClass = {
|
||||
position: "fixed",
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
paddingBottom: this.safeAreaInsets + "px",
|
||||
backgroundColor: this.bg
|
||||
};
|
||||
if (type)
|
||||
return;
|
||||
this.showPopup = true;
|
||||
this.showTrans = true;
|
||||
},
|
||||
/**
|
||||
* 中间弹出样式处理
|
||||
*/
|
||||
center(type) {
|
||||
this.popupstyle = "center";
|
||||
this.ani = ["zoom-out", "fade"];
|
||||
this.transClass = {
|
||||
position: "fixed",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
};
|
||||
if (type)
|
||||
return;
|
||||
this.showPopup = true;
|
||||
this.showTrans = true;
|
||||
},
|
||||
left(type) {
|
||||
this.popupstyle = "left";
|
||||
this.ani = ["slide-left"];
|
||||
this.transClass = {
|
||||
position: "fixed",
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
backgroundColor: this.bg,
|
||||
display: "flex",
|
||||
flexDirection: "column"
|
||||
};
|
||||
if (type)
|
||||
return;
|
||||
this.showPopup = true;
|
||||
this.showTrans = true;
|
||||
},
|
||||
right(type) {
|
||||
this.popupstyle = "right";
|
||||
this.ani = ["slide-right"];
|
||||
this.transClass = {
|
||||
position: "fixed",
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
backgroundColor: this.bg,
|
||||
display: "flex",
|
||||
flexDirection: "column"
|
||||
};
|
||||
if (type)
|
||||
return;
|
||||
this.showPopup = true;
|
||||
this.showTrans = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
if (!Array) {
|
||||
const _easycom_uni_transition2 = common_vendor.resolveComponent("uni-transition");
|
||||
_easycom_uni_transition2();
|
||||
}
|
||||
const _easycom_uni_transition = () => "../../../uni-transition/components/uni-transition/uni-transition.js";
|
||||
if (!Math) {
|
||||
_easycom_uni_transition();
|
||||
}
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return common_vendor.e({
|
||||
a: $data.showPopup
|
||||
}, $data.showPopup ? common_vendor.e({
|
||||
b: $data.maskShow
|
||||
}, $data.maskShow ? {
|
||||
c: common_vendor.o($options.onTap),
|
||||
d: common_vendor.p({
|
||||
name: "mask",
|
||||
["mode-class"]: "fade",
|
||||
styles: $data.maskClass,
|
||||
duration: $data.duration,
|
||||
show: $data.showTrans
|
||||
})
|
||||
} : {}, {
|
||||
e: $options.bg,
|
||||
f: common_vendor.n($data.popupstyle),
|
||||
g: common_vendor.o((...args) => $options.clear && $options.clear(...args)),
|
||||
h: common_vendor.o($options.onTap),
|
||||
i: common_vendor.p({
|
||||
["mode-class"]: $data.ani,
|
||||
name: "content",
|
||||
styles: $data.transClass,
|
||||
duration: $data.duration,
|
||||
show: $data.showTrans
|
||||
}),
|
||||
j: common_vendor.o((...args) => $options.touchstart && $options.touchstart(...args)),
|
||||
k: common_vendor.n($data.popupstyle),
|
||||
l: common_vendor.n($options.isDesktop ? "fixforpc-z-index" : "")
|
||||
}) : {});
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:/项目2023/视力表/vision-record/uni_modules/uni-popup/components/uni-popup/uni-popup.vue"]]);
|
||||
wx.createComponent(Component);
|
6
unpackage/dist/dev/mp-weixin/uni_modules/uni-popup/components/uni-popup/uni-popup.json
vendored
Normal file
6
unpackage/dist/dev/mp-weixin/uni_modules/uni-popup/components/uni-popup/uni-popup.json
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"uni-transition": "../../../uni-transition/components/uni-transition/uni-transition"
|
||||
}
|
||||
}
|
1
unpackage/dist/dev/mp-weixin/uni_modules/uni-popup/components/uni-popup/uni-popup.wxml
vendored
Normal file
1
unpackage/dist/dev/mp-weixin/uni_modules/uni-popup/components/uni-popup/uni-popup.wxml
vendored
Normal file
@@ -0,0 +1 @@
|
||||
<view wx:if="{{a}}" class="{{['uni-popup', k, l]}}"><view bindtouchstart="{{j}}"><uni-transition wx:if="{{b}}" key="1" bindclick="{{c}}" u-i="70678190-0" bind:__l="__l" u-p="{{d}}"/><uni-transition wx:if="{{i}}" u-s="{{['d']}}" key="2" bindclick="{{h}}" u-i="70678190-1" bind:__l="__l" u-p="{{i}}"><view style="{{'background-color:' + e}}" class="{{['uni-popup__wrapper', f]}}" bindtap="{{g}}"><slot/></view></uni-transition></view></view>
|
47
unpackage/dist/dev/mp-weixin/uni_modules/uni-popup/components/uni-popup/uni-popup.wxss
vendored
Normal file
47
unpackage/dist/dev/mp-weixin/uni_modules/uni-popup/components/uni-popup/uni-popup.wxss
vendored
Normal file
@@ -0,0 +1,47 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
.uni-popup {
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
}
|
||||
.uni-popup.top, .uni-popup.left, .uni-popup.right {
|
||||
top: 0;
|
||||
}
|
||||
.uni-popup .uni-popup__wrapper {
|
||||
display: block;
|
||||
position: relative;
|
||||
/* iphonex 等安全区设置,底部安全区适配 */
|
||||
}
|
||||
.uni-popup .uni-popup__wrapper.left, .uni-popup .uni-popup__wrapper.right {
|
||||
padding-top: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.fixforpc-z-index {
|
||||
z-index: 999;
|
||||
}
|
||||
.fixforpc-top {
|
||||
top: 0;
|
||||
}
|
115
unpackage/dist/dev/mp-weixin/uni_modules/uni-transition/components/uni-transition/createAnimation.js
vendored
Normal file
115
unpackage/dist/dev/mp-weixin/uni_modules/uni-transition/components/uni-transition/createAnimation.js
vendored
Normal file
@@ -0,0 +1,115 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
class MPAnimation {
|
||||
constructor(options, _this) {
|
||||
this.options = options;
|
||||
this.animation = common_vendor.index.createAnimation({
|
||||
...options
|
||||
});
|
||||
this.currentStepAnimates = {};
|
||||
this.next = 0;
|
||||
this.$ = _this;
|
||||
}
|
||||
_nvuePushAnimates(type, args) {
|
||||
let aniObj = this.currentStepAnimates[this.next];
|
||||
let styles = {};
|
||||
if (!aniObj) {
|
||||
styles = {
|
||||
styles: {},
|
||||
config: {}
|
||||
};
|
||||
} else {
|
||||
styles = aniObj;
|
||||
}
|
||||
if (animateTypes1.includes(type)) {
|
||||
if (!styles.styles.transform) {
|
||||
styles.styles.transform = "";
|
||||
}
|
||||
let unit = "";
|
||||
if (type === "rotate") {
|
||||
unit = "deg";
|
||||
}
|
||||
styles.styles.transform += `${type}(${args + unit}) `;
|
||||
} else {
|
||||
styles.styles[type] = `${args}`;
|
||||
}
|
||||
this.currentStepAnimates[this.next] = styles;
|
||||
}
|
||||
_animateRun(styles = {}, config = {}) {
|
||||
let ref = this.$.$refs["ani"].ref;
|
||||
if (!ref)
|
||||
return;
|
||||
return new Promise((resolve, reject) => {
|
||||
nvueAnimation.transition(ref, {
|
||||
styles,
|
||||
...config
|
||||
}, (res) => {
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
}
|
||||
_nvueNextAnimate(animates, step = 0, fn) {
|
||||
let obj = animates[step];
|
||||
if (obj) {
|
||||
let {
|
||||
styles,
|
||||
config
|
||||
} = obj;
|
||||
this._animateRun(styles, config).then(() => {
|
||||
step += 1;
|
||||
this._nvueNextAnimate(animates, step, fn);
|
||||
});
|
||||
} else {
|
||||
this.currentStepAnimates = {};
|
||||
typeof fn === "function" && fn();
|
||||
this.isEnd = true;
|
||||
}
|
||||
}
|
||||
step(config = {}) {
|
||||
this.animation.step(config);
|
||||
return this;
|
||||
}
|
||||
run(fn) {
|
||||
this.$.animationData = this.animation.export();
|
||||
this.$.timer = setTimeout(() => {
|
||||
typeof fn === "function" && fn();
|
||||
}, this.$.durationTime);
|
||||
}
|
||||
}
|
||||
const animateTypes1 = [
|
||||
"matrix",
|
||||
"matrix3d",
|
||||
"rotate",
|
||||
"rotate3d",
|
||||
"rotateX",
|
||||
"rotateY",
|
||||
"rotateZ",
|
||||
"scale",
|
||||
"scale3d",
|
||||
"scaleX",
|
||||
"scaleY",
|
||||
"scaleZ",
|
||||
"skew",
|
||||
"skewX",
|
||||
"skewY",
|
||||
"translate",
|
||||
"translate3d",
|
||||
"translateX",
|
||||
"translateY",
|
||||
"translateZ"
|
||||
];
|
||||
const animateTypes2 = ["opacity", "backgroundColor"];
|
||||
const animateTypes3 = ["width", "height", "left", "right", "top", "bottom"];
|
||||
animateTypes1.concat(animateTypes2, animateTypes3).forEach((type) => {
|
||||
MPAnimation.prototype[type] = function(...args) {
|
||||
this.animation[type](...args);
|
||||
return this;
|
||||
};
|
||||
});
|
||||
function createAnimation(option, _this) {
|
||||
if (!_this)
|
||||
return;
|
||||
clearTimeout(_this.timer);
|
||||
return new MPAnimation(option, _this);
|
||||
}
|
||||
exports.createAnimation = createAnimation;
|
265
unpackage/dist/dev/mp-weixin/uni_modules/uni-transition/components/uni-transition/uni-transition.js
vendored
Normal file
265
unpackage/dist/dev/mp-weixin/uni_modules/uni-transition/components/uni-transition/uni-transition.js
vendored
Normal file
@@ -0,0 +1,265 @@
|
||||
"use strict";
|
||||
const uni_modules_uniTransition_components_uniTransition_createAnimation = require("./createAnimation.js");
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const _sfc_main = {
|
||||
name: "uniTransition",
|
||||
emits: ["click", "change"],
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
modeClass: {
|
||||
type: [Array, String],
|
||||
default() {
|
||||
return "fade";
|
||||
}
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 300
|
||||
},
|
||||
styles: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
onceRender: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
transform: "",
|
||||
opacity: 1,
|
||||
animationData: {},
|
||||
durationTime: 300,
|
||||
config: {}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
show: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.open();
|
||||
} else {
|
||||
if (this.isShow) {
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 生成样式数据
|
||||
stylesObject() {
|
||||
let styles = {
|
||||
...this.styles,
|
||||
"transition-duration": this.duration / 1e3 + "s"
|
||||
};
|
||||
let transform = "";
|
||||
for (let i in styles) {
|
||||
let line = this.toLine(i);
|
||||
transform += line + ":" + styles[i] + ";";
|
||||
}
|
||||
return transform;
|
||||
},
|
||||
// 初始化动画条件
|
||||
transformStyles() {
|
||||
return "transform:" + this.transform + ";opacity:" + this.opacity + ";" + this.stylesObject;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.config = {
|
||||
duration: this.duration,
|
||||
timingFunction: "ease",
|
||||
transformOrigin: "50% 50%",
|
||||
delay: 0
|
||||
};
|
||||
this.durationTime = this.duration;
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* ref 触发 初始化动画
|
||||
*/
|
||||
init(obj = {}) {
|
||||
if (obj.duration) {
|
||||
this.durationTime = obj.duration;
|
||||
}
|
||||
this.animation = uni_modules_uniTransition_components_uniTransition_createAnimation.createAnimation(Object.assign(this.config, obj), this);
|
||||
},
|
||||
/**
|
||||
* 点击组件触发回调
|
||||
*/
|
||||
onClick() {
|
||||
this.$emit("click", {
|
||||
detail: this.isShow
|
||||
});
|
||||
},
|
||||
/**
|
||||
* ref 触发 动画分组
|
||||
* @param {Object} obj
|
||||
*/
|
||||
step(obj, config = {}) {
|
||||
if (!this.animation)
|
||||
return;
|
||||
for (let i in obj) {
|
||||
try {
|
||||
if (typeof obj[i] === "object") {
|
||||
this.animation[i](...obj[i]);
|
||||
} else {
|
||||
this.animation[i](obj[i]);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(`方法 ${i} 不存在`);
|
||||
}
|
||||
}
|
||||
this.animation.step(config);
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
* ref 触发 执行动画
|
||||
*/
|
||||
run(fn) {
|
||||
if (!this.animation)
|
||||
return;
|
||||
this.animation.run(fn);
|
||||
},
|
||||
// 开始过度动画
|
||||
open() {
|
||||
clearTimeout(this.timer);
|
||||
this.transform = "";
|
||||
this.isShow = true;
|
||||
let { opacity, transform } = this.styleInit(false);
|
||||
if (typeof opacity !== "undefined") {
|
||||
this.opacity = opacity;
|
||||
}
|
||||
this.transform = transform;
|
||||
this.$nextTick(() => {
|
||||
this.timer = setTimeout(() => {
|
||||
this.animation = uni_modules_uniTransition_components_uniTransition_createAnimation.createAnimation(this.config, this);
|
||||
this.tranfromInit(false).step();
|
||||
this.animation.run();
|
||||
this.$emit("change", {
|
||||
detail: this.isShow
|
||||
});
|
||||
}, 20);
|
||||
});
|
||||
},
|
||||
// 关闭过度动画
|
||||
close(type) {
|
||||
if (!this.animation)
|
||||
return;
|
||||
this.tranfromInit(true).step().run(() => {
|
||||
this.isShow = false;
|
||||
this.animationData = null;
|
||||
this.animation = null;
|
||||
let { opacity, transform } = this.styleInit(false);
|
||||
this.opacity = opacity || 1;
|
||||
this.transform = transform;
|
||||
this.$emit("change", {
|
||||
detail: this.isShow
|
||||
});
|
||||
});
|
||||
},
|
||||
// 处理动画开始前的默认样式
|
||||
styleInit(type) {
|
||||
let styles = {
|
||||
transform: ""
|
||||
};
|
||||
let buildStyle = (type2, mode) => {
|
||||
if (mode === "fade") {
|
||||
styles.opacity = this.animationType(type2)[mode];
|
||||
} else {
|
||||
styles.transform += this.animationType(type2)[mode] + " ";
|
||||
}
|
||||
};
|
||||
if (typeof this.modeClass === "string") {
|
||||
buildStyle(type, this.modeClass);
|
||||
} else {
|
||||
this.modeClass.forEach((mode) => {
|
||||
buildStyle(type, mode);
|
||||
});
|
||||
}
|
||||
return styles;
|
||||
},
|
||||
// 处理内置组合动画
|
||||
tranfromInit(type) {
|
||||
let buildTranfrom = (type2, mode) => {
|
||||
let aniNum = null;
|
||||
if (mode === "fade") {
|
||||
aniNum = type2 ? 0 : 1;
|
||||
} else {
|
||||
aniNum = type2 ? "-100%" : "0";
|
||||
if (mode === "zoom-in") {
|
||||
aniNum = type2 ? 0.8 : 1;
|
||||
}
|
||||
if (mode === "zoom-out") {
|
||||
aniNum = type2 ? 1.2 : 1;
|
||||
}
|
||||
if (mode === "slide-right") {
|
||||
aniNum = type2 ? "100%" : "0";
|
||||
}
|
||||
if (mode === "slide-bottom") {
|
||||
aniNum = type2 ? "100%" : "0";
|
||||
}
|
||||
}
|
||||
this.animation[this.animationMode()[mode]](aniNum);
|
||||
};
|
||||
if (typeof this.modeClass === "string") {
|
||||
buildTranfrom(type, this.modeClass);
|
||||
} else {
|
||||
this.modeClass.forEach((mode) => {
|
||||
buildTranfrom(type, mode);
|
||||
});
|
||||
}
|
||||
return this.animation;
|
||||
},
|
||||
animationType(type) {
|
||||
return {
|
||||
fade: type ? 1 : 0,
|
||||
"slide-top": `translateY(${type ? "0" : "-100%"})`,
|
||||
"slide-right": `translateX(${type ? "0" : "100%"})`,
|
||||
"slide-bottom": `translateY(${type ? "0" : "100%"})`,
|
||||
"slide-left": `translateX(${type ? "0" : "-100%"})`,
|
||||
"zoom-in": `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
|
||||
"zoom-out": `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
|
||||
};
|
||||
},
|
||||
// 内置动画类型与实际动画对应字典
|
||||
animationMode() {
|
||||
return {
|
||||
fade: "opacity",
|
||||
"slide-top": "translateY",
|
||||
"slide-right": "translateX",
|
||||
"slide-bottom": "translateY",
|
||||
"slide-left": "translateX",
|
||||
"zoom-in": "scale",
|
||||
"zoom-out": "scale"
|
||||
};
|
||||
},
|
||||
// 驼峰转中横线
|
||||
toLine(name) {
|
||||
return name.replace(/([A-Z])/g, "-$1").toLowerCase();
|
||||
}
|
||||
}
|
||||
};
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return {
|
||||
a: $data.isShow,
|
||||
b: $data.animationData,
|
||||
c: common_vendor.n($props.customClass),
|
||||
d: common_vendor.s($options.transformStyles),
|
||||
e: common_vendor.o((...args) => $options.onClick && $options.onClick(...args))
|
||||
};
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:/项目2023/视力表/vision-record/uni_modules/uni-transition/components/uni-transition/uni-transition.vue"]]);
|
||||
wx.createComponent(Component);
|
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
@@ -0,0 +1 @@
|
||||
<view hidden="{{!a}}" ref="ani" animation="{{b}}" class="{{c}}" style="{{d}}" bindtap="{{e}}"><slot></slot></view>
|
Reference in New Issue
Block a user