Vue3 & TypeScript组件：touchBar

功能：

• 当然啦可以拖拽~
• 可选溜边儿走还是全屏拖动
• 可选拖动边界
• 可选有无关闭图标
• 可选松手是否回到初始位置
• 初始位置可自定义
• 内容通过插槽儿自定义

思路：

• 用到的一定是这个touchstart、touchmove、touchend对哇？这仨都能获取到当前落于屏幕的位置。
• 首先这个bar它一定是个 fixed 定位对哇？我们的变量一定是这个 bar 的 left 和 top 对哇？设置变量的时候一定是 touchmove 时对哇？
• 我们在 touchstart 时就得计算出当前落点距离这个 bar 边界的距离，一会儿 move 时要用。
• 嘿嘿这 move 就到了哇？我们这个 left 和 top 就给它算就行了哇？大概就是当前的落点位置减去 start 时落点距离容器的距离
• 计算 left 和 top 时注意加入边界的计算（容器不可拖拽出屏幕） 和 溜边儿走或全屏可走的计算

代码：

组件代码 ↓

<script lang='ts' setup>

// #region 传输的数据

type PropsType = {
    init?: {
        top: number | string,
        left: number | string
    },
    initPosition?: boolean,
    boundary?: boolean | Array<number>,
    dragOnDodge?: boolean | string,
    showClose?: boolean
}

const props = withDefaults(defineProps<PropsType>(), {
    // 元素初始位置：可设置为百分比
    init: () => {
        return { top: 20, left: 20 }
    },
    // 结束拖拽松手后回到初始位置
    initPosition: false,
    // 边界：为false，可全页拖拽但元素保持完整在区域内；为数组，[上，右，下，左]，可拖拽区域到容器的边界
    boundary: () => [100, 20, 20, 20],
    // 溜边儿走：为false时可全屏拖拽；为string时只能溜边儿拖：水平拖 "horizontal" 垂直拖 "vertical"，位置遵照初始值设置
    dragOnDodge: false,
    showClose: false
})

const emit = defineEmits(['click']);

// #endregion

// #region 初始化数据：元素、容器

const initTimer = shallowRef(0);
const refBar = ref(null);
const left = ref(props.init.left);
const top = ref(props.init.top);

const minLeft = shallowRef(0);
const maxLeft = shallowRef(0);
const minTop = shallowRef(0);
const maxTop = shallowRef(0);

const initBarCom = () => {
    const barEl = refBar.value;
    const barWidth = barEl.clientWidth;
    const barHeight = barEl.clientHeight;
    const screenWidth = innerWidth;
    const screenHeight = innerHeight;

    minLeft.value = !props.boundary ? 0 : props.boundary[3];
    maxLeft.value = screenWidth - barWidth - (!props.boundary ? 0 : props.boundary[1]);
    minTop.value = !props.boundary ? 0 : props.boundary[0];
    maxTop.value = screenHeight - barHeight - (!props.boundary ? 0 : props.boundary[2]);
}
onMounted(() => {
    initBarCom();
})

// #endregion

// #region 移动
const startX = ref(0);
const startY = ref(0);

const distanceX = ref(0);
const distanceY = ref(0);

const start = (e: TouchEvent) => {
    // 应该算出按下距离容器顶部及左边的距离
    const top = refBar.value.offsetTop;
    const left = refBar.value.offsetLeft;

    startX.value = e.targetTouches[0].pageX;
    startY.value = e.targetTouches[0].pageY;

    distanceX.value = startX.value - left;
    distanceY.value = startY.value - top;
}

const move = (e: TouchEvent) => {
    const moveX = e.targetTouches[0].pageX;
    const moveY = e.targetTouches[0].pageY;
    // 与click事件做区分，只有移动超出一定距离才算move
    if (Math.abs(moveX - startX.value) < 10 && Math.abs(moveY - startY.value) < 10) return;
    // 左右边界
    let leftN: number | string = moveX - distanceX.value;
    if (leftN < minLeft.value) leftN = minLeft.value;
    else if (leftN > maxLeft.value) leftN = maxLeft.value;
    // 上下边界
    let topN: number | string = moveY - distanceY.value;
    if (topN < minTop.value) topN = minTop.value;
    else if (topN > maxTop.value) topN = maxTop.value;
    if (props.dragOnDodge === 'horizontal') topN = props.init.top;
    else if (props.dragOnDodge === 'vertical') leftN = props.init.left;

    // 赋值定位
    left.value = leftN + 'px';
    top.value = topN + 'px';
}

const end = () => {
    if (!props.initPosition) return;
    // 回到初始位置
    removeTimer();
    const barEl = refBar.value;
    barEl.style.transition = 'all .1s ease-in';
    left.value = props.init.left;
    top.value = props.init.top;
    initTimer.value = setTimeout(() => {
        barEl.style.transition = '';
    }, 100);
}

// #endregion

// #region 功能

const show = ref(true);

// #endregion
const removeTimer = () => {
    if (initTimer.value) {
        clearTimeout(initTimer.value);
        initTimer.value = 0;
    }
}
onBeforeUnmount(() => {
    removeTimer();
})

</script>

<template>
    <Transition>
        <div class="touchbar-item" @touchstart="start" @touchmove.stop="move" @touchend="end" ref="refBar" :style="{
            top,
            left
        }" @click="emit('click')" v-if="show">
            <div class="icon-view" @click.stop="show = false" v-if="props.showClose">
                <img src="@/assets/images/common/icon_close_transbg.png" alt="" class="icon-close">
            </div>
            <slot />
        </div>
    </Transition>
</template>

<style lang="scss" scoped>
.touchbar-item {
    position: fixed;
}

.icon-view {
    width: 30px;
    height: 30px;

    position: absolute;
    top: 10px;
    right: 10px;
}

.icon-close {
    width: 80%;
    float: right;
}
</style>

~~~_tada一个好用的 touchBar 组件就完成啦~