功能：

• 當(dāng)然啦可以拖拽~
• 可選溜邊兒走還是全屏拖動(dòng)
• 可選拖動(dòng)邊界
• 可選有無關(guān)閉圖標(biāo)
• 可選松手是否回到初始位置
• 初始位置可自定義
• 內(nèi)容通過插槽兒自定義

思路：

• 用到的一定是這個(gè)touchstart、touchmove、touchend對(duì)哇？這仨都能獲取到當(dāng)前落于屏幕的位置。
• 首先這個(gè)bar它一定是個(gè) fixed 定位對(duì)哇？我們的變量一定是這個(gè) bar 的 left 和 top 對(duì)哇？設(shè)置變量的時(shí)候一定是 touchmove 時(shí)對(duì)哇？
• 我們?cè)?touchstart 時(shí)就得計(jì)算出當(dāng)前落點(diǎn)距離這個(gè) bar 邊界的距離，一會(huì)兒 move 時(shí)要用。
• 嘿嘿這 move 就到了哇？我們這個(gè) left 和 top 就給它算就行了哇？大概就是當(dāng)前的落點(diǎn)位置減去 start 時(shí)落點(diǎn)距離容器的距離
• 計(jì)算 left 和 top 時(shí)注意加入邊界的計(jì)算（容器不可拖拽出屏幕） 和 溜邊兒走或全屏可走的計(jì)算

代碼：

組件代碼 ↓

<script lang='ts' setup>

// #region 傳輸?shù)臄?shù)據(jù)

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>(), {
    // 元素初始位置：可設(shè)置為百分比
    init: () => {
        return { top: 20, left: 20 }
    },
    // 結(jié)束拖拽松手后回到初始位置
    initPosition: false,
    // 邊界：為false，可全頁拖拽但元素保持完整在區(qū)域內(nèi)；為數(shù)組，[上，右，下，左]，可拖拽區(qū)域到容器的邊界
    boundary: () => [100, 20, 20, 20],
    // 溜邊兒走：為false時(shí)可全屏拖拽；為string時(shí)只能溜邊兒拖：水平拖 "horizontal" 垂直拖 "vertical"，位置遵照初始值設(shè)置
    dragOnDodge: false,
    showClose: false
})

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

// #endregion

// #region 初始化數(shù)據(jù)：元素、容器

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 移動(dòng)
const startX = ref(0);
const startY = ref(0);

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

const start = (e: TouchEvent) => {
    // 應(yīng)該算出按下距離容器頂部及左邊的距離
    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事件做區(qū)分，只有移動(dòng)超出一定距離才算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一個(gè)好用的 touchBar 組件就完成啦~