更新：登录功能
This commit is contained in:
276
uni_modules/wot-design-uni/components/wd-fab/wd-fab.vue
Normal file
276
uni_modules/wot-design-uni/components/wd-fab/wd-fab.vue
Normal file
@@ -0,0 +1,276 @@
|
||||
<template>
|
||||
<view
|
||||
@touchmove.stop.prevent="handleTouchMove"
|
||||
@touchstart="handleTouchStart"
|
||||
@touchend="handleTouchEnd"
|
||||
:class="`wd-fab ${customClass}`"
|
||||
:style="rootStyle"
|
||||
@click.stop=""
|
||||
>
|
||||
<view @click.stop="" :style="{ visibility: inited ? 'visible' : 'hidden' }" id="trigger">
|
||||
<slot name="trigger" v-if="$slots.trigger"></slot>
|
||||
<wd-button v-else @click="handleClick" custom-class="wd-fab__trigger" round :type="type" :disabled="disabled">
|
||||
<wd-icon custom-class="wd-fab__icon" :name="isActive ? activeIcon : inactiveIcon"></wd-icon>
|
||||
</wd-button>
|
||||
</view>
|
||||
<wd-transition
|
||||
v-if="expandable"
|
||||
:enter-class="`wd-fab__transition-enter--${fabDirection}`"
|
||||
enter-active-class="wd-fab__transition-enter-active"
|
||||
:leave-to-class="`wd-fab__transition-leave-to--${fabDirection}`"
|
||||
leave-active-class="wd-fab__transition-leave-active"
|
||||
:custom-class="`wd-fab__actions wd-fab__actions--${fabDirection}`"
|
||||
:show="isActive"
|
||||
:duration="300"
|
||||
>
|
||||
<slot></slot>
|
||||
</wd-transition>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'wd-fab',
|
||||
options: {
|
||||
virtualHost: true,
|
||||
addGlobalClass: true,
|
||||
styleIsolation: 'shared'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import wdButton from '../wd-button/wd-button.vue'
|
||||
import wdIcon from '../wd-icon/wd-icon.vue'
|
||||
import wdTransition from '../wd-transition/wd-transition.vue'
|
||||
import { type CSSProperties, computed, ref, watch, inject, getCurrentInstance, onBeforeUnmount, onMounted, nextTick } from 'vue'
|
||||
import { getRect, isDef, isH5, objToStyle } from '../common/util'
|
||||
import { type Queue, queueKey } from '../composables/useQueue'
|
||||
import { closeOther, pushToQueue, removeFromQueue } from '../common/clickoutside'
|
||||
import { fabProps, type FabExpose } from './types'
|
||||
import { reactive } from 'vue'
|
||||
import { useRaf } from '../composables/useRaf'
|
||||
|
||||
const props = defineProps(fabProps)
|
||||
const emit = defineEmits(['update:active', 'click'])
|
||||
const inited = ref<boolean>(false) // 是否初始化完成
|
||||
const isActive = ref<boolean>(false) // 是否激活状态
|
||||
const queue = inject<Queue | null>(queueKey, null)
|
||||
const { proxy } = getCurrentInstance() as any
|
||||
|
||||
watch(
|
||||
() => props.active,
|
||||
(newValue) => {
|
||||
isActive.value = newValue
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
)
|
||||
|
||||
watch(
|
||||
() => isActive.value,
|
||||
(newValue) => {
|
||||
if (newValue) {
|
||||
if (queue && queue.closeOther) {
|
||||
queue.closeOther(proxy)
|
||||
} else {
|
||||
closeOther(proxy)
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const fabDirection = ref(props.direction)
|
||||
|
||||
watch(
|
||||
() => props.direction,
|
||||
(direction) => (fabDirection.value = direction)
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.position,
|
||||
() => initPosition()
|
||||
)
|
||||
|
||||
const top = ref<number>(0)
|
||||
const left = ref<number>(0)
|
||||
const screen = reactive({ width: 0, height: 0 })
|
||||
const fabSize = reactive({ width: 56, height: 56 })
|
||||
const bounding = reactive({
|
||||
minTop: 0,
|
||||
minLeft: 0,
|
||||
maxTop: 0,
|
||||
maxLeft: 0
|
||||
})
|
||||
|
||||
async function getBounding() {
|
||||
const sysInfo = uni.getSystemInfoSync()
|
||||
try {
|
||||
const trigerInfo = await getRect('#trigger', false, proxy)
|
||||
fabSize.width = trigerInfo.width || 56
|
||||
fabSize.height = trigerInfo.height || 56
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
|
||||
const { top = 16, left = 16, right = 16, bottom = 16 } = props.gap
|
||||
screen.width = sysInfo.windowWidth
|
||||
screen.height = isH5 ? sysInfo.windowTop + sysInfo.windowHeight : sysInfo.windowHeight
|
||||
bounding.minTop = isH5 ? sysInfo.windowTop + top : top
|
||||
bounding.minLeft = left
|
||||
bounding.maxLeft = screen.width - fabSize.width - right
|
||||
bounding.maxTop = screen.height - fabSize.height - bottom
|
||||
}
|
||||
|
||||
function initPosition() {
|
||||
const pos = props.position
|
||||
const { minLeft, minTop, maxLeft, maxTop } = bounding
|
||||
const centerY = (maxTop + minTop) / 2
|
||||
const centerX = (maxLeft + minLeft) / 2
|
||||
|
||||
switch (pos) {
|
||||
case 'left-top':
|
||||
top.value = minTop
|
||||
left.value = minLeft
|
||||
break
|
||||
case 'right-top':
|
||||
top.value = minTop
|
||||
left.value = maxLeft
|
||||
break
|
||||
case 'left-bottom':
|
||||
top.value = maxTop
|
||||
left.value = minLeft
|
||||
break
|
||||
case 'right-bottom':
|
||||
top.value = maxTop
|
||||
left.value = maxLeft
|
||||
break
|
||||
case 'left-center':
|
||||
top.value = centerY
|
||||
left.value = minLeft
|
||||
break
|
||||
case 'right-center':
|
||||
top.value = centerY
|
||||
left.value = maxLeft
|
||||
break
|
||||
case 'top-center':
|
||||
top.value = minTop
|
||||
left.value = centerX
|
||||
break
|
||||
case 'bottom-center':
|
||||
top.value = maxTop
|
||||
left.value = centerX
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// 按下时坐标相对于元素的偏移量
|
||||
const touchOffset = reactive({ x: 0, y: 0 })
|
||||
const attractTransition = ref<boolean>(false)
|
||||
function handleTouchStart(e: TouchEvent) {
|
||||
if (props.draggable === false) return
|
||||
|
||||
const touch = e.touches[0]
|
||||
touchOffset.x = touch.clientX - left.value
|
||||
touchOffset.y = touch.clientY - top.value
|
||||
attractTransition.value = false
|
||||
}
|
||||
|
||||
function handleTouchMove(e: TouchEvent) {
|
||||
if (props.draggable === false) return
|
||||
|
||||
const touch = e.touches[0]
|
||||
const { minLeft, minTop, maxLeft, maxTop } = bounding
|
||||
let x = touch.clientX - touchOffset.x
|
||||
let y = touch.clientY - touchOffset.y
|
||||
|
||||
if (x < minLeft) x = minLeft
|
||||
else if (x > maxLeft) x = maxLeft
|
||||
|
||||
if (y < minTop) y = minTop
|
||||
else if (y > maxTop) y = maxTop
|
||||
|
||||
top.value = y
|
||||
left.value = x
|
||||
}
|
||||
|
||||
function handleTouchEnd() {
|
||||
if (props.draggable === false) return
|
||||
|
||||
const screenCenterX = screen.width / 2
|
||||
const fabCenterX = left.value + fabSize.width / 2
|
||||
attractTransition.value = true
|
||||
if (fabCenterX < screenCenterX) {
|
||||
left.value = bounding.minLeft
|
||||
fabDirection.value = 'right'
|
||||
} else {
|
||||
left.value = bounding.maxLeft
|
||||
fabDirection.value = 'left'
|
||||
}
|
||||
}
|
||||
|
||||
const rootStyle = computed(() => {
|
||||
const style: CSSProperties = {
|
||||
top: top.value + 'px',
|
||||
left: left.value + 'px',
|
||||
transition: attractTransition.value ? 'all ease 0.3s' : 'none'
|
||||
}
|
||||
if (isDef(props.zIndex)) {
|
||||
style['z-index'] = props.zIndex
|
||||
}
|
||||
return `${objToStyle(style)}${props.customStyle}`
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (queue && queue.pushToQueue) {
|
||||
queue.pushToQueue(proxy)
|
||||
} else {
|
||||
pushToQueue(proxy)
|
||||
}
|
||||
|
||||
const { start } = useRaf(async () => {
|
||||
await getBounding()
|
||||
initPosition()
|
||||
inited.value = true
|
||||
})
|
||||
start()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (queue && queue.removeFromQueue) {
|
||||
queue.removeFromQueue(proxy)
|
||||
} else {
|
||||
removeFromQueue(proxy)
|
||||
}
|
||||
})
|
||||
|
||||
function handleClick() {
|
||||
if (props.disabled) {
|
||||
return
|
||||
}
|
||||
if (!props.expandable) {
|
||||
emit('click')
|
||||
return
|
||||
}
|
||||
isActive.value = !isActive.value
|
||||
emit('update:active', isActive.value)
|
||||
}
|
||||
|
||||
function open() {
|
||||
isActive.value = true
|
||||
emit('update:active', true)
|
||||
}
|
||||
|
||||
function close() {
|
||||
isActive.value = false
|
||||
emit('update:active', false)
|
||||
}
|
||||
|
||||
defineExpose<FabExpose>({
|
||||
open,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user