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

103
components/firstui/fui-movable-view/bindingx.js Normal file
View File

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

192
components/firstui/fui-movable-view/fui-movable-view.vue Normal file
View 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>

139
components/firstui/fui-movable-view/index.wxs Normal file
View File

@ -0,0 +1,139 @@
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1861407 25 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
var movable = {
width: 100,
height: 100,
direction: '',
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, isChange) {
movable.width = +dataset.width
movable.height = +dataset.height
movable.top = +dataset.top
movable.left = +dataset.left
movable.direction = dataset.direction
}
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()
if (dataset.direction == 'all') {
state.startX = touch.clientX
state.startY = touch.clientY
} else if (dataset.direction == 'vertical') {
state.startY = touch.clientY
} else {
state.startX = touch.clientX
}
setInitValue(dataset)
}
function styleChange(left, top, ins) {
if (!ins) return;
var mview = ins.selectComponent('.fui-movable__view');
if (!mview) return;
mview.setStyle({
transform: 'translate3d(' + left + 'px,' + top + 'px,0)'
})
ins.callMethod('change', {
left: left,
top: top
})
}
function getLeft(pageX, state) {
var left = pageX - state.startX + (state.lastLeft || 0);
left = left < -movable.left ? -movable.left : left;
left = left > movable.width ? movable.width : left;
return left
}
function getTop(pageY, state) {
var top = pageY - state.startY + (state.lastTop || 0);
top = top < -movable.top ? -movable.top : top;
top = top > movable.height ? movable.height : top;
return top
}
function touchmove(e, ins, event) {
if (movable.direction == 'none') 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 = 0,
top = 0;
if (movable.direction == 'all') {
left = getLeft(pageX, state)
state.startX = pageX
top = getTop(pageY, state)
state.startY = pageY
} else if (movable.direction == 'vertical') {
top = getTop(pageY, state)
state.startY = pageY
} else {
left = getLeft(pageX, state)
state.startX = pageX
}
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
}
}
module.exports = {
touchstart: touchstart,
touchmove: touchmove,
mousedown: mousedown
}

76
components/firstui/fui-movable-view/mpjs.js Normal file
View File

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