mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 17:18:40 +08:00
feat: ✨ fab添加draggable属性 (#259)
* feat: ✨ fab添加draggable属性
* chore: 删除注释
* docs: update doc
This commit is contained in:
QingHuan
GitHub
parent
2161705a2f
commit
5e0cd6caa2
@ -65,19 +65,30 @@ const disabled = ref<boolean>(false)
|
||||
const active = ref<boolean>(false)
|
||||
|
||||
```
|
||||
|
||||
## 可拖动按钮
|
||||
```html
|
||||
<wd-fab :draggable="true">
|
||||
```
|
||||
|
||||
:::warning
|
||||
开启拖动后`direction`属性将失效，会根据拖动后的位置自动计算弹出方向。拖动完成后按钮将会自动吸边。
|
||||
:::
|
||||
|
||||
## Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
| -------------- | ---------------------- | ------------ | ----------------------------------------------------------------------------------------- | -------------- | -------- |
|
||||
| v-model:active | 是否激活 | boolean | - | false | 0.1.57 |
|
||||
| type | 类型 | FabType | 'primary' | 'success' | 'info' | 'warning' | 'error' | 'default' | 'primary' | 0.1.57 |
|
||||
| position | 悬浮按钮位置 | FabPosition | 'left-top' | 'right-top' | 'left-bottom' | 'right-bottom' | 'right-bottom' | 0.1.57 |
|
||||
| direction | 悬浮按钮菜单弹出方向 | FabDirection | 'top' | 'right' | 'bottom' | 'left' | 'top' | 0.1.57 |
|
||||
| disabled | 是否禁用 | boolean | - | false | 0.1.57 |
|
||||
| inactiveIcon | 悬浮按钮未展开时的图标 | string | - | 'add' | 0.1.57 |
|
||||
| activeIcon | 悬浮按钮展开时的图标 | string | - | 'close' | 0.1.57 |
|
||||
| zIndex | 自定义悬浮按钮层级 | number | - | 99 | 0.1.57 |
|
||||
| customStyle | 自定义样式 | string | - | '' | 0.1.57 |
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
| -------------- | ---------------------- | ------------ | ----------------------------------------------------------------------------------------- | -------------- | ---------------- |
|
||||
| v-model:active | 是否激活 | boolean | - | false | 0.1.57 |
|
||||
| type | 类型 | FabType | 'primary' | 'success' | 'info' | 'warning' | 'error' | 'default' | 'primary' | 0.1.57 |
|
||||
| position | 悬浮按钮位置 | FabPosition | 'left-top' | 'right-top' | 'left-bottom' | 'right-bottom' | 'right-bottom' | 0.1.57 |
|
||||
| draggable | 按钮能否拖动 | boolean | | false | $LOWEST_VERSION$ |
|
||||
| direction | 悬浮按钮菜单弹出方向 | FabDirection | 'top' | 'right' | 'bottom' | 'left' | 'top' | 0.1.57 |
|
||||
| disabled | 是否禁用 | boolean | - | false | 0.1.57 |
|
||||
| inactiveIcon | 悬浮按钮未展开时的图标 | string | - | 'add' | 0.1.57 |
|
||||
| activeIcon | 悬浮按钮展开时的图标 | string | - | 'close' | 0.1.57 |
|
||||
| zIndex | 自定义悬浮按钮层级 | number | - | 99 | 0.1.57 |
|
||||
| customStyle | 自定义样式 | string | - | '' | 0.1.57 |
|
||||
|
||||
## 外部样式类
|
||||
|
||||
|
||||
@ -32,13 +32,18 @@
|
||||
<wd-switch v-model="disabled" size="22px" />
|
||||
</view>
|
||||
</demo-block>
|
||||
<demo-block title="可拖动">
|
||||
<view @click.stop="">
|
||||
<wd-switch v-model="draggable" size="22px" />
|
||||
</view>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="切换展示">
|
||||
<view @click.stop="">
|
||||
<wd-button type="primary" @click="active = !active" round>切换</wd-button>
|
||||
</view>
|
||||
</demo-block>
|
||||
<wd-fab v-model:active="active" :disabled="disabled" :type="type" :position="position" :direction="direction">
|
||||
<wd-fab v-model:active="active" :disabled="disabled" :type="type" :position="position" :direction="direction" :draggable="draggable">
|
||||
<wd-button @click="showToast('一键三连')" :disabled="disabled" custom-class="custom-button" type="primary" round>
|
||||
<wd-icon name="github-filled" size="22px"></wd-icon>
|
||||
</wd-button>
|
||||
@ -65,6 +70,7 @@ const type = ref<'primary' | 'success' | 'info' | 'warning' | 'error' | 'default
|
||||
const position = ref<'left-top' | 'right-top' | 'left-bottom' | 'right-bottom'>('left-bottom')
|
||||
const direction = ref<'top' | 'right' | 'bottom' | 'left'>('top')
|
||||
const disabled = ref<boolean>(false)
|
||||
const draggable = ref(false)
|
||||
const { closeOutside } = useQueue()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -822,10 +822,6 @@ $-sidebar-active-border-height: var(--wd-sidebar-active-border-height, 16px) !de
|
||||
$-fab-trigger-height: var(--wd-fab-trigger-height, 56px) !default;
|
||||
$-fab-trigger-width: var(--wd-fab-trigger-width, 56px) !default;
|
||||
$-fab-actions-padding: var(--wd-actions-padding, 12px) !default;
|
||||
$-fab-top: var(--wd-fab-top, 16px) !default;
|
||||
$-fab-left: var(--wd-fab-left, 16px) !default;
|
||||
$-fab-right: var(--wd-fab-right, 16px) !default;
|
||||
$-fab-bottom: var(--wd-fab-bottom, 16px) !default;
|
||||
|
||||
|
||||
/* count-down */
|
||||
|
||||
@ -643,3 +643,8 @@ export const getPropByPath = (obj: any, path: string): any => {
|
||||
* @returns 如果值是Date类型，则返回true，否则返回false
|
||||
*/
|
||||
export const isDate = (val: unknown): val is Date => Object.prototype.toString.call(val) === '[object Date]' && !Number.isNaN((val as Date).getTime())
|
||||
|
||||
/**
|
||||
* 判断环境是否是H5
|
||||
*/
|
||||
export const isH5 = process.env.UNI_PLATFORM === 'h5'
|
||||
|
||||
@ -9,7 +9,6 @@
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
|
||||
|
||||
@include edeep(trigger) {
|
||||
min-width: auto !important;
|
||||
box-sizing: border-box;
|
||||
@ -109,46 +108,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@include edeep(icon) {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@include m(left-top) {
|
||||
top: $-fab-top;
|
||||
left: $-fab-left;
|
||||
/* #ifdef H5 */
|
||||
top: calc($-fab-top + var(--window-top));
|
||||
left: calc($-fab-left + var(--window-left));
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
@include m(right-top) {
|
||||
top: $-fab-top;
|
||||
right: $-fab-right;
|
||||
/* #ifdef H5 */
|
||||
top: calc($-fab-top + var(--window-top));
|
||||
right: calc($-fab-right + var(--window-right));
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
@include m(left-bottom) {
|
||||
bottom: $-fab-bottom;
|
||||
left: $-fab-left;
|
||||
/* #ifdef H5 */
|
||||
bottom: calc($-fab-bottom + var(--window-bottom));
|
||||
left: calc($-fab-left + var(--window-left));
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
@include m(right-bottom) {
|
||||
bottom: $-fab-bottom;
|
||||
right: $-fab-right;
|
||||
/* #ifdef H5 */
|
||||
bottom: calc($-fab-bottom + var(--window-bottom));
|
||||
right: calc($-fab-right + var(--window-right));
|
||||
/* #endif */
|
||||
}
|
||||
}
|
||||
@ -38,7 +38,11 @@ export const fabProps = {
|
||||
/**
|
||||
* 自定义悬浮按钮层级
|
||||
*/
|
||||
zIndex: makeNumberProp(99)
|
||||
zIndex: makeNumberProp(99),
|
||||
/**
|
||||
* 是否可拖动
|
||||
*/
|
||||
draggable: makeBooleanProp(false)
|
||||
}
|
||||
|
||||
export type FabProps = ExtractPropTypes<typeof fabProps>
|
||||
|
||||
@ -1,16 +1,23 @@
|
||||
<template>
|
||||
<view :class="`wd-fab wd-fab--${position} ${customClass}`" :style="rootStyle" @click.stop="">
|
||||
<view
|
||||
@touchmove.stop.prevent="handleTouchMove"
|
||||
@touchstart="handleTouchStart"
|
||||
@touchend="handleTouchEnd"
|
||||
:class="`wd-fab ${customClass}`"
|
||||
:style="rootStyle"
|
||||
@click.stop=""
|
||||
>
|
||||
<view @click.stop="">
|
||||
<wd-button @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
|
||||
:enter-class="`wd-fab__transition-enter--${direction}`"
|
||||
:enter-class="`wd-fab__transition-enter--${fabDirection}`"
|
||||
enter-active-class="wd-fab__transition-enter-active"
|
||||
:leave-to-class="`wd-fab__transition-leave-to--${direction}`"
|
||||
: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--${direction}`"
|
||||
:custom-class="`wd-fab__actions wd-fab__actions--${fabDirection}`"
|
||||
:show="isActive"
|
||||
:duration="300"
|
||||
name=""
|
||||
@ -33,10 +40,11 @@ export default {
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { type CSSProperties, computed, onBeforeMount, ref, watch, inject, getCurrentInstance, onBeforeUnmount } from 'vue'
|
||||
import { isDef, objToStyle } from '../common/util'
|
||||
import { 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 { onMounted, reactive } from 'vue'
|
||||
|
||||
const props = defineProps(fabProps)
|
||||
const emit = defineEmits(['update:active'])
|
||||
@ -66,8 +74,115 @@ watch(
|
||||
}
|
||||
)
|
||||
|
||||
const fabDirection = ref(props.direction)
|
||||
|
||||
watch(
|
||||
() => props.direction,
|
||||
(direction) => (fabDirection.value = direction)
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.position,
|
||||
() => initPosition()
|
||||
)
|
||||
|
||||
const top = ref(0)
|
||||
const left = ref(0)
|
||||
const screen = reactive({ width: 0, height: 0 })
|
||||
const fabSize = ref(56)
|
||||
const bounding = reactive({
|
||||
minTop: 0,
|
||||
minLeft: 0,
|
||||
maxTop: 0,
|
||||
maxLeft: 0
|
||||
})
|
||||
|
||||
function getBounding() {
|
||||
const sysInfo = uni.getSystemInfoSync()
|
||||
const gap = 16
|
||||
|
||||
screen.width = sysInfo.windowWidth
|
||||
screen.height = isH5 ? sysInfo.windowTop + sysInfo.windowHeight : sysInfo.windowHeight
|
||||
|
||||
bounding.minTop = isH5 ? sysInfo.windowTop + gap : gap
|
||||
bounding.minLeft = gap
|
||||
bounding.maxLeft = screen.width - fabSize.value - gap
|
||||
bounding.maxTop = screen.height - fabSize.value - gap
|
||||
}
|
||||
|
||||
function initPosition() {
|
||||
const pos = props.position
|
||||
const { minLeft, minTop, maxLeft, maxTop } = bounding
|
||||
if (pos === 'left-top') {
|
||||
top.value = minTop
|
||||
left.value = minLeft
|
||||
} else if (pos === 'right-top') {
|
||||
top.value = minTop
|
||||
left.value = maxLeft
|
||||
} else if (pos === 'left-bottom') {
|
||||
top.value = maxTop
|
||||
left.value = minLeft
|
||||
} else if (pos === 'right-bottom') {
|
||||
top.value = maxTop
|
||||
left.value = maxLeft
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initPosition()
|
||||
})
|
||||
|
||||
// 按下时坐标相对于元素的偏移量
|
||||
const touchOffset = reactive({ x: 0, y: 0 })
|
||||
const attractTransition = ref(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.value / 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 = {}
|
||||
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
|
||||
}
|
||||
@ -75,6 +190,7 @@ const rootStyle = computed(() => {
|
||||
})
|
||||
|
||||
onBeforeMount(() => {
|
||||
getBounding()
|
||||
if (queue && queue.pushToQueue) {
|
||||
queue.pushToQueue(proxy)
|
||||
} else {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user