first commit
This commit is contained in:
@@ -0,0 +1,16 @@
|
||||
.hotspot-expanded.relative {
|
||||
position: relative;
|
||||
}
|
||||
.hotspot-expanded::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
.t-draggable {
|
||||
position: fixed;
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<view
|
||||
:class="[classPrefix, tClass]"
|
||||
:style="tools._style([customStyle])"
|
||||
@touchstart="onTouchStart"
|
||||
@touchmove.stop.prevent="onTouchMove"
|
||||
@touchend="onTouchEnd"
|
||||
>
|
||||
<slot />
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { uniComponent } from '../common/src/index';
|
||||
import { prefix } from '../common/config';
|
||||
import props from './props';
|
||||
import { getRect, getWindowInfo } from '../common/utils';
|
||||
import tools from '../common/utils.wxs';
|
||||
|
||||
|
||||
const name = `${prefix}-draggable`;
|
||||
|
||||
export default uniComponent({
|
||||
name,
|
||||
options: {
|
||||
styleIsolation: 'shared',
|
||||
},
|
||||
props: {
|
||||
...props,
|
||||
},
|
||||
emits: [
|
||||
'move',
|
||||
'start',
|
||||
'end',
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
tools,
|
||||
systemInfo: getWindowInfo(),
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.computedRect();
|
||||
},
|
||||
methods: {
|
||||
onTouchStart(e) {
|
||||
const { systemInfo } = this;
|
||||
if (this.direction === 'none') return;
|
||||
this.startX = e.touches[0].clientX + systemInfo.windowWidth - this.rect.right;
|
||||
this.startY = e.touches[0].clientY + systemInfo.windowHeight - this.rect.bottom;
|
||||
this.$emit('start', { startX: this.startX, startY: this.startY, rect: this.rect, e });
|
||||
},
|
||||
|
||||
onTouchMove(e) {
|
||||
const { systemInfo } = this;
|
||||
|
||||
if (this.direction === 'none') return;
|
||||
let x = this.startX - e.touches[0].clientX; // x轴移动偏移量
|
||||
let y = this.startY - e.touches[0].clientY; // y轴移动偏移量
|
||||
|
||||
|
||||
if (this.direction === 'vertical') {
|
||||
x = systemInfo.windowWidth - this.rect.right;
|
||||
}
|
||||
if (this.direction === 'horizontal') {
|
||||
y = systemInfo.windowHeight - this.rect.bottom;
|
||||
}
|
||||
|
||||
this.$emit('move', { x, y, rect: this.rect, e });
|
||||
},
|
||||
|
||||
async onTouchEnd(e) {
|
||||
if (this.direction === 'none') return;
|
||||
await this.computedRect();
|
||||
this.$emit('end', { rect: this.rect, e });
|
||||
},
|
||||
|
||||
async computedRect() {
|
||||
this.rect = { right: 0, bottom: 0, width: 0, height: 0 };
|
||||
try {
|
||||
this.rect = await getRect(this, `.${this.classPrefix}`);
|
||||
} catch (e) {
|
||||
// ignore reject
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
@import './draggable.css';
|
||||
</style>
|
||||
19
uni_modules/tdesign-uniapp/components/draggable/props.js
Normal file
19
uni_modules/tdesign-uniapp/components/draggable/props.js
Normal file
@@ -0,0 +1,19 @@
|
||||
const props = {
|
||||
direction: {
|
||||
type: String,
|
||||
value: 'all',
|
||||
},
|
||||
tClass: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
tClassButton: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
customStyle: {
|
||||
type: [String, Object],
|
||||
default: '',
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
Reference in New Issue
Block a user