thzxcx/FirstUI-vue
1
0
Fork 0
Code Pull Requests Packages Releases Activity

feat: 首次提交

Browse Source
This commit is contained in:
peerless_hero
2023-08-17 21:28:49 +08:00
parent 36f80fb971
commit ec1e5e16cd
571 changed files with 95322 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
components/firstui/fui-fab/bindingx.js Normal file
View File

@ -0,0 +1,83 @@
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 6 1 40 7 2549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
// #ifdef APP-NVUE
const animation = uni.requireNativePlugin('animation');
export default {
data() {
return {
startX: 0,
startY: 0,
lastLeft: 0,
lastTop: 0,
isMove: false
}
},
created() {
this.refFab = null;
this.loop = null
},
mounted() {
this.$nextTick(() => {
setTimeout(() => {
this.refFab = this.getEl(this.$refs['fui_fab_move_ref'])
}, 50)
})
},
methods: {
getEl(el) {
return el.ref || el[0].ref;
},
_aniMove(x, y) {
if (!this.refFab || !this.isDrag) return
animation.transition(this.refFab, {
styles: {
transform: `translate(${x}px,${y}px)`
},
duration: 0,
timingFunction: 'linear',
needLayout: false,
delay: 0
}, () => {
if (Math.abs(x) > 0.1 || Math.abs(y) > 0.1) {
this.isMove = true;
}
});
},
touchstart(e) {
if (!this.isDrag) return;
var touch = e.touches || e.changedTouches
this.startX = touch[0].screenX
this.startY = touch[0].screenY
},
touchmove(e) {
if (!this.isDrag) return;
var touch = e.touches || e.changedTouches
let pageX = touch[0].screenX,
pageY = touch[0].screenY;
var left = pageX - this.startX + this.lastLeft;
left = left < -this.eLeft ? -this.eLeft : left;
left = left > this.maxWidth ? this.maxWidth : left;
this.startX = pageX
var top = pageY - this.startY + this.lastTop;
top = top < -this.eTop ? -this.eTop : top;
top = top > this.maxHeight ? this.maxHeight : top;
this.startY = pageY
this.lastLeft = left
this.lastTop = top
this._aniMove(left, top)
},
touchend(e) {
clearTimeout(this.loop)
this.loop = setTimeout(() => {
this.isMove = false
}, 50)
}
}
}
// #endif
// #ifndef APP-NVUE
export default {}
// #endif

607
components/firstui/fui-fab/fui-fab.vue Normal file
View File

