feat: 首次提交
This commit is contained in:
peerless_hero
225
components/firstui/fui-cubic-bezier/fui-cubic-bezier.vue
Normal file
225
components/firstui/fui-cubic-bezier/fui-cubic-bezier.vue
Normal file
@ -0,0 +1,225 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 6140 725 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<view class="fui-cubicbezier__wrap" @tap.stop="handleClick">
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<view class="fui-cubicbezier__wrap" @touchstart="appTouchStart" @touchend="appTouchEnd">
|
||||
<!-- #endif -->
|
||||
<view class="fui-ani__cb-x" v-if="animate" :style="style_x">
|
||||
<view class="fui-ani__cb-y" :class="{'fui-ani__cb-android':android}" :style="style_y">
|
||||
<slot name="badge"></slot>
|
||||
</view>
|
||||
</view>
|
||||
<slot></slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'fui-cubic-bezier',
|
||||
emits: ['click'],
|
||||
props: {
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'lb'
|
||||
},
|
||||
top: {
|
||||
type: [Number, String],
|
||||
default: 100
|
||||
},
|
||||
bottom: {
|
||||
type: [Number, String],
|
||||
default: 100
|
||||
},
|
||||
left: {
|
||||
type: [Number, String],
|
||||
default: 60
|
||||
},
|
||||
right: {
|
||||
type: [Number, String],
|
||||
default: 60
|
||||
},
|
||||
navbar: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
param: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// #ifdef APP-NVUE
|
||||
timestamp: 0,
|
||||
touches: {},
|
||||
// #endif
|
||||
time: 0,
|
||||
animate: false,
|
||||
width: 375,
|
||||
height: 1334,
|
||||
style_x: '',
|
||||
style_y: '',
|
||||
navH: 0,
|
||||
android: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
let sys = uni.getSystemInfoSync()
|
||||
this.width = sys.windowWidth
|
||||
this.height = sys.windowHeight
|
||||
// #ifdef APP-NVUE
|
||||
this.android = sys.platform.toLocaleLowerCase() === "android"
|
||||
if (this.navbar) {
|
||||
this.navH = sys.statusBarHeight + 44
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
// #ifdef APP-NVUE
|
||||
appTouchStart(e) {
|
||||
this.touches = e.changedTouches[0]
|
||||
this.timestamp = new Date().getTime()
|
||||
},
|
||||
appTouchEnd(e) {
|
||||
const {
|
||||
screenX
|
||||
} = e.changedTouches[0]
|
||||
let diff = Math.abs(this.touches.screenX - screenX)
|
||||
let time = (new Date().getTime()) - this.timestamp
|
||||
if (diff < 5 && time < 300) {
|
||||
this.handleClick({
|
||||
touches: [this.touches]
|
||||
})
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
handleClick(e) {
|
||||
if (new Date().getTime() - this.time <= 550) return;
|
||||
this.time = new Date().getTime();
|
||||
setTimeout(() => {
|
||||
this.time = 0;
|
||||
}, 540);
|
||||
this.cbAni(e);
|
||||
this.$emit('click', {
|
||||
param: this.param
|
||||
});
|
||||
},
|
||||
cbAni(e) {
|
||||
let touch = null;
|
||||
|
||||
// #ifdef MP-ALIPAY
|
||||
touch = e.detail;
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-BAIDU
|
||||
touch = e.changedTouches[0]
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-ALIPAY || MP-BAIDU
|
||||
touch = e.touches[0];
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-NVUE
|
||||
touch = {
|
||||
clientX: touch.screenX,
|
||||
clientY: touch.screenY
|
||||
}
|
||||
// #endif
|
||||
let diff = {
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
//rt 右上、rb 右下、lb 左下、lt 左上
|
||||
switch (this.direction) {
|
||||
case 'rt':
|
||||
diff.x = this.width - touch.clientX - uni.upx2px(Number(this.right));
|
||||
diff.y = uni.upx2px(Number(this.top)) - touch.clientY;
|
||||
break;
|
||||
case 'rb':
|
||||
diff.x = this.width - touch.clientX - uni.upx2px(Number(this.right));
|
||||
diff.y = this.height - touch.clientY - uni.upx2px(Number(this.bottom));
|
||||
break;
|
||||
case 'lb':
|
||||
diff.x = uni.upx2px(Number(this.left)) - touch.clientX;
|
||||
diff.y = this.height - touch.clientY - uni.upx2px(Number(this.bottom));
|
||||
break;
|
||||
case 'lt':
|
||||
diff.x = uni.upx2px(Number(this.left)) - touch.clientX;
|
||||
diff.y = uni.upx2px(Number(this.top)) - touch.clientY;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
//移动距离
|
||||
// #ifdef APP-NVUE
|
||||
this.style_x = `left:${touch.clientX}px;top:${touch.clientY-this.navH}px;`
|
||||
// #endif
|
||||
this.animate = true;
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
// #ifdef APP-NVUE
|
||||
this.style_x +=
|
||||
`transform:translate(${diff.x}px,0px);`;
|
||||
this.style_y = `transform:translate(0px,${diff.y+this.navH}px);`;
|
||||
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
this.style_x = `transform:translate3d(${diff.x}px,0,0)`;
|
||||
this.style_y = `transform:translate3d(0,${diff.y}px,0)`;
|
||||
// #endif
|
||||
setTimeout(() => {
|
||||
this.animate = false;
|
||||
//恢复到最初状态
|
||||
this.style_x = '';
|
||||
this.style_y = '';
|
||||
}, 540);
|
||||
}, 50)
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fui-cubicbezier__wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fui-ani__cb-x {
|
||||
/* #ifdef APP-NVUE */
|
||||
position: fixed;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: inline-block;
|
||||
z-index: 1008;
|
||||
/* #endif */
|
||||
|
||||
transition-property: transform;
|
||||
transition-duration: 0.5s;
|
||||
transition-timing-function: cubic-bezier(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.fui-ani__cb-y {
|
||||
/*#ifndef APP-NVUE */
|
||||
display: inline-block;
|
||||
/* #endif */
|
||||
transition-property: transform;
|
||||
transition-duration: 0.5s;
|
||||
transition-timing-function: cubic-bezier(0.3, -0.2, 1, 0);
|
||||
}
|
||||
|
||||
/* #ifdef APP-NVUE */
|
||||
.fui-ani__cb-android {
|
||||
width: 600rpx;
|
||||
height: 2000px;
|
||||
transition-timing-function: cubic-bezier(0.3, -0.02, 1, 0);
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
</style>
|
||||
Reference in New Issue
Block a user