feat: 首次提交
This commit is contained in:
peerless_hero
192
components/firstui/fui-movable-view/fui-movable-view.vue
Normal file
192
components/firstui/fui-movable-view/fui-movable-view.vue
Normal file
@ -0,0 +1,192 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 6 1 40 7 2 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view>
|
||||
<!-- #ifdef APP-VUE || H5 -->
|
||||
<view class="fui-movable__view" :class="{'fui-movable__cursor':direction!=='none'}" :data-direction="direction"
|
||||
:data-width="maxWidth" :data-height="maxHeight" :data-left="eLeft" :data-top="eTop"
|
||||
@touchstart="handler.touchstart" @touchmove="handler.touchmove" @mousedown="handler.mousedown"
|
||||
:style="getStyles">
|
||||
<slot></slot>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="fui-movable__view" :class="{'fui-movable__cursor':direction!=='none'}" :data-direction="direction"
|
||||
:data-width="maxWidth" :data-height="maxHeight" :data-left="eLeft" :data-top="eTop"
|
||||
@touchstart="handler.touchstart" :catchtouchmove="handler.touchmove" :style="getStyles">
|
||||
<slot></slot>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<view class="fui-movable__view" @touchstart="touchstart" @touchmove.stop.prevent="touchmove"
|
||||
ref="fui-movable__view" :style="getStyles">
|
||||
<slot></slot>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifndef APP-PLUS || MP-WEIXIN || H5 -->
|
||||
<view class="fui-movable__view" @touchstart="touchstart" @touchmove.stop.prevent="touchmove" :style="getStyles">
|
||||
<slot></slot>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
<!-- #ifdef APP-VUE || MP-WEIXIN || H5-->
|
||||
<script src="./index.wxs" module="handler" lang="wxs"></script>
|
||||
<!-- #endif -->
|
||||
|
||||
<script>
|
||||
// #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-movable-view",
|
||||
emits: ['change'],
|
||||
mixins: [mpjs, bindingx],
|
||||
props: {
|
||||
//left值,设置大于-1的值则right失效
|
||||
left: {
|
||||
type: [Number, String],
|
||||
default: -1
|
||||
},
|
||||
right: {
|
||||
type: [Number, String],
|
||||
default: 80
|
||||
},
|
||||
//top值,设置大于-1的值则bottom失效
|
||||
top: {
|
||||
type: [Number, String],
|
||||
default: -1
|
||||
},
|
||||
bottom: {
|
||||
type: [Number, String],
|
||||
default: 120
|
||||
},
|
||||
zIndex: {
|
||||
type: [Number, String],
|
||||
default: 10
|
||||
},
|
||||
//移动方向，属性值有all、vertical、horizontal、none
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'all'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
maxWidth: 0,
|
||||
maxHeight: 0,
|
||||
eLeft: 0,
|
||||
eTop: 0,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
position(val) {
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this._getSize()
|
||||
}, 50);
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this._getSize()
|
||||
}, 50);
|
||||
})
|
||||
},
|
||||
computed: {
|
||||
position() {
|
||||
return `${this.left}_${this.right}_${this.top}_${this.bottom}`
|
||||
},
|
||||
getStyles() {
|
||||
let styles = `z-index:${this.zIndex};`
|
||||
if (this.left != -1) {
|
||||
styles += `left:${this.left}rpx;`
|
||||
} else {
|
||||
styles += `right:${this.right}rpx;`
|
||||
}
|
||||
if (this.top != -1) {
|
||||
styles += `top:${this.top}rpx;`
|
||||
} else {
|
||||
styles += `bottom:${this.bottom}rpx;`
|
||||
}
|
||||
// #ifndef APP-PLUS || MP-WEIXIN || H5
|
||||
if (this.direction !== 'none') {
|
||||
styles += `transform:${this.transform};`
|
||||
}
|
||||
// #endif
|
||||
return styles;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
_getSize() {
|
||||
const sys = uni.getSystemInfoSync()
|
||||
// #ifndef APP-NVUE
|
||||
uni.createSelectorQuery()
|
||||
// #ifndef MP-ALIPAY
|
||||
.in(this)
|
||||
// #endif
|
||||
.select('.fui-movable__view')
|
||||
.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;
|
||||
this.change({
|
||||
left: 0,
|
||||
top: 0
|
||||
})
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
dom.getComponentRect(this.$refs['fui-movable__view'], (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;
|
||||
this.change({
|
||||
left: 0,
|
||||
top: 0
|
||||
})
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
reset() {
|
||||
setTimeout(() => {
|
||||
this._getSize()
|
||||
}, 50);
|
||||
},
|
||||
change(e) {
|
||||
this.$emit('change', {
|
||||
x: e.left + this.eLeft,
|
||||
y: e.top + this.eTop
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fui-movable__view {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
/* #ifdef H5 */
|
||||
.fui-movable__cursor {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
</style>
|
||||
Reference in New Issue
Block a user