@ -0,0 +1,607 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8614 0 7 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view @touchmove.stop.prevent="stop">
<view class="fui-fab__mask" :class="{'fui-fab__mask-show':isShow}" :style="getStyle" ref="fui_mask_ani"
v-if="mask" @tap.stop="maskClick"></view>
<!-- #ifdef APP-VUE || MP-WEIXIN || H5-->
<view class="fui-fab__btn-wrap" :data-disabled="isDrag?0:1" :data-width="maxWidth" :data-height="maxHeight"
:data-left="eLeft" :data-top="eTop" :prop="resetNum" :change:prop="handler.fabreset"
@touchstart="handler.touchstart" @touchmove="handler.touchmove" @mousedown="handler.mousedown"
:class="[position==='left'?'fui-fab__wrap-left':'fui-fab__wrap-right']" :style="getStyles">
<view class="fui-fab__btn-list"
:class="{'fui-fab__btn-hidden':isHidden,'fui-fab__list-ani':isShow,'fui-fab__list-left':position==='left','fui-fab__list-right':position==='right'}"
ref="fui_fab_ani">
<view class="fui-fab__button-box"
:class="[position==='left'?'fui-fab__button-left':'fui-fab__button-right']"
v-for="(btn,idx) in fabs" :key="idx" @tap.stop="handleClick($event,idx)">
<text class="fui-fab__btn-text" v-if="btn.text"
:style="{fontSize:(btn.size || 32)+'rpx',color:btn.color || '#fff',textAlign:position==='left'?'left':'right'}">{{btn.text}}</text>
<view class="fui-fab__button" :class="{'fui-fab__btn-color':!getBgColor && !btn.background }"
:style="{width:width+'rpx',height:width+'rpx',background:btn.background || getBgColor}">
<fui-icon :name="btn.name" v-if="btn.name" :color="btn.abbrColor || '#fff'"
:size="btn.abbrSize || 64"></fui-icon>
<image :src="btn.src"
:style="{width:(btn.width || 56)+'rpx',height:(btn.height || 56)+'rpx',borderRadius:(btn.radius || 0)+'rpx'}"
v-if="!btn.name && btn.src" mode="widthFix"></image>
<text class="fui-fab__btn-abbr"
:style="{fontSize:(btn.abbrSize || 36)+'rpx',lineHeight:(btn.abbrSize || 36)+'rpx',color:btn.abbrColor || '#fff'}"
v-if="!btn.name && !btn.src && btn.abbr">{{btn.abbr}}</text>
</view>
</view>
</view>
<view class="fui-fab__btn-main" :class="{'fui-fab__btn-color':!getBgColor}"
:style="{width:width+'rpx',height:width+'rpx',background:getBgColor}"
@tap.stop="handleClick($event,-1)">
<view class="fui-fab__btn-inner" :class="{'fui-fab__btn-ani':isShow}" ref="fui_fm_ani">
<slot>
<fui-icon name="plus" :color="color" :size="80"></fui-icon>
</slot>
</view>
</view>
</view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view class="fui-fab__btn-wrap" @touchstart="touchstart" @touchmove.stop.prevent="touchmove"
@touchend="touchend" @touchcancel="touchend" ref="fui_fab_move_ref"
:class="[position==='left'?'fui-fab__wrap-left':'fui-fab__wrap-right']" :style="getStyles">
<view class="fui-fab__btn-list"
:class="{'fui-fab__btn-hidden':isHidden,'fui-fab__list-ani':isShow,'fui-fab__list-left':position==='left','fui-fab__list-right':position==='right'}"
ref="fui_fab_ani">
<view class="fui-fab__button-box"
:class="[position==='left'?'fui-fab__button-left':'fui-fab__button-right']"
v-for="(btn,idx) in fabs" :key="idx" @tap.stop="handleClick($event,idx)">
<text class="fui-fab__btn-text" v-if="btn.text"
:style="{fontSize:(btn.size || 32)+'rpx',color:btn.color || '#fff',textAlign:position==='left'?'left':'right'}">{{btn.text}}</text>
<view class="fui-fab__button" :class="{'fui-fab__btn-color':!getBgColor && !btn.background }"
:style="{width:width+'rpx',height:width+'rpx',background:btn.background || getBgColor}">
<fui-icon :name="btn.name" v-if="btn.name" :color="btn.abbrColor || '#fff'"
:size="btn.abbrSize || 64"></fui-icon>
<image :src="btn.src"
:style="{width:(btn.width || 56)+'rpx',height:(btn.height || 56)+'rpx',borderRadius:(btn.radius || 0)+'rpx'}"
v-if="!btn.name && btn.src" mode="widthFix"></image>
<text class="fui-fab__btn-abbr"
:style="{fontSize:(btn.abbrSize || 36)+'rpx',lineHeight:(btn.abbrSize || 36)+'rpx',color:btn.abbrColor || '#fff'}"
v-if="!btn.name && !btn.src && btn.abbr">{{btn.abbr}}</text>
</view>
</view>
</view>
<view class="fui-fab__btn-main" :class="{'fui-fab__btn-color':!getBgColor}"
:style="{width:width+'rpx',height:width+'rpx',background:getBgColor}"
@tap.stop="handleClick($event,-1)">
<view class="fui-fab__btn-inner" :class="{'fui-fab__btn-ani':isShow}" ref="fui_fm_ani">
<slot>
<fui-icon name="plus" :color="color" :size="80"></fui-icon>
</slot>
</view>
</view>
</view>
<!-- #endif -->
<!-- #ifndef APP-PLUS || MP-WEIXIN || H5 -->
<view class="fui-fab__btn-wrap" @touchstart="touchstart" @touchmove.stop.prevent="touchmove"
:class="[position==='left'?'fui-fab__wrap-left':'fui-fab__wrap-right']" :style="getStyles">
<view class="fui-fab__btn-list"
:class="{'fui-fab__btn-hidden':isHidden,'fui-fab__list-ani':isShow,'fui-fab__list-left':position==='left','fui-fab__list-right':position==='right'}"
ref="fui_fab_ani">
<view class="fui-fab__button-box"
:class="[position==='left'?'fui-fab__button-left':'fui-fab__button-right']"
v-for="(btn,idx) in fabs" :key="idx" @tap.stop="handleClick($event,idx)">
<text class="fui-fab__btn-text" v-if="btn.text"
:style="{fontSize:(btn.size || 32)+'rpx',color:btn.color || '#fff',textAlign:position==='left'?'left':'right'}">{{btn.text}}</text>
<view class="fui-fab__button" :class="{'fui-fab__btn-color':!getBgColor && !btn.background }"
:style="{width:width+'rpx',height:width+'rpx',background:btn.background || getBgColor}">
<fui-icon :name="btn.name" v-if="btn.name" :color="btn.abbrColor || '#fff'"
:size="btn.abbrSize || 64"></fui-icon>
<image :src="btn.src"
:style="{width:(btn.width || 56)+'rpx',height:(btn.height || 56)+'rpx',borderRadius:(btn.radius || 0)+'rpx'}"
v-if="!btn.name && btn.src" mode="widthFix"></image>
<text class="fui-fab__btn-abbr"
:style="{fontSize:(btn.abbrSize || 36)+'rpx',lineHeight:(btn.abbrSize || 36)+'rpx',color:btn.abbrColor || '#fff'}"
v-if="!btn.name && !btn.src && btn.abbr">{{btn.abbr}}</text>
</view>
</view>
</view>
<view class="fui-fab__btn-main" :class="{'fui-fab__btn-color':!getBgColor}"
:style="{width:width+'rpx',height:width+'rpx',background:getBgColor}"
@tap.stop="handleClick($event,-1)">
<view class="fui-fab__btn-inner" :class="{'fui-fab__btn-ani':isShow}" ref="fui_fm_ani">
<slot>
<fui-icon name="plus" :color="color" :size="80"></fui-icon>
</slot>
</view>
</view>
</view>
<!-- #endif -->
</view>
</template>
<!-- #ifdef APP-VUE || MP-WEIXIN || H5-->
<script src="./index.wxs" module="handler" lang="wxs"></script>
<!-- #endif -->
<script>
//非easycom模式取消注释引入字体组件，按实际路径进行调整
// import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
// #ifdef APP-NVUE
const animation = uni.requireNativePlugin('animation');
const dom = uni.requireNativePlugin('dom');
// #endif
import mpjs from './mpjs.js'
import bindingx from './bindingx.js'
export default {
name: "fui-fab",
mixins: [mpjs, bindingx],
emits: ['click', 'change'],
// components:{
// fuiIcon
// },
props: {
fabs: {
type: Array,
default () {
return []
}
},
position: {
type: String,
default: 'right'
},
distance: {
type: [Number, String],
default: 80
},
bottom: {
type: [Number, String],
default: 120
},
width: {
type: [Number, String],
default: 108
},
background: {
type: String,
default: ""
},
color: {
type: String,
default: "#fff"
},
mask: {
type: Boolean,
default: true
},
maskBackground: {
type: String,
default: 'rgba(0,0,0,.6)'
},
maskClosable: {
type: Boolean,
default: false
},
zIndex: {
type: [Number, String],
default: 99
},
//V1.9.8+
isDrag: {
type: Boolean,
default: false
}
},
computed: {
getStyles() {
let styles = `bottom:${this.bottom}rpx;z-index:${this.zIndex};`
if (this.position === 'left') {
styles += `left:${this.distance}rpx;`
} else {
styles += `right:${this.distance}rpx;`
}
// #ifndef APP-PLUS || MP-WEIXIN || H5
if (this.isDrag) {
styles += `transform:${this.transform};`
}
// #endif
return styles;
},
getStyle() {
return `background:${this.maskBackground};z-index:${Number(this.zIndex)-10};`
},
getBgColor() {
let color = this.background;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color;
}
},
watch: {
isShow(val) {
this.$emit("change", {
isShow: val
})
},
position(val) {
this.resetNum++;
this.$nextTick(() => {
setTimeout(() => {
this._getSize()
}, 80);
})
}
},
data() {
return {
isShow: false,
isHidden: true,
timer: null,
maxWidth: 0,
maxHeight: 0,
eLeft: 0,
eTop: 0,
resetNum: 0
};
},
// #ifndef APP-NVUE
// #ifndef VUE3
beforeDestroy() {
clearTimeout(this.timer)
this.timer = null
},
// #endif
// #ifdef VUE3
beforeUnmount() {
clearTimeout(this.timer)
this.timer = null
},
// #endif
// #endif
mounted() {
this.$nextTick(() => {
// #ifdef APP-NVUE
if (!this.$refs['fui_fab_ani']) return;
let styles = {
transform: 'scale(0)',
opacity: 0
}
animation.transition(
this.$refs['fui_fab_ani'].ref, {
styles,
duration: 0,
needLayout: false,
delay: 0
},
() => {}
);
// #endif
setTimeout(() => {
this._getSize()
}, 50);
})
},
methods: {
stop() {},
_getSize() {
if (!this.isDrag) return;
const sys = uni.getSystemInfoSync()
// #ifndef APP-NVUE
uni.createSelectorQuery()
// #ifndef MP-ALIPAY
.in(this)
// #endif
.select('.fui-fab__btn-wrap')
.boundingClientRect()
.exec(ret => {
if (ret) {
this.maxWidth = sys.windowWidth - ret[0].width - ret[0].left;
this.maxHeight = sys.windowHeight - ret[0].height - ret[0].top;
this.eLeft = ret[0].left || 0;
this.eTop = ret[0].top || 0;
}
})
// #endif
// #ifdef APP-NVUE
dom.getComponentRect(this.$refs['fui_fab_move_ref'], (ret) => {
const size = ret.size
if (size) {
this.maxWidth = sys.windowWidth - size.width - size.left;
this.maxHeight = sys.windowHeight - size.height - size.top;
this.eLeft = size.left || 0;
this.eTop = size.top || 0;
}
})
// #endif
},
// #ifdef APP-NVUE
_animation(type) {
let styles = {
transform: `scale(${type ? 1 : 0})`,
opacity: type ? 1 : 0
}
if (!this.$refs['fui_fab_ani'] || !this.$refs['fui_fm_ani']) return;
if (this.mask && this.$refs['fui_mask_ani']) {
animation.transition(
this.$refs['fui_mask_ani'].ref, {
styles: {
transform: `translateX(${type ? '0' : '-100%'})`
},
duration: 0,
needLayout: false,
delay: 0 //ms
},
() => {}
);
}
animation.transition(
this.$refs['fui_fm_ani'].ref, {
styles: {
transform: `rotate(${type ? '135deg' : '0deg'})`
},
duration: 250,
timingFunction: 'ease-in-out',
needLayout: false,
delay: 0 //ms
},
() => {
if (!type) {
this.isHidden = true
}
}
);
animation.transition(
this.$refs['fui_fab_ani'].ref, {
styles,
duration: 250,
timingFunction: 'ease-in-out',
needLayout: false,
delay: 0 //ms
},
() => {}
);
},
// #endif
handleClick: function(e, index) {
// #ifdef APP-NVUE
e.stopPropagation();
// #endif
// #ifdef APP-NVUE
if (this.isMove) {
this.isMove = false;
return;
};
// #endif
this.isHidden = false
clearTimeout(this.timer)
this.$nextTick(() => {
if (index === -1 && this.fabs.length > 0) {
this.isShow = !this.isShow
// #ifdef APP-NVUE
this._animation(this.isShow)
// #endif
} else {
this.$emit("click", {
index: index
})
this.isShow = false
// #ifdef APP-NVUE
this._animation(this.isShow)
// #endif
}
// #ifndef APP-NVUE
if (!this.isShow) {
this.timer = setTimeout(() => {
this.isHidden = true
}, 250)
}
// #endif
})
},
maskClick(e) {
// #ifdef APP-NVUE
e.stopPropagation();
// #endif
if (!this.maskClosable) return;
this.isShow = false
// #ifndef APP-NVUE
this.timer = setTimeout(() => {
this.isHidden = true
}, 250)
// #endif
// #ifdef APP-NVUE
this._animation(this.isShow)
// #endif
}
}
}
</script>
<style scoped>
.fui-fab__mask {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0;
/* #ifndef APP-NVUE */
visibility: hidden;
transition-property: visibility, opacity;
/* #endif */
transition-duration: .25s;
/* #ifdef APP-NVUE */
transition-property: opacity;
transition-timing-function: ease-in-out;
transform: translateX(-100%);
/* #endif */
}
.fui-fab__mask-show {
opacity: 1;
/* #ifdef APP-NVUE */
transform: translateX(0);
/* #endif */
/* #ifndef APP-NVUE */
visibility: visible;
/* #endif */
}
.fui-fab__btn-wrap {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
position: fixed;
bottom: 120rpx;
}
.fui-fab__wrap-left {
align-items: flex-start;
left: 80rpx;
}
.fui-fab__wrap-right {
align-items: flex-end;
right: 80rpx;
}
.fui-fab__btn-list {
/* #ifndef APP-NVUE */
display: flex;
visibility: hidden;
transition: all 0.25s ease-in-out;
transform: scale3d(0, 0, 1);
opacity: 0;
/* #endif */
flex-direction: column;
}
.fui-fab__list-left {
transform-origin: 0 100%;
align-items: flex-start;
}
.fui-fab__list-right {
transform-origin: 100% 100%;
align-items: flex-end;
}
.fui-fab__btn-hidden {
width: 0;
height: 0;
}
.fui-fab__list-ani {
/* #ifndef APP-NVUE */
opacity: 1;
transform: scale3d(1, 1, 1);
visibility: visible;
/* #endif */
}
.fui-fab__button-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: flex-end;
align-items: center;
margin-bottom: 32rpx;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.fui-fab__button-left {
flex-direction: row-reverse;
justify-content: flex-start;
}
.fui-fab__button-right {
flex-direction: row;
justify-content: flex-end;
}
.fui-fab__btn-text {
/* #ifndef APP-NVUE */
box-sizing: border-box;
/* #endif */
padding-left: 24rpx;
padding-right: 24rpx;
font-weight: normal;
}
.fui-fab__button {
/* #ifndef APP-NVUE */
display: flex;
border-radius: 50%;
/* #endif */
/* #ifdef APP-NVUE */
border-radius: 100px;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
}
.fui-fab__btn-abbr {
text-align: center;
font-weight: normal;
}
.fui-fab__btn-main {
/* #ifndef APP-NVUE */
display: flex;
border-radius: 50%;
/* #endif */
/* #ifdef APP-NVUE */
border-radius: 100px;
/* #endif */
/* #ifndef APP-NVUE */
box-shadow: 0 10rpx 14rpx 0 rgba(0, 0, 0, 0.1);
/* #endif */
align-items: center;
justify-content: center;
transform: rotate(0deg);
overflow: hidden;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.fui-fab__btn-inner {
/* #ifndef APP-NVUE */
display: flex;
transform: rotate(0deg);
transition: transform .25s;
/* #endif */
align-items: center;
justify-content: center;
}
/* #ifndef APP-NVUE */
.fui-fab__btn-ani {
transform: rotate(135deg);
}
/* #endif */
/* #ifndef APP-NVUE */
.fui-fab__btn-color {
background: var(--fui-color-primary, #465CFF) !important;
}
/* #endif */
</style>

120
components/firstui/fui-fab/index.wxs Normal file
View File

@ -0,0 +1,120 @@
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：186 14 07 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
var movable = {
width: 100,
height: 100,
disabled: false,
left: 0,
top: 0
}
function isPC() {
if (typeof navigator !== 'object') return false;
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
var flag = true;
for (var v = 0; v < Agents.length - 1; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}
var isH5 = false
if (typeof window === 'object') isH5 = true
function setInitValue(dataset) {
movable.width = +dataset.width
movable.height = +dataset.height
movable.top = +dataset.top
movable.left = +dataset.left
//H5获取bool值为undefined
movable.disabled = (+dataset.disabled) == 1 ? true : false
}
function touchstart(e, ins) {
var state = e.instance.getState()
var touch = e.touches[0] || e.changedTouches[0];
if (isH5 && isPC()) {
touch = e;
}
var dataset = e.instance.getDataset()
state.startX = touch.clientX
state.startY = touch.clientY
setInitValue(dataset)
}
function styleChange(left, top, ins) {
if (!ins) return;
var mview = ins.selectComponent('.fui-fab__btn-wrap');
if (!mview) return;
mview.setStyle({
transform: 'translate3d(' + left + 'px,' + top + 'px,0)'
})
}
function touchmove(e, ins, event) {
if (movable.disabled) return;
if (e.preventDefault) {
// 阻止页面滚动
e.preventDefault()
}
var state = {}
var touch = {}
if (isH5 && isPC()) {
touch = e;
state = event.instance.getState()
} else {
touch = e.touches[0] || e.changedTouches[0]
state = e.instance.getState()
}
var pageX = touch.clientX;
var pageY = touch.clientY;
var left = pageX - state.startX + (state.lastLeft || 0);
left = left < -movable.left ? -movable.left : left;
left = left > movable.width ? movable.width : left;
state.startX = pageX
var top = pageY - state.startY + (state.lastTop || 0);
top = top < -movable.top ? -movable.top : top;
top = top > movable.height ? movable.height : top;
state.startY = pageY
state.lastLeft = left
state.lastTop = top
styleChange(left, top, ins)
}
var _movable = false;
function mousedown(e, ins) {
if (!isH5 || !isPC()) return
touchstart(e, ins)
_movable = true
window.onmousemove = function(event) {
if (!isH5 || !isPC() || !_movable) return
touchmove(event, ins, e)
}
window.onmouseup = function(event) {
if (!isH5 || !isPC() || !_movable) return
_movable = false
}
}
function fabreset(reset, oldreset, owner, ins) {
if (reset > 0) {
var state = ins.getState()
state.startY = 0;
state.startX = 0;
state.lastLeft = 0;
state.lastTop = 0;
styleChange(0, 0, owner)
}
}
module.exports = {
touchstart: touchstart,
touchmove: touchmove,
mousedown: mousedown,
fabreset: fabreset
}

59
components/firstui/fui-fab/mpjs.js Normal file
View File

@ -0,0 +1,59 @@
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 6 14 0 7 2549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
// #ifndef APP-PLUS || MP-WEIXIN || H5
export default {
data() {
return {
startX: 0,
startY: 0,
lastLeft: 0,
lastTop: 0,
transform: ''
}
},
watch: {
resetNum(val) {
if (val > 0) {
this.startX = 0;
this.startY = 0;
this.lastLeft = 0;
this.lastTop = 0;
this.transform = 'translate3d(0,0,0)'
}
}
},
methods: {
touchstart(e) {
if (!this.isDrag) return;
const touch = e.touches || e.changedTouches
this.startX = touch[0].clientX
this.startY = touch[0].clientY
},
touchmove(e) {
if (!this.isDrag) return;
const touch = e.touches || e.changedTouches
let pageX = touch[0].clientX,
pageY = touch[0].clientY;
var left = pageX - this.startX + this.lastLeft;
left = left < -this.eLeft ? -this.eLeft : left;
left = left > this.maxWidth ? this.maxWidth : left;
this.startX = pageX
var top = pageY - this.startY + this.lastTop;
top = top < -this.eTop ? -this.eTop : top;
top = top > this.maxHeight ? this.maxHeight : top;
this.startY = pageY
this.lastLeft = left
this.lastTop = top
this.transform = `translate3d(${left}px,${top}px,0)`
}
}
}
// #endif
// #ifdef APP-PLUS|| MP-WEIXIN || H5
export default {}
// #endif